Luma Ribbons Transition
Luminance-style ribbon displacement translated into a shader overlay.
smoothui.dev/preview
Dashboard
Luma ribbons
Revenue is ready to review.
Horizontal light bands reveal the next state without overwhelming the content.
MRR
Activation
Retention
Installation
npx smoothui-cli add shader-reveal-luma-transitionFeatures
- 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-motionand firesonRest
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.