A chain of instant-photo frames that follows the pointer like a snake: each frame chases the one ahead on a fixed link, leans into the motion and coils into a neat pile when the pointer rests.
Every place, in order.
npx shadcn@latest add https://hyperblur.dev/r/hover-photo-snake.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-photo-snake.tsx.
import { HoverPhotoSnake } from "@/components/hyperblur/hover-photo-snake"
<div style={{ height: 320 }}><HoverPhotoSnake><h2>Field notes</h2></HoverPhotoSnake></div>| Prop | Type | Default | Description |
|---|---|---|---|
| frames | { caption: string; background?: string }[] | 7 travel frames | Frames in the chain, head first. background is any CSS background, such as a gradient or url(). |
| size | number | 58 | Frame width in pixels. The tail shrinks gradually. |
| gap | number | 26 | Longest distance in pixels between two neighbouring frames. |
| follow | number | 0.22 | How quickly each frame chases the one ahead, from 0.02 (lazy) to 0.9 (snappy). |
| autoPlay | boolean | true | Trace a figure-eight on its own while the pointer is away. The real pointer, a tap or keyboard focus takes over at once. |
| showCaptions | boolean | true | Print the caption on the bottom strip of each frame. |
| children | ReactNode | Content shown under the chain. The stage fills its parent, so give the parent a height. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |