Installation
Usage
import { MorphingExpandableMenu } from "@/components/ruixen/morphing-expandable-menu";
export default function App() {
return <MorphingExpandableMenu />;
}Features
- Pill to Dock: Click the plus button to expand from a compact pill into a 4-icon dock
- Search Panel: Full search input with recent items list
- Music Player: Album art, progress bar, and playback controls
- Focus Timer: 25-minute Pomodoro timer with start/pause/reset
- Quick Note: Textarea with character count and save button
- Spring Animations: Smooth physics-based transitions between all states
- Keyboard Support: Escape key navigates back through states
- Click Outside: Collapses back to pill when clicking outside
- Light/Dark Mode: Adapts to theme with semantic tokens