A pinned card that flips in 3D from one step to the next as you scroll, swapping faces while its back is turned. A sheen crosses the card mid-flip, the floor shadow squeezes, and a deck behind shows the steps left.
Drag issues in, set the goal, and the estimate updates live.
npx shadcn@latest add https://hyperblur.dev/r/motion-flip-sequence.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-flip-sequence.tsx.
import { MotionFlipSequence } from "@/components/hyperblur/motion-flip-sequence"
<MotionFlipSequence faces={[{ step: "Draft", title: "Write it", text: "One doc.", metric: "1", metricLabel: "doc", from: "#222", to: "#555" }, { step: "Ship", title: "Send it", text: "One click.", metric: "2m", metricLabel: "to live", from: "#123", to: "#2f7bff" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| faces | { step: string; title: string; text: string; metric: string; metricLabel: string; from: string; to: string }[] | 4 product steps | Card faces in order with their gradient colors. |
| accent | string | "#2f7bff" | Accent color for highlights, rails and glows. |
| 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 | 6 | Seconds for one forward pass of the autoplay loop. |
| length | number | 4 | Scroll distance in stage heights while the section is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the section lives inside a scrolling container. |