"use client"; import React, { useRef, useState, useContext } from "react"; import { motion, MotionValue, useMotionValue, useSpring, useTransform, AnimatePresence, } from "framer-motion"; import { cn } from "@/lib/utils"; export interface DockProps { children: React.ReactNode; className?: string; magnification?: number; distance?: number; variant?: "normal" | "glass"; } export interface DockIconProps { children: React.ReactNode; label: string; onClick?: () => void; className?: string; } const DockContext = React.createContext<{ mouseX: MotionValue; magnification: number; distance: number; variant: "normal" | "glass"; } | null>(null); const SPRING_TACTILE = { type: "spring", stiffness: 400, damping: 25, mass: 0.1, } as const; export function Dock({ children, className, magnification = 80, distance = 140, variant = "normal", }: DockProps) { const mouseX = useMotionValue(Infinity); const ref = useRef(null); const handleMouseMove = (e: React.MouseEvent) => { mouseX.set(e.clientX); }; const handleMouseLeave = () => { mouseX.set(Infinity); }; return ( ); } export function DockIcon({ children, label, onClick, className, }: DockIconProps) { const ref = useRef(null); const context = useContext(DockContext); const [isBouncing, setIsBouncing] = useState(false); const [isHovered, setIsHovered] = useState(false); if (!context) { throw new Error("DockIcon must be used within a Dock component"); } const { mouseX, magnification, distance, variant } = context; // Calculate distance from mouse pointer to center of icon const distanceTransform = useTransform(mouseX, (val) => { const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }; const centerX = bounds.x + bounds.width / 2; return val - centerX; }); // Calculate dynamic width based on proximity const widthTransform = useTransform(distanceTransform, (d) => { if (mouseX.get() === Infinity) return 40; // Base width const power = Math.max(0, 1 - Math.abs(d) / distance); return 40 + (magnification - 40) * power; }); // Smooth width adjustments const width = useSpring(widthTransform, SPRING_TACTILE); const handleIconClick = () => { if (isBouncing) return; setIsBouncing(true); onClick?.(); setTimeout(() => { setIsBouncing(false); }, 600); }; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={handleIconClick} className="relative flex items-center justify-center cursor-pointer" role="button" tabIndex={0} aria-label={label} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleIconClick(); } }} > {isHovered && ( )}

{children}

); }

Dock Menu

Usage

Glassmorphism Variant