{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apple-hello-effect-spanish",
  "title": "Apple Hello Effect - Spanish",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "SVG writing animation inspired by Apple’s Hello screen.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/apple-hello-effect/apple-hello-effect-spanish.tsx",
      "content": "\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport type { TargetAndTransition } from \"motion/react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst initialProps: TargetAndTransition = {\n  pathLength: 0,\n  opacity: 0,\n}\n\nconst animateProps: TargetAndTransition = {\n  pathLength: 1,\n  opacity: 1,\n}\n\nexport type AppleHelloEffectProps = Omit<\n  ComponentProps<typeof motion.svg>,\n  \"durationScale\" | \"onAnimationComplete\"\n> & {\n  /**\n   * Scales the duration and delay of the handwriting animation.\n   * Values below 1 speed up, values above 1 slow down.\n   * @defaultValue 1\n   */\n  durationScale?: number\n  /** Called when the full handwriting animation completes. */\n  onAnimationComplete?: () => void\n}\n\nexport function AppleHelloEffectSpanish({\n  className,\n  durationScale = 1,\n  onAnimationComplete,\n  ...props\n}: AppleHelloEffectProps) {\n  const calc = (x: number) => x * durationScale\n\n  return (\n    <motion.svg\n      className={cn(\"h-20\", className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 562 200\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"14.888\"\n      strokeLinecap=\"round\"\n      initial={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.5 }}\n      {...props}\n    >\n      <title>hola</title>\n      <motion.path\n        d=\"M8.692 169.422c27.495-16.185 51.282-36.493 77.822-72.424 18.627-25.219 27.738-47.893 28.236-65.962.248-13.399-6.204-23.563-18.362-23.563-13.4 0-21.837 10.164-27.048 33.497-5.707 25.643-9.925 55.067-20.595 149.42\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.8),\n          ease: \"easeOut\",\n          opacity: { duration: 0.4 },\n        }}\n      />\n      <motion.path\n        d=\"M49.79 181.168c5.265-46.274 26.25-83.086 52.801-83.086 15.881 0 25.974 12.655 23.108 30.769-1.613 10.67-4.528 23.077-6.193 35.236-2.026 15.384 3.761 27.295 21.655 27.295 25.257 0 41.157-24.523 48.037-53.562\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.8),\n          ease: \"easeInOut\",\n          delay: calc(0.7),\n          opacity: { duration: 0.2, delay: calc(0.8) },\n        }}\n      />\n      <motion.path\n        d=\"M234.601 94.36c-24.822 2.006-43.39 23.044-46.898 51.861-3.226 26.302 11.414 46.154 34.739 46.154 28.288 0 46.65-24.318 47.891-54.591.992-29.032-12.903-43.672-31.762-43.672-14.888 0-22.829 11.166-22.332 24.813.484 18.661 14.478 39.612 43.839 42.289 40.725 3.714 96.424-26.396 118.914-85.593 6.487-17.074 8.959-33.18 8.959-44.436 0-13.346-4.219-23.593-16.129-23.593-11.663 0-19.355 9.056-26.303 23.355-8.14 16.583-14.162 40.503-16.625 67.542-6.204 67.846 7.692 92.893 37.42 92.893 30.127 0 50.049-26.113 58.664-56.317\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(1.6),\n          ease: \"easeInOut\",\n          delay: calc(1.4),\n          opacity: { duration: 0.2, delay: calc(1.5) },\n        }}\n      />\n      <motion.path\n        d=\"M503.236 112.864c-4.864-11.195-15.204-18.753-31.664-18.753-27.295 0-47.808 27.296-49.155 56.576-1.174 26.799 11.192 41.864 28.805 41.687 25.001-.25 43.378-24.805 51.581-76.763 1.012-6.41 2.061-13.104 3.073-19.514\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.7),\n          ease: \"easeInOut\",\n          delay: calc(2.9),\n          opacity: { duration: 0.2, delay: calc(3) },\n        }}\n      />\n      <motion.path\n        d=\"m505.875 96.097-3.073 19.507c-4.482 28.44-6.549 39.66-6.327 46.994.518 17.121 6.675 28.784 22.06 28.784 19.355 0 30.21-13.152 35.421-27.544\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.8),\n          ease: \"easeInOut\",\n          delay: calc(3.5),\n          opacity: { duration: 0.2, delay: calc(3.5) },\n        }}\n        onAnimationComplete={onAnimationComplete}\n      />\n    </motion.svg>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/apple-hello-effect-spanish.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/apple-hello-effect",
  "categories": [
    "text-effects"
  ],
  "type": "registry:component"
}