# Morph Menu

> A menu popover that morphs out of its trigger

This is basically 2 layers: one for the blob shapes (trigger + card bg) and one for the real content (text + avatars). The blob layer goes through the goo filter, so when the card starts tiny (`scale: 0`) near the trigger (`y = cardHeight / 1.5 + gap`) and moves up to `y: 0`, both shapes melt together for a moment and then split cleanly. Card position is `bottom: triggerHeight + gap`, so spacing stays stable even if button size changes. Normal mode uses spring motion (close is a bit snappier), and content fades in a little late + fades out fast so it stays readable; slow mode just switches to longer tweens.

## Source

- [components/crafts/morph-menu/index.tsx](https://github.com/aviralj02/portfolio-v2/blob/main/components/crafts/morph-menu/index.tsx)
- [components/crafts/morph-menu/popover.tsx](https://github.com/aviralj02/portfolio-v2/blob/main/components/crafts/morph-menu/popover.tsx)

---

HTML version: https://heyaviral.com/craft/morph-menu · Site overview for agents: https://heyaviral.com/llms.txt