A card carousel with a draggable scrubber under it. Dragging moves the track continuously and releases onto the nearest stop. Arrow keys step between stops.
npx shadcn@latest add https://hyperblur.dev/r/carousel-scrubber.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/carousel-scrubber.tsx.
import { CarouselScrubber } from "@/components/hyperblur/carousel-scrubber"
<CarouselScrubber slides={[{ title: "Overture", meta: "00:00" }, { title: "First light", meta: "01:12" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| slides | { title: string; meta?: string; from?: string; to?: string }[] | Cards to show. Eight chapters are used when omitted. | |
| value | number | Controlled zero-based stop index. Pair with onChange. | |
| defaultValue | number | 0 | Initial stop index when uncontrolled. |
| onChange | (stop: number) => void | Called when the track settles on a different stop. | |
| autoPlay | number | 0 | Milliseconds between automatic steps. 0 turns it off. Pauses while the pointer is over the component. |
| accent | string | "#2f7bff" | Active tick and focus color. |