ns-ui / reveal-ripple-tiles
unfolds on scroll-into-view — replay to watch the ripple again, then move the cursor across the image to stir the water
ns-ui
Media reveal driven by a height-field water sim: a ripple front sweeps from the trigger point, popping grid tiles open as the wave crosses them and refracting revealed tiles like wet glass; the cursor keeps stirring the water after full reveal.
Use when media that should be revealed by a wave crossing it, tiles popping open as the ripple front passes and refracting like wet glass, with the cursor still stirring the water after full reveal; pick reveal-cloth-unfurl instead when the reveal should read as fabric unrolling, or compare-crack-seam when two images are being compared rather than one revealed.
Install
npx shadcn add https://design.helpmarq.comns-ui / reveal-ripple-tiles
unfolds on scroll-into-view — replay to watch the ripple again, then move the cursor across the image to stir the water
| Prop | Type | Default | Description |
|---|---|---|---|
| src? | string | — | image URL; omitted → a token-derived generative artwork is drawn |
| tileSize? | number | 32 | target tile edge in px; cols/rows derive from container size |
| threshold? | number | 0.12 | |h| a tile must see before it pops open |
| refraction? | number | 6 | max source-rect refraction offset in px per unit wave gradient |
| impulse? | number | 0.35 | wave height injected per cursor move after full reveal |
| className? | string | "aspect-[16/10]" | — |
| aria-label? | string | "Media revealed by a ripple wave" | — |