A macOS-inspired animated menu bar built with React, Motion, and SVG filters. Each menu item reveals a smooth, gooey curved dropdown with subtle micro-interactions and infinite marquee text.
ReactTypeScriptMotion (motion/react)SVG FiltersTailwind CSSVite
- Shared layout animations using Motion
layoutId - Gooey curved dropdown inspired by macOS system menus
- SVG-based organic shapes (no canvas, no images)
- Infinite marquee text with masked fade edges
- Hover-aware animations for better performance
- Clean, composable component structure
I wanted to recreate the feel of macOS system menus — smooth, subtle, and intentional. Started with basic hover interactions, then introduced shared layout animations to keep transitions fluid. The curved dropdown is created using SVG filters instead of manually drawn paths, allowing the shape to feel organic and responsive. To polish the experience, I added marquee text with masked edges for that familiar system-style overflow behavior. The focus throughout was on motion clarity and UI restraint, not flashy effects.
- Clone the repository
- Install dependencies:
npm install - Run the dev server:
npm run dev - Open
http://localhost:5173in your browser