Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
Crafted with intent
Built to be felt
Detail over noise
Motion with meaning
import { FlipCardsScroll } from "@/registry/tween/flip-cards-scroll"
export function FlipCardsScrollDemo() {
return (
<div className="w-full">
<FlipCardsScroll />
</div>
)
}
import { FlipCardsScroll } from "@/components/ui/flip-cards-scroll"<FlipCardsScroll
hero={
<>
Every detail <br /> turned face up
</>
}
footer="Scroll back to deal again"
cards={[
{ frontSrc: "/cards/front.png", backText: "The Architect" },
{ frontSrc: "/cards/front.png", backText: "The Navigator" },
{ frontSrc: "/cards/front.png", backText: "The Builder" },
{ frontSrc: "/cards/front.png", backText: "The Visionary" },
]}
/>The cards begin as a tight stack and, as you scroll, spread to their positions while rotating into a fanned hand. Scroll further and each card flips to reveal its backText. The hero heading sits above the deck and the footer closes the sequence — pass your own cards, hero, and footer to make it yours.
| Prop | Type | Default | Description |
|---|---|---|---|
cards | FlipCardItem[] | 4 defaults | Each card is { frontSrc, frontAlt, backText }. |
hero | ReactNode | Default copy | Heading shown in the section above the cards. |
footer | ReactNode | Default copy | Heading shown in the footer section. |
cardWidth | number | 240 | Card width in pixels. |
cardHeight | number | 360 | Card height in pixels. |
positions | number[] | [14, 38, 62, 86] | Per-card left position (%) after the spread phase. |
rotations | number[] | [-15, -7.5, 7.5, 15] | Per-card rotation (deg) at the end of the spread phase. |
sectionHeight | number | string | "100vh" | Height of each section (hero / cards / footer). |
backgroundColor | string | "#0000ff" | Background color of the whole component. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the ambient preview scroller. |
className | string | — | Extra classes on the outer container. |
The animation is driven by a pinned ScrollTrigger across three full-height sections (hero, cards, footer). The spread offsets and rotations are configurable via the positions and rotations arrays, so you can choreograph the fan to match your deck size.