A pinned section where vertical scrolling slides a strip of cards sideways, with a progress rail and a card counter.
Tram 28 at dawn and pastries on the hill.
Riverside cellars and the blue-tiled station.
Golden stone, quiet courtyards, late dinners.
Three museums, one long lunch, a night train.
Orange groves and a beach that stays warm.
Rooftops, markets and the last sunset.
npx shadcn@latest add https://hyperblur.dev/r/scroll-horizontal-track.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-horizontal-track.tsx.
import { ScrollHorizontalTrack } from "@/components/hyperblur/scroll-horizontal-track"
<ScrollHorizontalTrack title="Field notes" cards={[{ title: "Lisbon", text: "Tram 28 at dawn." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { title: string; text: string; tag?: string; from?: string; to?: string }[] | 6 sample cards | Cards on the strip. `from` and `to` are the gradient colors of the card art. |
| title | string | "Ten days by rail" | Heading shown above the strip. |
| scroller | RefObject<HTMLElement | null> | HTMLElement | null | A nested scroll container to follow instead of the window. Ignored when `height` is set. | |
| height | number | string | Renders the component inside its own scroll viewport of this height, useful for cards and embeds. Leave unset to follow the window or `scroller`. | |
| autoplay | boolean | false | Only with `height`. Scrolls the viewport up and down on its own until the visitor scrolls it. Static under reduced motion. |
| accent | string | "#2f7bff" | Progress rail and tick color. |