Morph
No library Intermediate
A single element that continuously morphs through three shapes — circle, blob, and square — while rotating and shifting color. Pure CSS, no dependencies.
A single element that continuously morphs through three shapes — circle, blob, and square — while rotating and shifting color. Pure CSS, no dependencies.
Goal: Create a "Morph" loader animation.
Visual behavior: A single 34×34px element that smoothly cycles through three forms — a circle (indigo), an organic blob (purple, asymmetric border-radius), and a rounded square (pink, 8px radius) — while also slowly rotating 120° between each stage. The color shifts with the shape. Total cycle ~2.4s.
Technique: One div with a single keyframe that simultaneously animates border-radius, background, and transform (rotate). The keyframe hits three distinct shape states at 0/33%/66%/100%. ease-in-out on the full animation makes each transition feel elastic.
Accessibility: aria-label on the wrapper. Animation stopped under prefers-reduced-motion; shown as a static circle.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.