Toggletoggle-curtain

Curtain

Top→bottom clip-path wipe reveals the panel.

Revealed

tap / hover to play

const [open, setOpen] = useState(false);

<motion.div
  initial={false}
  animate={{ clipPath: open ? "inset(0 0 0% 0)" : "inset(0 0 100% 0)" }}
  transition={{ ease: [0.4, 0, 0.2, 1], duration: 0.4 }}
/>

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-curtain 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

Morph

Shape morphs — pill ⇄ circle, width + radius

20+ named motion moves

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

Browse the gallery Star