ns-ui / loud
Scroll-scrubbed defroster — a pinned full-bleed image behind rippled shower glass anneals from heavy frost with chromatic fringing to optical clarity, sealed by a specular sweep.
Use when a pinned scroll-scrubbed WebGL shader that anneals a full-bleed image from frosted shower glass to clarity as you scroll; use to reveal a real photo/image, not an abstract or generative scene; pick reveal-ripple-tiles instead when the reveal should be driven by the cursor and a water sim rather than by scroll position, reveal-cloth-unfurl when it should unroll like fabric, or scroll-story-strata when the scroll carries distinct content sections rather than one image.
Install
npx shadcn add https://design.helpmarq.comns-ui / scroll-defrost
A pinned still behind rippled shower glass. Scrub down to anneal the pane — refraction, chromatic fringing and frost scatter melt to optical clarity, fully reversible.
SCROLLAnnealed. Scroll back up to refrost the pane.
| Prop | Type | Default | Description |
|---|---|---|---|
| src? | string | — | image url; omit for a generated monochrome studio still |
| alt? | string | "Image annealing from frosted glass to optical clarity" | — |
| caption? | string | "SCROLL TO ANNEAL" | mono caption on the side rail |
| maxOffset? | number | 42 | px of refraction offset at full frost |
| frostRadius? | number | 10 | px radius of the 5-tap frost scatter at full frost |
| dispersion? | number | 0.012 | chromatic dispersion step between R/G/B offset scales |
| className? | string | — | — |
| onProgress? | (p: number) => void | — | rendered (lerped) progress 0–1, called from the rAF loop |