Planetary Swirl Transition

Rotated displacement vectors with a planetary swirl feel.

Open in v0

Last updated: July 6, 2026

smoothui.dev/preview
Dashboard

Planetary swirl

Revenue is ready to review.

A rotational field for rare moments where the change should feel spatial.

MRR
Activation
Retention

Installation

npx smoothui-cli add shader-reveal-planetary-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

On this page

Created by

Powered by

motion.dev