Step descriptions on the left and a sticky product mockup on the right that switches screens as each step reaches the middle of the viewport. Steps are also clickable.
Three steps replace the morning triage meeting. Scroll to see each one in the product.
npx shadcn@latest add https://hyperblur.dev/r/how-sticky-scroll.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/how-sticky-scroll.tsx.
import { HowStickyScroll } from "@/components/hyperblur/how-sticky-scroll"
<HowStickyScroll onStepChange={(i) => console.log("step", i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How Tandem works" | Small accent label above the headline. Empty string hides it. |
| title | string | "Support that sorts itself, from first message to resolved" | Section headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| steps | { title: string; description: string; points?: string[] }[] | 3 sample steps | Steps on the left. The mockup has three screens, one for each of the first three steps. |
| defaultStep | number | 0 | Step shown first, also the one rendered on the server. |
| onStepChange | (index: number) => void | Called when the active step changes by scrolling or clicking. | |
| accent | string | "#34d399" | Accent for the active step bar, progress pips, tags and buttons in the mockup. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |