Chroma Blur Transition

Frame-level shader transition that swaps content under a liquid chromatic sweep.

Installation

npx smoothui-cli add chroma-blur-transition

Features

• 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-motion and 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.

Props

Created by

Eduardo Calvo

Powered by

motion.dev