scale-letter-text

1"use client"
2 
3import React, { useState } from "react"
4 
5interface ScaleLetterTextProps {
6  text: string
7  className?: string
8}
9 
10export default function ScaleLetterText({
11  text,
12  className = "",
13}: ScaleLetterTextProps) {
14  const [hoveredIndex, setHoveredIndex] = useState<number>(-1)
15 
16  const getLetterStyle = (index: number) => {
17    const isHovered = hoveredIndex === index
18    const distance = hoveredIndex >= 0 ? Math.abs(index - hoveredIndex) : 0
19 
20    let scale = 1
21    let translateY = 0
22    let rotateX = 0
23    let brightness = 1
24 
25    if (hoveredIndex >= 0) {
26      if (isHovered) {
27        scale = 1.4
28        translateY = -20
29        rotateX = -15
30        brightness = 1.3
31      } else if (distance === 1) {
32        scale = 1.2
33        translateY = -10
34        rotateX = -8
35        brightness = 1.15
36      } else if (distance === 2) {
37        scale = 1.1
38        translateY = -5
39        rotateX = -4
40        brightness = 1.08
41      }
42    }
43 
44    return {
45      transform: `
46                perspective(1000px) 
47                translateY(${translateY}px) 
48                rotateX(${rotateX}deg) 
49                scale(${scale})
50                translateZ(${isHovered ? 30 : distance <= 2 ? 15 : 0}px)
51            `,
52      filter: `brightness(${brightness})`,
53      textShadow:
54        distance <= 2
55          ? "0 2px 6px rgba(0,0,0,0.15)"
56          : "0 1px 2px rgba(0,0,0,0.08)",
57      transition: "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
58      zIndex: isHovered ? 10 : distance <= 2 ? 5 : 1,
59      marginRight: "0.1em",
60    }
61  }
62 
63  return (
64    <div className={className}>
65      {text.split("").map((letter, index) => (
66        <span
67          key={index}
68          className="relative inline-block cursor-pointer"
69          style={getLetterStyle(index)}
70          onMouseEnter={() => setHoveredIndex(index)}
71          onMouseLeave={() => setHoveredIndex(-1)}
72        >
73          <span className="font-bold">
74            {letter === " " ? "\u00A0" : letter}
75          </span>
76        </span>
77      ))}
78    </div>
79  )
80}