Toggletoggle-morph

Morph

Shape morphs — pill ⇄ circle, width + radius.

Expanded

tap / hover to play

const [on, setOn] = useState(false);

<motion.button
  onClick={() => setOn((o) => !o)}
  animate={{ borderRadius: on ? 999 : 16, width: on ? 56 : 160 }}
  transition={{ type: "spring", stiffness: 300, damping: 26 }}
/>

How to use it

Copy-paste

Grab the code above and drop it onto any motion.* element.

Or name it

In Claude Code / Cursor, run /ss-motion toggle-morph and the recipe lands in your code.

Personality

Pairs naturally with the silk seed (smooth, elegant).

Related Toggle moves

Flip

3D Y-axis card flip between two faces

Slide stack

Old value slides out, new slides in from the side

Curtain

Top→bottom clip-path wipe reveals the panel

20+ named motion moves

All copy-paste, all in StyleSeed’s design engine. MIT.

Browse the gallery Star