ns-ui / loud
A layout transition swept by a user-driven, reversible dissolve front: outgoing content frays into a band of ASCII glyph noise ahead of the front, incoming content resolves out of that same noise behind it, and dragging the front back un-happens the transition exactly as far as you pull it.
Use when a panel-to-panel transition whose seam is a real, bidirectional value the user parks anywhere — drag it back and the swap un-happens — with the boundary itself dissolving through a band of ASCII noise rather than a hard line; pick transition-panel-crumble instead for a full-screen physics pour that plays once and cannot be reversed mid-flight, or compare-crack-seam for a before/after slider whose divider is a vector crack rather than a glyph-density veil.
Install
npx shadcn add https://design.helpmarq.comns-ui / transition-ascii-dissolve
Overview
1,204
active sessions
| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | — | outgoing content, visible where the front hasn't swept yet |
| to | ReactNode | — | incoming content, visible where the front has already swept |
| value? | number | — | controlled front position, 0 (all `from`) .. 1 (all `to`) |
| defaultValue? | number | — | initial front position when uncontrolled. Default 0.35 |
| onValueChange? | (value: number) => void | — | — |
| label? | string | — | — |
| className? | string | — | — |