"use client"; import React, { useRef, useState } from "react"; import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue, } from "motion/react"; export interface FisheyeDockItem { icon: React.ReactNode; label: string; href?: string; onClick?: () => void; /** Show the active indicator dot under the icon. */ active?: boolean; } export interface FisheyeDockProps { items: FisheyeDockItem[]; /** Resting icon size in px. */ size?: number; /** Icon size directly under the cursor in px. */ magnification?: number; /** Cursor influence radius in px. */ distance?: number; className?: string; style?: React.CSSProperties; } /** * A macOS-style dock — icons swell under the cursor with a fisheye falloff, * neighbours rising in sympathy, labels popping above on hover. */ export function FisheyeDock({ items, size = 44, magnification = 76, distance = 140, className, style, }: FisheyeDockProps) { const mouseX = useMotionValue(Infinity); const reduced = useReducedMotion(); const [activeIndex, setActiveIndex] = useState(() => Math.max(0, items.findIndex((item) => item.active)) ); return (

{ if (!reduced) mouseX.set(e.clientX); }} onMouseLeave={() => mouseX.set(Infinity)} className={[ "flex items-end gap-2 rounded-2xl border border-[var(--rule)] bg-[rgba(var(--background-rgb),0.7)] px-2.5 pb-2.5 backdrop-blur-md", className, ] .filter(Boolean) .join(" ")} style={{ height: size + 20, ...style }} > {items.map((item, i) => ( setActiveIndex(i)} mouseX={mouseX} size={size} magnification={magnification} distance={distance} /> ))}

); } function DockIcon({ item, active, onSelect, mouseX, size, magnification, distance, }: { item: FisheyeDockItem; active: boolean; onSelect: () => void; mouseX: MotionValue; size: number; magnification: number; distance: number; }) { const ref = useRef(null); const [hovered, setHovered] = useState(false); const dist = useTransform(mouseX, (val: number) => { const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }; return val - bounds.x - bounds.width / 2; }); const target = useTransform( dist, [-distance, 0, distance], [size, magnification, size] ); const side = useSpring(target, { mass: 0.1, stiffness: 170, damping: 13 }); const Comp: React.ElementType = item.href ? "a" : "button"; return ( setHovered(true)} onMouseLeave={() => setHovered(false)} className="relative flex items-center justify-center" > {hovered && ( {item.label} )} { onSelect(); item.onClick?.(); }} aria-label={item.label} aria-current={active ? "page" : undefined} className="flex h-full w-full cursor-pointer items-center justify-center rounded-xl border border-[rgba(var(--ink-rgb),0.1)] bg-[rgba(var(--ink-rgb),0.06)] text-[var(--ink)] transition-colors hover:bg-[rgba(var(--ink-rgb),0.1)] [&_svg]:h-[44%] [&_svg]:w-[44%]" > {item.icon} {active && ( ); } export default FisheyeDock;