Morph Shape
No library Beginner
Border-radius morphs through a personality arc on focus: sharp (2px) → rounded (8px) → pill (50px) then settles at rounded. Shape language communicates "opening up".
Border-radius morphs through a personality arc on focus: sharp (2px) → rounded (8px) → pill (50px) then settles at rounded. Shape language communicates "opening up".
Goal: Create a "Morph Shape" input that animates its border-radius through a personality arc on focus.
Visual behavior: At rest, the input has a very sharp border-radius (2px) — almost boxy. On focus, the border-radius quickly morphs through three stages via CSS @keyframes: sharp (2px) → pill (50px) → settled rounded (10px) over 500ms. The border brightens on focus. On blur, the border-radius simply transitions back to 2px.
Technique:
- CSS @keyframes: 0%{border-radius:2px} 30%{border-radius:50px} 100%{border-radius:10px}
- Use a React key counter on the input to remount and restart the animation on each focus
- After animation completes (fills forwards), border-radius stays at 10px while focused
- On blur: transition border-radius back to 2px with a CSS transition (~300ms)
- animationPlayState or animation:none under prefers-reduced-motion
Accessibility: Border color change provides focus indicator. Animation can be disabled entirely under prefers-reduced-motion.
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.