Video-style preview tiles that start playing the moment the pointer lands on them, with a live timecode and progress bar, and pause where they left off when it leaves. Tap toggles playback on touch.
npx shadcn@latest add https://hyperblur.dev/r/hover-play-tiles.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-play-tiles.tsx.
import { HoverPlayTiles } from "@/components/hyperblur/hover-play-tiles"
<HoverPlayTiles columns={2} onPlayChange={(i, on) => console.log(i, on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; duration: number; scene: "tide" | "orbit" | "city" | "pulse" }[] | 4 clips | Tiles to show; duration is in seconds and scene picks the drawn animation. |
| columns | number | 2 | Number of grid columns. |
| autoPlay | boolean | true | Play each tile in turn while nobody is interacting. The real pointer, a tap or keyboard focus takes over at once. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| onPlayChange | (index: number, playing: boolean) => void | Called when a tile starts or stops playing. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |