Scroll Wave Gallery
A vertical column of photographs that sway as they scroll. Each frame rides a sum of three sine waves, a slow base swing, a faster flow, and a fine detail jitter, drifting left and right while its clip-path pinches inward at the center of the viewport. The last quarter of the set shrinks for a sense of recession. Per-image GSAP ScrollTriggers with Lenis; owns its scroll container so it embeds anywhere.
npx shadcn@latest add https://ui.aryank.space/r/scroll-wave-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[] | 12 Compronents-hosted JPGs | Frames stacked top to bottom through the scroll. |
| introText / outroText | string | "Loose Structure" / "Crafted by BLANK" | Headings shown in the intro and outro panels. |
| background / textColor | string | "#e3e4d8" / "#000000" | Page background and heading ink. |
| waveStrength | number | 1 | Scales the horizontal sway; 0 holds the column straight. |
| clipMax | number | 20 | Maximum edge pinch at the center crossing, in percent. |
| embedded | boolean | true | Own an internal scroll container (true) or use the window scroll (false). |
background / textColorcolorPage surface and the intro / outro heading ink.
introText / outroTexttextThe two headings that bookend the gallery.
waveStrength / clipMaxtextSway amplitude and the maximum center pinch in percent.
imagesasset-urlTwelve frames hosted through https://ui.aryank.space/assets/scroll-wave-gallery/img-1.jpg and the numbered set.
gsaplenis