A slanted wipe line sweeps across the whole hero and turns a gray spreadsheet version of the page into a polished live dashboard, headline included. A glowing handle on the line counts the progress.
Connect Postgres, Stripe or a plain CSV and get dashboards that refresh every minute, with alerts when something moves.
Connect your data
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-wipe.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-wipe.tsx.
import { HeroScrollWipe } from "@/components/hyperblur/hero-scroll-wipe"
<HeroScrollWipe before="a slide deck." after="a living report." accent="#a78bfa" />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Quanta" | Logo text in the nav of both versions. |
| title | string | "Your numbers deserve better than" | Shared start of the headline. |
| before | string | "a spreadsheet." | Ending in the old version, struck through. |
| after | string | "a live dashboard." | Ending in the new version, painted with a gradient. |
| subtitle | string | "Connect Postgres, Stripe or a plain CSV..." | Paragraph under the headline. Hidden when empty. |
| kpis | { label: string; value: string; delta: string }[] | MRR, Active accounts, Net churn | Metric cards in the dashboard frame. Three fit best. |
| cta | { label: string; href: string } | null | { label: "Connect your data", href: "#" } | Button under the subtitle. null hides it. |
| handleLabel | string | "migrated" | Word after the percentage on the wipe handle. |
| accent | string | "#34d399" | Accent color used for highlights, buttons and progress details. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 5 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the hero is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the hero lives inside a scrolling container. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |