Chroma Blur Transition
Frame-level shader transition that swaps content under a liquid chromatic sweep.
smoothui.dev/preview
Dashboard
Chroma blur
Revenue is ready to review.
A restrained chromatic blur that adds color while preserving a quiet UI frame.
MRR
Activation
Retention
Installation
npx smoothui-cli add chroma-blur-transitionFeatures
- Persistent WebGL transition wrapper triggered by a
transitionKey - Swaps content at the shader midpoint so the next state appears under the sweep
- Designed for route/state moments, not hover decoration
- Accessible: honors
prefers-reduced-motionand keeps semantic content in the DOM
Usage guidance
Use it sparingly for meaningful state changes: publish flows, checkout completion, onboarding steps, presentation mode changes, or section-level navigation.
Accessibility
When reduced motion is preferred, content swaps immediately and onRest still fires.