ns-ui / terrain-erosion-carve
DRAG TO CARVE
sediment heals in ~6s
ns-ui / loud
The cursor is a river — dragging across a live topographic map carves a channel into the heightfield, marching-squares isolines reflowing into canyon walls with a faint waterline; release and sediment heals the terrain back over ~6 seconds. At rest the sheet stays alive: contours drift in a slow traveling ripple and sediment specks trickle downhill continuously.
Use when an ambient full-bleed sheet the cursor persistently changes, dragging carving channels into a live heightfield that sediment heals back over about six seconds, so the surface remembers where you have been; pick reveal-ripple-tiles instead when the point is revealing media beneath a grid rather than deforming a generative field, or hero-vortex-street when the trace should drift and decay rather than carve.
Install
npx shadcn add https://design.helpmarq.comns-ui / terrain-erosion-carve
DRAG TO CARVE
sediment heals in ~6s
| Prop | Type | Default | Description |
|---|---|---|---|
| gridSize? | number | 96 | heightfield resolution per axis (nodes) |
| contourStep? | number | 0.08 | elevation gap between isolines; every 5th index line renders brighter |
| brushSigma? | number | 28 | gaussian carve-brush radius (sigma) in screen px |
| carveRate? | number | 0.9 | carve rate in elevation units per second at full depth |
| healTau? | number | 2.2 | healing time constant in seconds (95% healed ≈ 3·tau) |
| showReadout? | boolean | true | font-mono corner readout of cursor grid coords |
| className? | string | "h-96" | — |
| aria-label? | string | "Topographic map — drag to carve a river channel" | — |