Organic Merge Transition
A soft-min SDF merge transition with two organic expanding shapes.
smoothui.dev/preview
Dashboard
Organic merge
Revenue is ready to review.
Soft merged shapes reveal a new state while keeping the underlying UI readable.
MRR
Activation
Retention
Installation
npx smoothui-cli add organic-merge-transitionFeatures
- Persistent WebGL transition wrapper triggered by a
transitionKey - Replicates the “Organic Merge” stage from the Codrops shader progression
- Uses the shared SmoothUI SDF transition engine with reduced-motion fallback
- Accessible: semantic content stays in the DOM and
onReststill fires
Usage guidance
Use it for meaningful route/state transitions where this shader grammar fits the product moment.