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 https://ui.aryank.space/r/flip-layout-gallery.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 |
|---|---|---|---|
| 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