ns-ui / loud
Media reveal that unrolls an image like a bolt of cloth: ~24 vertical strips fan open left-to-right off a rotateY hinge, curled strips converge into a shaded cylinder at the roll's leading edge, and one staggered settle ripple (plus a sheen sweep) crosses the surface once fully unrolled.
Use when a hero or feature image that should feel like unwrapping physical cloth or a scroll — a continuous, directional, left-to-right unrolling motion. Reach for reveal-ripple-tiles instead when the reveal should read as a water-sim ripple popping a grid of tiles open from a trigger point outward, which has no roll, no cylinder, and no single direction — the two are both scroll/trigger-driven image reveals but nothing about their motion overlaps.
Install
npx shadcn add https://design.helpmarq.comns-ui / reveal-cloth-unfurl
Unrolls open like a bolt of cloth when it scrolls into view; the Replay button rolls it back up and unfurls it again.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | — |
| alt | string | — | — |
| trigger | number | — | Bump to (re)play the unroll animation from rolled to unrolled. |
| strips? | number | — | Number of vertical strips. Default 24. |
| aspectRatio? | string | — | CSS aspect-ratio of the media box. Default "16/9". |
| className? | string | — | — |