Warped Circle Transition
A wavy perimeter circle reveal inspired by the Codrops circle warping step.
smoothui.dev/preview
Dashboard
Warped circle
Revenue is ready to review.
A warped radial edge that gives the transition a handcrafted feel.
MRR
Activation
Retention
Installation
npx smoothui-cli add warped-circle-transitionFeatures
- Persistent WebGL transition wrapper triggered by a
transitionKey - Replicates the “Warped Circle” 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
onReststill fires
Usage guidance
Use it for meaningful route/state transitions where this shader grammar fits the product moment.