Radial Circles Transition

A radial SDF circle pattern transition inspired by the Codrops radial circles step.

Open in v0

Last updated: July 6, 2026

smoothui.dev/preview
Dashboard

Radial circles

Revenue is ready to review.

Concentric motion for controlled, graphic state changes.

MRR
Activation
Retention

Installation

npx smoothui-cli add radial-circles-transition

Features

  • Persistent WebGL transition wrapper triggered by a transitionKey
  • Replicates the “Radial Circles” stage from the Codrops shader progression
  • Uses the shared SmoothUI SDF transition engine with reduced-motion fallback
  • Accessible: semantic content stays in the DOM and onRest still fires

Usage guidance

Use it for meaningful route/state transitions where this shader grammar fits the product moment.

Props

On this page

Created by

Powered by

motion.dev