{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-svg-text-draw",
  "type": "registry:component",
  "title": "SVG Text Draw",
  "description": "SVG path drawing animation that reveals text letter by letter with stroke animation",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/text/svg-text-draw.tsx",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { motion, SVGMotionProps } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SvgTextDrawProps extends Omit<SVGMotionProps<SVGSVGElement>, \"children\"> {\n    children: string;\n    delay?: number;\n    speed?: number;\n    className?: string;\n}\n\n// Simple letter path definitions (lowercase letters)\nconst letterPaths: Record<string, string> = {\n    a: \"M 10 30 Q 10 10, 25 10 Q 40 10, 40 25 Q 40 40, 25 40 Q 15 40, 10 35 M 40 10 L 40 40\",\n    b: \"M 10 0 L 10 40 M 10 20 Q 10 10, 20 10 Q 30 10, 30 25 Q 30 40, 20 40 Q 10 40, 10 35\",\n    c: \"M 35 15 Q 30 10, 20 10 Q 10 10, 10 25 Q 10 40, 20 40 Q 30 40, 35 35\",\n    d: \"M 40 0 L 40 40 M 40 10 Q 40 10, 25 10 Q 10 10, 10 25 Q 10 40, 25 40 Q 40 40, 40 35\",\n    e: \"M 35 25 L 10 25 Q 10 10, 25 10 Q 40 10, 40 25 Q 40 40, 25 40 Q 10 40, 10 35\",\n    f: \"M 30 5 Q 25 0, 20 0 M 20 0 L 20 40 M 10 15 L 30 15\",\n    g: \"M 40 10 Q 40 10, 25 10 Q 10 10, 10 25 Q 10 40, 25 40 Q 40 40, 40 30 L 40 45 Q 40 50, 25 50\",\n    h: \"M 10 0 L 10 40 M 10 20 Q 10 10, 20 10 Q 30 10, 30 20 L 30 40\",\n    i: \"M 20 5 L 20 8 M 20 15 L 20 40\",\n    j: \"M 25 5 L 25 8 M 25 15 L 25 40 Q 25 50, 15 50\",\n    k: \"M 10 0 L 10 40 M 30 15 L 10 25 L 30 40\",\n    l: \"M 20 0 L 20 40\",\n    m: \"M 10 40 L 10 10 Q 10 10, 17 10 Q 24 10, 24 17 L 24 40 M 24 10 Q 24 10, 31 10 Q 38 10, 38 17 L 38 40\",\n    n: \"M 10 40 L 10 10 Q 10 10, 20 10 Q 30 10, 30 20 L 30 40\",\n    o: \"M 25 10 Q 10 10, 10 25 Q 10 40, 25 40 Q 40 40, 40 25 Q 40 10, 25 10\",\n    p: \"M 10 50 L 10 10 Q 10 10, 20 10 Q 30 10, 30 25 Q 30 40, 20 40 Q 10 40, 10 35\",\n    q: \"M 40 10 Q 40 10, 25 10 Q 10 10, 10 25 Q 10 40, 25 40 Q 40 40, 40 35 L 40 50\",\n    r: \"M 10 40 L 10 10 Q 10 10, 20 10 Q 30 10, 30 15\",\n    s: \"M 35 15 Q 30 10, 20 10 Q 10 10, 10 17 Q 10 25, 30 25 Q 40 25, 40 33 Q 40 40, 20 40 Q 10 40, 10 35\",\n    t: \"M 20 5 L 20 35 Q 20 40, 25 40 M 10 15 L 30 15\",\n    u: \"M 10 10 L 10 30 Q 10 40, 20 40 Q 30 40, 30 30 L 30 10\",\n    v: \"M 10 10 L 20 40 L 30 10\",\n    w: \"M 10 10 L 15 40 L 25 10 L 30 40 L 35 10\",\n    x: \"M 10 10 L 30 40 M 30 10 L 10 40\",\n    y: \"M 10 10 L 20 30 L 30 10 M 20 30 L 20 45 Q 20 50, 10 50\",\n    z: \"M 10 10 L 30 10 L 10 40 L 30 40\",\n    \" \": \"\",\n};\n\nconst letterWidth = 50; // Width allocated for each letter\n\nexport function SvgTextDraw({\n    children,\n    className,\n    delay = 0,\n    speed = 1,\n    ...props\n}: SvgTextDrawProps) {\n    // Convert children to string and lowercase\n    const text = String(children).toLowerCase();\n    const totalWidth = text.length * letterWidth;\n\n    // Higher speed = faster animation (divide duration by speed)\n    const calc = (x: number) => x / speed;\n\n    return (\n        <motion.svg\n            className={cn(\"h-12\", className)}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${totalWidth} 60`}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            initial={{ opacity: 1 }}\n            animate={{ opacity: 1 }}\n            {...props}\n        >\n            <title>{children}</title>\n            {text.split(\"\").map((char, index) => {\n                const path = letterPaths[char] || \"\";\n                if (!path) return null;\n\n                const xOffset = index * letterWidth;\n                const charDelay = delay + (index * 0.15) / speed;\n\n                return (\n                    <motion.path\n                        key={`${char}-${index}`}\n                        d={path}\n                        transform={`translate(${xOffset}, 0)`}\n                        initial={{ pathLength: 0, opacity: 0 }}\n                        animate={{ pathLength: 1, opacity: 1 }}\n                        transition={{\n                            pathLength: {\n                                duration: calc(0.5),\n                                ease: \"easeInOut\",\n                                delay: calc(charDelay),\n                            },\n                            opacity: {\n                                duration: calc(0.3),\n                                delay: calc(charDelay),\n                            },\n                        }}\n                    />\n                );\n            })}\n        </motion.svg>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}