"use client"; import { useRef, useState } from "react"; import { motion, useMotionValue, useSpring, useTransform, type MotionValue, } from "framer-motion"; import { cn } from "@/lib/utils"; const ITEMS = [ { label: "Home", icon: "🏠" }, { label: "Search", icon: "🔍" }, { label: "Chat", icon: "💬" }, { label: "Music", icon: "🎵" }, { label: "Photos", icon: "🖼️" }, { label: "Settings", icon: "⚙️" }, ]; function DockIcon({ mouseX, icon, label, }: { mouseX: MotionValue; icon: string; label: string; }) { const ref = useRef(null); const [hovered, setHovered] = useState(false); const distance = useTransform(mouseX, (val) => { const rect = ref.current?.getBoundingClientRect(); if (!rect) return 0; return val - (rect.left + rect.width / 2 - (ref.current?.offsetParent as HTMLElement | null ? 0 : 0)); }); const widthSync = useTransform(distance, [-150, 0, 150], [44, 76, 44]); const width = useSpring(widthSync, { mass: 0.1, stiffness: 180, damping: 14, }); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} className="relative flex aspect-square items-center justify-center rounded-xl border border-line bg-panel text-xl" > {icon} {label} ); } export function DockMenu({ className }: { className?: string }) { const mouseX = useMotionValue(Infinity); return (

mouseX.set(e.clientX)} onMouseLeave={() => mouseX.set(Infinity)} className={cn( "mx-auto flex h-16 items-end gap-3 rounded-2xl border border-line bg-panel/70 px-4 pb-2 backdrop-blur-md", className )} > {ITEMS.map((item) => ( ))}

); } export default function Demo() { return (

); }

Dock Menu