A pinned stage that swaps its content step by step as you scroll, with clickable step dots and a progress line.
Drop in notes, links and files from anywhere. Everything lands in one inbox.
npx shadcn@latest add https://hyperblur.dev/r/scroll-pin-steps.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-pin-steps.tsx.
import { ScrollPinSteps } from "@/components/hyperblur/scroll-pin-steps"
<ScrollPinSteps steps={[{ title: "Capture", text: "Drop everything in one inbox." }, { title: "Share", text: "Send a live page." }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { title: string; text: string; visual?: ReactNode }[] | 4 sample steps | The steps to walk through. A step without `visual` gets a built-in icon panel. |
| 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" | Dot, progress line and panel tint color. |
| stepLength | number | 0.9 | How many viewport heights of scrolling each step lasts. |
| onStepChange | (index: number) => void | Called when the active step changes. |