dock-text

1"use client"
2 
3import React, { useRef, useState } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface DockTextProps {
9  text: string
10  down?: boolean
11  className?: string
12}
13 
14export default function DockText({
15  text,
16  down = false,
17  className,
18}: DockTextProps) {
19  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
20  const containerRef = useRef<HTMLHeadingElement>(null)
21 
22  const handleMouseMove = (e: React.MouseEvent<HTMLHeadingElement>) => {
23    const container = containerRef.current
24    if (!container) return
25 
26    const letters = container.children
27    const containerRect = container.getBoundingClientRect()
28    const mouseX = e.clientX - containerRect.left
29 
30    Array.from(letters).forEach((letter, index) => {
31      const letterRect = letter.getBoundingClientRect()
32      const letterCenterX =
33        letterRect.left + letterRect.width / 2 - containerRect.left
34      const distance = Math.abs(mouseX - letterCenterX)
35 
36      if (distance <= 10) {
37        setHoveredIndex(index)
38      }
39    })
40  }
41 
42  const handleMouseLeave = () => {
43    setHoveredIndex(null)
44  }
45 
46  return (
47    <motion.h1
48      ref={containerRef}
49      onMouseMove={handleMouseMove}
50      onMouseLeave={handleMouseLeave}
51      className={cn(
52        "my-8 flex cursor-pointer items-center text-6xl font-bold text-gray-900 uppercase md:text-7xl lg:text-8xl dark:text-white",
53        className
54      )}
55    >
56      {text.split("").map((letter, index) => (
57        <motion.span
58          key={index}
59          animate={{
60            scaleY:
61              hoveredIndex === null
62                ? 1
63                : Math.max(1, 1.3638 - Math.abs(index - hoveredIndex) * 0.1),
64          }}
65          transition={{
66            type: "spring",
67            stiffness: 150,
68            damping: 20,
69            mass: 0.5,
70          }}
71          style={{
72            display: "inline-block",
73            transformOrigin: down ? "top" : "bottom",
74          }}
75        >
76          {letter}
77        </motion.span>
78      ))}
79    </motion.h1>
80  )
81}