Aperture Blur Transition

Frame-level shader transition that swaps content under a focused champagne aperture sweep.

Last updated: July 6, 2026

smoothui.dev/preview

Dashboard

Aperture blur

Revenue is ready to review.

A focused aperture reveal for switching between dashboard and landing contexts.

MRR

Activation

Retention

Installation

npx smoothui-cli add aperture-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

AI Input

Animated React AI text input component with command parsing, inline hints, keyboard shortcuts, and submit actions built-in.

Chroma Blur Transition

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