Image Reveal
A scroll-powered stack of images that dissolve into each other: a clip-path wipes each frame away to expose the next, and a band of randomized ASCII characters scatters across the seam as it travels. Pinned GSAP ScrollTrigger with Lenis; owns its scroll container so it embeds anywhere.
npx shadcn@latest add https://ui.aryank.space/r/image-reveal.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[] | img-1…5 (Compronents assets) | Stacked images, revealed top to bottom as you scroll. |
| introText | string | "Scroll down to decode the craft" | Copy shown in the intro panel. |
| outroText | string | "The rest is under NDA" | Copy shown in the outro panel. |
| dissolveColor | string | "#ff6426" | Color of the dissolve characters. |
| dissolveCellSize | number | 16 | Size of each dissolve cell, in px. |
| embedded | boolean | true | Own an internal scroll container (true) or use the window scroll (false). |
dissolveColorcolorColor of the scattering dissolve characters.
dissolveCellSizetextCell size in px; smaller is fine static, larger teletext.
introText / outroTexttextCopy in the intro and outro panels.
imagesasset-urlStacked frames, hosted through https://ui.aryank.space/assets/image-reveal/img-1.jpg and the numbered set.
gsaplenis