Pan Video Canvas
A canvas twice the size of its frame in both directions, panned by the inverse of the pointer position so moving right pulls the board left and you steer around a space larger than the window. The motion is a plain CSS transition at two seconds on a heavy ease-out curve rather than a per-frame lerp, so the board keeps gliding long after the cursor stops and arrives without any physics. Each tile holds a still and a Vimeo embed scaled two hundred percent behind it; hovering crossfades the still out, the video in, and the title up, all on separate durations so the three do not arrive together.
npx shadcn@latest add https://ui.aryank.space/r/pan-video-canvas.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | PanVideoItem[][] | 3 rows (4, 3, 4) | Vimeo id, title, and still per tile. The middle row is spaced with space-around by design, so an odd count there reads deliberately. |
| factor | number | 1 | Pointer offset divisor. Raise it to reduce how far the board travels. |
factortextDivides the pointer offset. Higher values pan less.
react-player