ns-ui / loud
A layout transition where the outgoing panel crumbles into a few thousand token-colored grains that fall under gravity, funnel toward the incoming panel's matching regions, and settle there while the crisp new DOM (already fully mounted and focused) shows through — conservation of matter made visible, an hourglass turn between a dashboard overview and its detail pivot.
Use when a high-moment layout swap (dashboard-to-detail pivot, onboarding step change, publish handoff) where the old screen's regions visibly become the new screen's regions via a physical pour, rather than a generic particle wipe; pick scroll-particle-tunnel instead for a scroll-scrubbed camera flythrough with no source/destination geometry, since that one has no notion of an outgoing or incoming DOM at all.
Install
npx shadcn add https://design.helpmarq.com /r/transition-panel-crumble.jsonns-ui / transition-panel-crumble — the old panel crumbles into the new one
view details, then back — matter pours between the two, it never just cuts
| Prop | Type | Default | Description |
|---|---|---|---|
| className? | string | — | — |
| grainBudget? | number | 2400 | total grains spawned per transition, distributed across regions by area |