Flip Marquee Horizontal
A tilted marquee that hands one of its own frames over to the next section. As the marquee passes, one image is cloned in place, and when the horizontal section pins, GSAP Flip grows that clone from its slot in the rotated strip to a full-bleed plate, straightening it on the way. The page darkens across the first five percent of the pin, then the track and the plate travel at different rates so the plate slides out from behind the slides.
Fragments of thought arranged in sequence become patterns. They unfold step by step, shaping meaning as they move forward.
A landscape in constant transition, where every shape, sound, and shadow refuses to stay still. What seems stable begins to dissolve, and what fades returns again in a new form.
The rhythm of motion carries us forward into spaces that feel familiar yet remain undefined. Each shift is subtle, yet together they remind us that nothing we see is ever permanent.
Shadows fold into light. Shapes shift across the frame, reminding us that stillness is only temporary.
npx shadcn@latest add https://ui.aryank.space/r/flip-marquee-horizontal.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 |
|---|---|---|---|
| marqueeImages / pinnedIndex | string[] / number | 13 images, index 6 | The tilted strip's frames, and which one is cloned and flipped into the next section. |
| slides | FlipMarqueeSlide[] | Two BLANK panels | Copy and image for each horizontal panel. |
| light / dark | string | #edf1e8 / #101010 | Page colors interpolated across the start of the pin. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
slidestextThe horizontal panel copy and images.
light / darkcolorPage color before and after the pin darkens it.
gsaplenis