Luma Ribbons Transition

Luminance-style ribbon displacement translated into a shader overlay.

Installation

npx smoothui-cli add shader-reveal-luma-transition

Features

• Persistent WebGL transition wrapper triggered by a transitionKey
• Adapts a shader image-transition technique into a SmoothUI frame transition
• Preserves semantic React content and swaps at the shader midpoint
• Accessible: honors prefers-reduced-motion and fires onRest

Usage guidance

Use it for meaningful product state changes where a shader-led transition should feel intentional, not decorative. The component translates image-transition shader techniques into a frame-level overlay that can wrap arbitrary React content.

Props

Created by

Eduardo Calvo

Powered by

motion.dev