Continuous morphing between border-radius values with rotation.
A shape that endlessly morphs between different border-radius values while rotating. The effect is entirely CSS-driven. Motion's animate prop accepts arrays of values for each property, interpolating between them over the duration.
A div cycles through border-radius values using keyframe arrays. repeat: Infinity creates a looping animation. The arrays don't need to be the same length; motion pads shorter arrays to match the longest one.
Loading...
Add scale and rotate alongside border-radius. All three animate together over the same duration. The shape pulses slightly at each morph peak and completes a full 360-degree spin.
Loading...
Same keyframes, three different easing curves side by side. easeInOut starts slow, speeds up, then slows down. linear moves at constant speed. A custom curve like [0.16, 1, 0.3, 1] (standard motion easing) starts fast with an elastic overshoot. The easing completely changes the feel of the same animation.
Loading...
A 4x4 grid of identical shapes, each animating with the same keyframes but offset by a diagonal stagger. The delay calculation (Math.floor(i / 4) + (i % 4)) * 0.15 sums the row and column indices, creating a wave that ripples from the top-left to the bottom-right corner.
Loading...
Tune the shape preset, speed, color scheme, and rotation toggle.
Loading...