Right-Click Context Menu on the Hero — Velocity X's Craft Signal

Most hero sections are static. Click them, scroll past, move on. Velocity X's hero does something different: right-click anywhere on the viewport and a custom context menu appears. Options: "Copy hero copy", "Download brand kit", "Book a call", "Inspect source". No feature bloat, just four intentional micro-interactions that reward curiosity and signal that this wasn't built in 4 hours on a weekend. A custom context menu is a 2026 craft tell. It says "we sweated the details." Users don't expect it. When they right-click and see custom options instead of the browser default, something in their brain goes *ohhh* — the design agency knows about Radix UI. The design agency knows about interactions. A custom context menu costs 30 mins and 12 lines of JSX, but it reads as "premium" for months after launch. Radix ContextMenu does the heavy lifting — keyboard nav, focus traps, ARIA labels, outside-click handling. You supply the trigger, the items, and the actions:

import * as ContextMenu from '@radix-ui/react-context-menu';

export const HeroContextMenu = ({ children }) => (
  <ContextMenu.Root>
    <ContextMenu.Trigger asChild>
      <div>{children}</div>
    </ContextMenu.Trigger>
    <ContextMenu.Portal>
      <ContextMenu.Content className="bg-white rounded shadow-lg border border-gray-200 p-1 z-50">
        <ContextMenu.Item
          onClick={() => navigator.clipboard.writeText(heroCopy)}
          className="px-3 py-2 cursor-pointer hover:bg-gray-100 rounded text-sm"
        >
          Copy hero copy
        </ContextMenu.Item>
        <ContextMenu.Item
          onClick={() => downloadBrandKit()}
          className="px-3 py-2 cursor-pointer hover:bg-gray-100 rounded text-sm"
        >
          Download brand kit
        </ContextMenu.Item>
        <ContextMenu.Separator className="h-px bg-gray-200 my-1" />
        <ContextMenu.Item
          onClick={() => window.location.href = '/pricing'}
          className="px-3 py-2 cursor-pointer hover:bg-gray-100 rounded text-sm"
        >
          Book a call
        </ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Portal>
  </ContextMenu.Root>
);

Mobile doesn't have right-click. Velocity X falls back to a long-press gesture (hold for 500ms on the hero) that triggers the same menu. No custom gesture code — Radix ContextMenu handles this natively. One implementation, two interaction modes. The catch: if your value prop is weak, a fancy context menu won't save you. If the hero copy is generic and the brand kit is a PDF template everyone's seen, the menu becomes *gimmicky*. The context menu works because each option genuinely helps the visitor — copy that's worth copying, a kit that's actually useful, a call-to-action that's one click away. The verdict: if you're rebuilding a portfolio, SaaS landing page, or agency site in 2026, a custom context menu on the hero is table stakes. It's the new "Easter egg". The engineering is trivial. The signal is permanent. Radix ContextMenu + one component = visitors leave thinking "these people build carefully." See it in action at the Velocity X homepage — right-click the hero. For the pattern itself, check the Radix + shadcn deep dive.