magnetic-dock

1"use client"
2 
3import * as React from "react"
4import { motion, useMotionValue, useSpring, useTransform, AnimatePresence, type MotionValue } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface MagneticDockProps {
8    /** Array of dock items */
9    items: DockItemData[]
10    /** Size of icons in pixels */
11    iconSize?: number
12    /** Maximum scale on hover */
13    maxScale?: number
14    /** Distance of magnetic effect in pixels */
15    magneticDistance?: number
16    /** Show labels on hover */
17    showLabels?: boolean
18    /** Dock position */
19    position?: "bottom" | "top" | "left" | "right"
20    /** Background style */
21    variant?: "glass" | "solid" | "transparent"
22    /** Custom class name */
23    className?: string
24}
25 
26interface DockItemData {
27    /** Unique identifier */
28    id: string
29    /** Display label */
30    label: string
31    /** Icon component or image URL */
32    icon: React.ReactNode
33    /** Click handler */
34    onClick?: () => void
35    /** Whether item is active */
36    isActive?: boolean
37    /** Badge count */
38    badge?: number
39}
40 
41interface DockItemProps {
42    item: DockItemData
43    mouseX: MotionValue<number>
44    iconSize: number
45    maxScale: number
46    magneticDistance: number
47    showLabels: boolean
48    isVertical: boolean
49}
50 
51function DockItem({
52    item,
53    mouseX,
54    iconSize,
55    maxScale,
56    magneticDistance,
57    showLabels,
58    isVertical,
59}: DockItemProps) {
60    const ref = React.useRef<HTMLButtonElement>(null)
61    const [isHovered, setIsHovered] = React.useState(false)
62 
63    // Calculate distance from mouse to center of item
64    const distance = useTransform(mouseX, (val: number) => {
65        if (!ref.current) return magneticDistance + 1
66        const rect = ref.current.getBoundingClientRect()
67        const center = isVertical
68            ? rect.top + rect.height / 2
69            : rect.left + rect.width / 2
70        return val - center
71    })
72 
73    // Scale based on distance - closer = larger
74    const scale = useTransform(distance, [-magneticDistance, 0, magneticDistance], [1, maxScale, 1])
75 
76    // Apply spring physics for smooth animation
77    const springConfig = { damping: 20, stiffness: 300, mass: 0.5 }
78    const smoothScale = useSpring(scale, springConfig)
79 
80    // Calculate the size based on scale
81    const size = useTransform(smoothScale, (s) => s * iconSize)
82 
83    // Floating effect
84    const y = useTransform(smoothScale, (s) => (s - 1) * -10)
85    const smoothY = useSpring(y, springConfig)
86 
87    return (
88// … truncated