SDF Circle Transition
A clean SDF circle reveal based on the first Codrops shader step.
smoothui.dev/preview
Dashboard
SDF circle
Revenue is ready to review.
A clean circular reveal for simple before-and-after state changes.
MRR
Activation
Retention
Installation
npx smoothui-cli add sdf-circle-transitionFeatures
- Persistent WebGL transition wrapper triggered by a
transitionKey - Replicates the “SDF 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.