Scroll Flip Cards
A process section choreographed entirely by scroll. Three hero cards fan apart and drop away, then a pinned services panel draws the heading up from below while the same cards fly in from underneath, scale up, gather to center, and flip a half turn to reveal their service lists. Below 1000px it falls back to a static stacked layout. GSAP ScrollTrigger with Lenis, no images.
npx shadcn@latest add @compronents/scroll-flip-cardsInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| services | [FlipCardService, FlipCardService, FlipCardService] | Plan / Design / Develop | Card name, number, and service list for each of the three. |
| aboutHeading / servicesHeading / outroHeading / logo / menuLabel | string | BLANK copy | Section headings and nav labels. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
servicestextThe three card names, numbers, and their service lists.
aboutHeading / servicesHeading / outroHeadingtextThe three section headings.
logo / menuLabeltextFixed nav wordmark and menu label.
gsaplenis