Flip Layout Gallery
One set of images that rearranges between three completely different layouts without ever being re-created. Positions are declared purely in CSS per layout class; switching records the current rects with GSAP Flip, swaps the class, and lets Flip interpolate every tile from where it was to where the new stylesheet puts it. The stagger is dropped to zero when moving into the column layout, because a staggered arrival into a vertical list reads as a queue rather than a formation. The column layout also mounts a scroll relationship: an invisible tall strip provides the scroll length, and its progress drives the gallery and a minimap at different multipliers, so the two travel at different rates over the same gesture.
npx shadcn@latest add @compronents/flip-layout-galleryInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 14 BLANK tiles | Layout 1 positions tiles 1 to 14 individually in CSS, so a different count needs those rules extended. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
brandtextWordmark at the left of the nav.
menuLabeltextLabel at the right of the nav.
gsap