WebGL Dissolve Scroll
A hero image progressively dissolved from the bottom up by a real-time WebGL noise field as you scroll: an fbm-driven edge eats across the frame in a colored wash while a stacked headline below fades in one word at a time.
Morphogenesis
Solid form gives way to liquid movement.
An underlying field of motion pushes and pulls the image across its surface, redistributing pixels in a way that feels organic and constantly in flux.
This animation is driven by a real-time WebGL displacement process where interaction introduces force into the surface, causing form to bend, stretch, and reorganize dynamically. Rather than relying on fixed keyframes, the visual state evolves continuously, allowing motion to feel organic, responsive, and materially present as the page progresses.
npx shadcn@latest add https://ui.aryank.space/r/webgl-dissolve-scroll.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 |
|---|---|---|---|
| heroImage | string | BLANK-hosted JPG | Image dissolved by the WebGL field. |
| dissolveColor / spread / speed | string / number / number | "#ebf5df" / 0.5 / 2 | Wash color, edge noise amount, and scroll-to-dissolve rate. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
dissolveColor / spread / speedtupleWash color, noise displacement, and scroll multiplier.
eyebrow / headerText / bodyText / aboutTexttextareaThe layered hero and about copy.
gsaplenisthree