Warped Circle Transition

A wavy perimeter circle reveal inspired by the Codrops circle warping step.

Installation

npx smoothui-cli add warped-circle-transition

Features

• 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 onRest still fires

Usage guidance

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

Props

Created by

Eduardo Calvo

Powered by

motion.dev