Twelve app tiles start scattered around the headline, then snap into a grid, bend into an arc and collapse into a single stack as you scroll. The last line of the headline swaps with each layout.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-morph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-morph.tsx.
import { HeroScrollMorph } from "@/components/hyperblur/hero-scroll-morph"
<HeroScrollMorph title="All your apps," phases={["everywhere.", "in a grid.", "in a flow.", "in one place."]} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Tandem 3.0 is here" | Announcement pill above the headline. |
| title | string | "Every tool your team uses," | Fixed first line of the headline. |
| phases | [string, string, string, string] | ["scattered across tabs.", "lined up in one grid.", ...] | Second line for each layout: scattered, grid, arc and stack. |
| tiles | { label: string; meta: string; hue: number }[] | 12 tiles | Cards that move between layouts. Hue tints the artwork. Best with 8 to 14 tiles. |
| cta | { label: string; href: string } | null | { label: "Start with Tandem", href: "#" } | White pill button at the bottom right. null hides it. |
| accent | string | "#8b5cf6" | 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 | 7 | Seconds for one forward pass of the autoplay loop. |
| length | number | 4 | 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. |