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 https://ui.aryank.space/r/scroll-flip-cards.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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