shadcn/app/public/registry/styles/default/3d-text.json

{
  "name": "3d-text",
  "description": "3D text with depth and lighting effects",
  "dependencies": [
    "motion",
    "three"
  ],
  "files": [
    {
      "name": "3d-text.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst text3DVariants = cva(\n  [\n    \"relative inline-block font-bold transform-gpu will-change-transform\",\n    \"before:absolute before:inset-0 before:z-[-1]\",\n    \"after:absolute after:inset-0 after:z-[-2]\",\n  ],\n  {\n    variants: {\n      variant: {\n        extruded: [\n          \"text-white\",\n          \"before:content-[attr(data-text)] before:text-gray-600 before:translate-x-1 before:translate-y-1\",\n          \"after:content-[attr(data-text)] after:text-gray-700 before:translate-x-2 after:translate-y-2\",\n        ],\n        neon: [\n          \"text-white\",\n          \"before:content-[attr(data-text)] before:text-purple-500 before:blur-sm before:animate-pulse\",\n          \"after:content-[attr(data-text)] after:text-pink-500 after:blur-md after:animate-pulse after:animation-delay-150\",\n        ],\n        metallic: [\n          \"bg-gradient-to-b from-gray-200 via-gray-400 to-gray-600 bg-clip-text text-transparent\",\n          \"before:content-[attr(data-text)] before:bg-gradient-to-b before:from-gray-400 before:to-gray-700 before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5\",\n          \"after:content-[attr(data-text)] after:bg-gradient-to-b after:from-gray-600 after:to-gray-900 after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1\",\n        ],\n        rainbow: [\n          \"bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 bg-clip-text text-transparent\",\n          \"before:content-[attr(data-text)] before:bg-gradient-to-r before:from-red-400 before:via-yellow-400 before:via-green-400 before:via-blue-400 before:to-purple-400 before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5\",\n          \"after:content-[attr(data-text)] after:bg-gradient-to-r after:from-red-600 after:via-yellow-600 after:via-green-600 after:via-blue-600 after:to-purple-600 after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1\",\n        ],\n        fire: [\n          \"bg-gradient-to-t from-red-600 via-orange-500 to-yellow-400 bg-clip-text text-transparent\",\n          \"before:content-[attr(data-text)] before:bg-gradient-to-t before:from-red-700 before:via-orange-600 before:to-yellow-500 before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5\",\n          \"after:content-[attr(data-text)] after:bg-gradient-to-t after:from-red-800 after:via-orange-700 after:to-yellow-600 after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1\",\n        ],\n        ice: [\n          \"bg-gradient-to-b from-blue-200 via-cyan-300 to-blue-400 bg-clip-text text-transparent\",\n          \"before:content-[attr(data-text)] before:bg-gradient-to-b before:from-blue-300 before:via-cyan-400 before:to-blue-500 before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5\",\n          \"after:content-[attr(data-text)] after:bg-gradient-to-b after:from-blue-400 after:via-cyan-500 after:to-blue-600 after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1\",\n        ],\n        gold: [\n          \"bg-gradient-to-b from-yellow-200 via-yellow-400 to-yellow-600 bg-clip-text text-transparent\",\n          \"before:content-[attr(data-text)] before:bg-gradient-to-b before:from-yellow-300 before:via-yellow-500 before:to-yellow-700 before:bg-clip-text before:text-transparent before:translate-x-0.5 before:translate-y-0.5\",\n          \"after:content-[attr(data-text)] after:bg-gradient-to-b after:from-yellow-400 after:via-yellow-600 after:to-yellow-800 after:bg-clip-text after:text-transparent after:translate-x-1 after:translate-y-1\",\n        ],\n        glass: [\n          \"text-white/90 backdrop-blur-sm\",\n          \"before:content-[attr(data-text)] before:text-white/60 before:blur-[0.5px] before:translate-x-0.5 before:translate-y-0.5\",\n          \"after:content-[attr(data-text)] after:text-white/30 after:blur-[1px] after:translate-x-1 after:translate-y-1\",\n        ],\n      },\n      size: {\n        sm: \"text-sm\",\n        default: \"text-base\",\n        lg: \"text-lg\",\n        xl: \"text-xl\",\n        \"2xl\": \"text-2xl\",\n        \"3xl\": \"text-3xl\",\n        \"4xl\": \"text-4xl\",\n        \"5xl\": \"text-5xl\",\n        \"6xl\": \"text-6xl\",\n      },\n      depth: {\n        none: \"before:translate-x-0 before:translate-y-0 after:translate-x-0 after:translate-y-0\",\n        sm: \"before:translate-x-0.5 before:translate-y-0.5 after:translate-x-1 after:translate-y-1\",\n        default:\n          \"before:translate-x-1 before:translate-y-1 after:translate-x-2 after:translate-y-2\",\n        lg: \"before:translate-x-1.5 before:translate-y-1.5 after:translate-x-3 after:translate-y-3\",\n        xl: \"before:translate-x-2 before:translate-y-2 after:translate-x-4 after:translate-y-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"extruded\",\n      size: \"default\",\n      depth: \"default\",\n    },\n  }\n)\n\ninterface Text3DProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof text3DVariants> {\n  children: React.ReactNode\n  animate?: boolean\n  rotateOnHover?: boolean\n  glowOnHover?: boolean\n  pulseAnimation?: boolean\n  perspective?: number\n}\n\nconst Text3D = React.forwardRef<HTMLSpanElement, Text3DProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      depth,\n      children,\n      animate = false,\n      rotateOnHover = false,\n      glowOnHover = false,\n      pulseAnimation = false,\n      perspective = 1000,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseMove,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const textRef = React.useRef<HTMLSpanElement>(null)\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [rotateTransform, setRotateTransform] = React.useState({ x: 0, y: 0 })\n\n    const updateRotation = React.useCallback(\n      (e: React.MouseEvent<HTMLSpanElement>) => {\n        if (!rotateOnHover || !textRef.current) return\n\n        const rect = textRef.current.getBoundingClientRect()\n        const centerX = rect.left + rect.width / 2\n        const centerY = rect.top + rect.height / 2\n\n        const deltaX = (e.clientX - centerX) / (rect.width / 2)\n        const deltaY = (e.clientY - centerY) / (rect.height / 2)\n\n        setRotateTransform({\n          x: deltaY * -15,\n          y: deltaX * 15,\n        })\n      },\n      [rotateOnHover]\n    )\n\n    const resetRotation = React.useCallback(() => {\n      setRotateTransform({ x: 0, y: 0 })\n    }, [])\n\n    const handleMouseEnter = React.useCallback(\n      (e: React.MouseEvent<HTMLSpanElement>) => {\n        setIsHovered(true)\n        onMouseEnter?.(e)\n      },\n      [onMouseEnter]\n    )\n\n    const handleMouseLeave = React.useCallback(\n      (e: React.MouseEvent<HTMLSpanElement>) => {\n        setIsHovered(false)\n        resetRotation()\n        onMouseLeave?.(e)\n      },\n      [onMouseLeave, resetRotation]\n    )\n\n    const handleMouseMove = React.useCallback(\n      (e: React.MouseEvent<HTMLSpanElement>) => {\n        if (rotateOnHover) {\n          updateRotation(e)\n        }\n        onMouseMove?.(e)\n      },\n      [onMouseMove, rotateOnHover, updateRotation]\n    )\n\n    React.useImperativeHandle(ref, () => textRef.current!)\n\n    const textString = typeof children === \"string\" ? children : \"\"\n\n    const textStyle: React.CSSProperties = {\n      ...style,\n      perspective: `${perspective}px`,\n      transform: rotateOnHover\n        ? `perspective(${perspective}px) rotateX(${rotateTransform.x}deg) rotateY(${rotateTransform.y}deg)`\n        : undefined,\n      transition: \"all 300ms cubic-bezier(0.4, 0, 0.2, 1)\",\n      filter:\n        glowOnHover && isHovered\n          ? \"drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor)\"\n          : undefined,\n    }\n\n    return (\n      <span\n        ref={textRef}\n        className={cn(\n          text3DVariants({ variant, size, depth }),\n          animate && \"animate-bounce\",\n          pulseAnimation && \"animate-pulse\",\n          glowOnHover && \"transition-all duration-300\",\n          className\n        )}\n        style={textStyle}\n        data-text={textString}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onMouseMove={handleMouseMove}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  }\n)\nText3D.displayName = \"Text3D\"\n\n// Animated text variants\nconst Text3DAnimated = React.forwardRef<\n  HTMLSpanElement,\n  Text3DProps & {\n    animationType?: \"typewriter\" | \"wave\" | \"flip\" | \"slide\"\n    duration?: number\n    delay?: number\n  }\n>(\n  (\n    {\n      children,\n      animationType = \"typewriter\",\n      duration = 2000,\n      delay = 0,\n      ...props\n    },\n    ref\n  ) => {\n    const [displayText, setDisplayText] = React.useState(\"\")\n    const [currentIndex, setCurrentIndex] = React.useState(0)\n    const text = typeof children === \"string\" ? children : \"\"\n\n    React.useEffect(() => {\n      if (animationType === \"typewriter\") {\n        const timer = setTimeout(\n          () => {\n            if (currentIndex < text.length) {\n              setDisplayText((prev) => prev + text[currentIndex])\n              setCurrentIndex((prev) => prev + 1)\n            }\n          },\n          delay + (currentIndex * duration) / text.length\n        )\n\n        return () => clearTimeout(timer)\n      } else {\n        setDisplayText(text)\n      }\n    }, [currentIndex, text, animationType, duration, delay])\n\n    if (animationType === \"typewriter\") {\n      return (\n        <Text3D ref={ref} {...props}>\n          {displayText}\n          <span className=\"animate-pulse\">|</span>\n        </Text3D>\n      )\n    }\n\n    if (animationType === \"wave\") {\n      return (\n        <Text3D ref={ref} {...props}>\n          {text.split(\"\").map((char, index) => (\n            <span\n              key={index}\n              className=\"inline-block animate-bounce\"\n              style={{\n                animationDelay: `${delay + index * 100}ms`,\n                animationDuration: `${duration}ms`,\n              }}\n            >\n              {char === \" \" ? \"\\u00A0\" : char}\n            </span>\n          ))}\n        </Text3D>\n      )\n    }\n\n    if (animationType === \"flip\") {\n      return (\n        <Text3D ref={ref} {...props}>\n          {text.split(\"\").map((char, index) => (\n            <span\n              key={index}\n              className=\"inline-block transition-transform duration-300 hover:rotate-y-180\"\n              style={{\n                transformStyle: \"preserve-3d\",\n                animationDelay: `${delay + index * 50}ms`,\n              }}\n            >\n              {char === \" \" ? \"\\u00A0\" : char}\n            </span>\n          ))}\n        </Text3D>\n      )\n    }\n\n    return (\n      <Text3D ref={ref} {...props}>\n        {children}\n      </Text3D>\n    )\n  }\n)\nText3DAnimated.displayName = \"Text3DAnimated\"\n\n// Preset text variants\nconst Text3DPreset = {\n  Hero: React.forwardRef<\n    HTMLSpanElement,\n    Omit<Text3DProps, \"variant\" | \"size\" | \"depth\">\n  >((props, ref) => (\n    <Text3D\n      ref={ref}\n      variant=\"rainbow\"\n      size=\"6xl\"\n      depth=\"lg\"\n      rotateOnHover\n      glowOnHover\n      {...props}\n    />\n  )),\n\n  Neon: React.forwardRef<\n    HTMLSpanElement,\n    Omit<Text3DProps, \"variant\" | \"size\" | \"depth\">\n  >((props, ref) => (\n    <Text3D\n      ref={ref}\n      variant=\"neon\"\n      size=\"3xl\"\n      depth=\"default\"\n      glowOnHover\n      pulseAnimation\n      {...props}\n    />\n  )),\n\n  Metallic: React.forwardRef<\n    HTMLSpanElement,\n    Omit<Text3DProps, \"variant\" | \"size\" | \"depth\">\n  >((props, ref) => (\n    <Text3D\n      ref={ref}\n      variant=\"metallic\"\n      size=\"2xl\"\n      depth=\"default\"\n      rotateOnHover\n      {...props}\n    />\n  )),\n\n  Fire: React.forwardRef<\n    HTMLSpanElement,\n    Omit<Text3DProps, \"variant\" | \"size\" | \"depth\">\n  >((props, ref) => (\n    <Text3D\n      ref={ref}\n      variant=\"fire\"\n      size=\"xl\"\n      depth=\"sm\"\n      glowOnHover\n      {...props}\n    />\n  )),\n\n  Glass: React.forwardRef<\n    HTMLSpanElement,\n    Omit<Text3DProps, \"variant\" | \"size\" | \"depth\">\n  >((props, ref) => (\n    <Text3D\n      ref={ref}\n      variant=\"glass\"\n      size=\"lg\"\n      depth=\"sm\"\n      rotateOnHover\n      {...props}\n    />\n  )),\n}\n\n// Assign display names\nText3DPreset.Hero.displayName = \"Text3DPreset.Hero\"\nText3DPreset.Neon.displayName = \"Text3DPreset.Neon\"\nText3DPreset.Metallic.displayName = \"Text3DPreset.Metallic\"\nText3DPreset.Fire.displayName = \"Text3DPreset.Fire\"\nText3DPreset.Glass.displayName = \"Text3DPreset.Glass\"\n\n// Text with floating letters effect\nconst Text3DFloating = React.forwardRef<\n  HTMLSpanElement,\n  Text3DProps & {\n    floatIntensity?: number\n    floatSpeed?: number\n  }\n>(({ children, floatIntensity = 5, floatSpeed = 2, ...props }, ref) => {\n  const text = typeof children === \"string\" ? children : \"\"\n\n  return (\n    <Text3D ref={ref} {...props}>\n      {text.split(\"\").map((char, index) => (\n        <span\n          key={index}\n          className=\"inline-block\"\n          style={\n            {\n              animation: `float ${floatSpeed}s ease-in-out infinite`,\n              animationDelay: `${index * 0.1}s`,\n              \"--float-y\": `${floatIntensity}px`,\n            } as React.CSSProperties\n          }\n        >\n          {char === \" \" ? \"\\u00A0\" : char}\n        </span>\n      ))}\n      <style>{`\n        @keyframes float {\n          0%,\n          100% {\n            transform: translateY(0px);\n          }\n          50% {\n            transform: translateY(var(--float-y, -10px));\n          }\n        }\n      `}</style>\n    </Text3D>\n  )\n})\nText3DFloating.displayName = \"Text3DFloating\"\n\nexport {\n  Text3D,\n  Text3DAnimated,\n  Text3DPreset,\n  Text3DFloating,\n  text3DVariants,\n  type Text3DProps,\n}\n"
    }
  ],
  "type": "components:3d"
}