ns-ui / loud

Transition Panel Crumble

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.json
  • transition
  • canvas
  • particles
  • physics
  • dashboard
  • layout
  • verlet
  • gravity

ns-ui / transition-panel-crumble — the old panel crumbles into the new one

Overview

Updated just now
Sessions12,482
Revenue$8.2k
Users3,014

view details, then back — matter pours between the two, it never just cuts

Props

PropTypeDefaultDescription
className?string
grainBudget?number2400total grains spawned per transition, distributed across regions by area