{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scale-letter-text",
  "title": "scale-letter-text",
  "description": "A scale letter text component.",
  "dependencies": [
    "react"
  ],
  "files": [
    {
      "path": "registry/eldoraui/scale-letter-text.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\n\ninterface ScaleLetterTextProps {\n  text: string\n  className?: string\n}\n\nexport default function ScaleLetterText({\n  text,\n  className = \"\",\n}: ScaleLetterTextProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number>(-1)\n\n  const getLetterStyle = (index: number) => {\n    const isHovered = hoveredIndex === index\n    const distance = hoveredIndex >= 0 ? Math.abs(index - hoveredIndex) : 0\n\n    let scale = 1\n    let translateY = 0\n    let rotateX = 0\n    let brightness = 1\n\n    if (hoveredIndex >= 0) {\n      if (isHovered) {\n        scale = 1.4\n        translateY = -20\n        rotateX = -15\n        brightness = 1.3\n      } else if (distance === 1) {\n        scale = 1.2\n        translateY = -10\n        rotateX = -8\n        brightness = 1.15\n      } else if (distance === 2) {\n        scale = 1.1\n        translateY = -5\n        rotateX = -4\n        brightness = 1.08\n      }\n    }\n\n    return {\n      transform: `\n                perspective(1000px) \n                translateY(${translateY}px) \n                rotateX(${rotateX}deg) \n                scale(${scale})\n                translateZ(${isHovered ? 30 : distance <= 2 ? 15 : 0}px)\n            `,\n      filter: `brightness(${brightness})`,\n      textShadow:\n        distance <= 2\n          ? \"0 2px 6px rgba(0,0,0,0.15)\"\n          : \"0 1px 2px rgba(0,0,0,0.08)\",\n      transition: \"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)\",\n      zIndex: isHovered ? 10 : distance <= 2 ? 5 : 1,\n      marginRight: \"0.1em\",\n    }\n  }\n\n  return (\n    <div className={className}>\n      {text.split(\"\").map((letter, index) => (\n        <span\n          key={index}\n          className=\"relative inline-block cursor-pointer\"\n          style={getLetterStyle(index)}\n          onMouseEnter={() => setHoveredIndex(index)}\n          onMouseLeave={() => setHoveredIndex(-1)}\n        >\n          <span className=\"font-bold\">\n            {letter === \" \" ? \"\\u00A0\" : letter}\n          </span>\n        </span>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}