KQ-573 · HOVER/PREVIEW
Hover Preview
A card that plays its own frames while you are looking at it. One linear driver runs from zero to the frame count and back on a loop: its floor picks the frame, so the card re-renders once per frame rather than once per tick, and the same value feeds the hairline under the art, which is why the bar and the picture can never disagree. Hovering with a mouse or reaching the card with the keyboard starts a pass and leaving falls back to the poster on the exit ease; a press pins playback, which is what a tap does on touch, so it is a real toggle button with aria-pressed that Enter and Space operate.
Playing nothing
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/hover-preview
Props
- frames
- number
- default —
- How many frames the sequence has.
- renderFrame
- (index: number) => React.ReactNode
- default —
- Draws frame index; index 0 is the poster.
- duration
- number
- default 2400
- Length of one pass through the sequence, ms.
- title
- string
- default —
- Card title, and the control's accessible name.
- onPlayingChange
- (playing: boolean) => void
- default —
- Fires when this card starts or stops playing.
| Prop | Type | Default | Description |
|---|---|---|---|
| frames | number | — | How many frames the sequence has. |
| renderFrame | (index: number) => React.ReactNode | — | Draws frame index; index 0 is the poster. |
| duration | number | 2400 | Length of one pass through the sequence, ms. |
| title | string | — | Card title, and the control's accessible name. |
| onPlayingChange | (playing: boolean) => void | — | Fires when this card starts or stops playing. |