A scrolling list of feature steps beside a sticky product window that swaps its scene as each step reaches the middle of the screen. A progress rail fills along the steps, and clicking a step jumps to its scene.
How teams use Lumen
Scroll through the loop most product teams run every week. The workspace on the right follows along.
Feedback from support tickets, sales calls and the in-app widget flows into a single triage queue, already tagged by account and revenue.
Drag the requests that matter onto a timeline. Capacity, dependencies and owners update as you plan, so nobody commits to a fantasy.
Every shipped item reports adoption and retention against the customers who asked for it. Your roadmap finally has a scoreboard.
When a release goes out, everyone who requested it gets a personal note with a link to try it. No spreadsheet of emails required.
npx shadcn@latest add https://hyperblur.dev/r/features-sticky-swap.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-sticky-swap.tsx.
import { FeaturesStickySwap } from "@/components/hyperblur/features-sticky-swap"
<FeaturesStickySwap accent="#8b5cf6" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How teams use Lumen" | Small label above the title. |
| title | string | "One roadmap, from the first request to the release note" | Section heading. |
| subtitle | string | "Scroll through the loop..." | Paragraph beside the heading. |
| items | { kicker: string; title: string; body: string; points?: string[] }[] | 4 steps | Feature steps. Step n shows scene n of the window (inbox, roadmap, insights, releases). |
| accent | string | "#8b5cf6" | Accent for the rail, dots and scene highlights. |
| autoPlay | boolean | false | Cycle through the steps on a timer instead of following the scroll. Useful for previews. |
| interval | number | 4200 | Milliseconds per step when autoPlay is on. |
| onActiveChange | (index: number) => void | Called when the active step changes. | |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |