Pointer Cue

Show a small View label beside the pointer when it passes over a preview image.

Dependencies: gsap
Size: 204 lines
Controls: 8 controls

example.tsx

1import { PointerCue } from "@/components/onycx/pointer-cue";23export default function Example() {4  return (5    <PointerCue6      label={"View"}7      arrow8      size={64}9      fill={"#6d001a"}10      fillOpacity={0.565}11      ink={"#ffffff"}12      blur={8}13      duration={0.3}14    />15  );16}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/pointer-cue.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/pointer-cue.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the pointer-cue.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
children	ReactNode	—	Content with cue targets. Without children a two-card catalog grid renders from items.
selector	string	"[data-cue]"	Targets that show the cue (only inside the wrapper). A non-empty data-cue value replaces the label for that target.
label / arrow	string / boolean	"View" / true	Cue text; arrow appends ↗.
size	number	64	Diameter in px; font is 9/64 of it. Both grow on 1800px+ viewports like the original's widescreen rules.
fill / fillOpacity	string / number	"#6d001a" / 0.565	Disc colour and its strength (the original #6d001a90).
border / ink / blur	string / string / number	"#ffffff40" / "#ffffff" / 8	1px ring, text colour and backdrop blur in px.
duration	number	0.3	gsap.quickTo duration in seconds, power3.out.
items	PointerCueItem[]	—	{ name, variant, tagline, index, image, href? } for the default catalog.

Behaviour notes

The cue is aria-hidden and decorative; the native cursor stays visible and every card keeps its own always-visible arrow button, so touch and keyboard users lose nothing.
Built inside gsap.matchMedia('(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)'), so it never runs on touch or for reduced motion, and reverts cleanly.
The default catalog images point to /media/spirits-cards/*.webp; replace them with your own. Below 768px the grid stacks to one column without the offset.

Pattern origin

The Onycx tequila house's PointerCue: a fixed 64px circle at z-55 with a 1px #ffffff40 border, #6d001a90 fill, 8px backdrop blur and 9px uppercase 0.1em white text, moved by gsap.quickTo (0.3s, power3.out) on document pointermove and shown with a 0.2s opacity fade only over catalog images; it grows by 0.024px per px of viewport past 1600px on 1800px+ screens. Shown over the catalog grid: two 4:5 28px-radius cards, 60/45px gaps and a 110px offset on even cards.

#cursor#hover#label#gallery#pointer