{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apple-hello-effect",
  "title": "Apple Hello Effect",
  "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-english.tsx",
      "content": "\"use client\"\n\nimport type { TargetAndTransition } from \"motion/react\"\nimport { motion } from \"motion/react\"\nimport type { ComponentProps } from \"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 AppleHelloEffectEnglishProps = 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 AppleHelloEffectEnglish({\n  className,\n  durationScale = 1,\n  onAnimationComplete,\n  ...props\n}: AppleHelloEffectEnglishProps) {\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 638 200\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"14.8883\"\n      strokeLinecap=\"round\"\n      initial={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: 0.5 }}\n      {...props}\n    >\n      <title>hello</title>\n\n      {/* h1 */}\n      <motion.path\n        d=\"M8.69214 166.553C36.2393 151.239 61.3409 131.548 89.8191 98.0295C109.203 75.1488 119.625 49.0228 120.122 31.0026C120.37 17.6036 113.836 7.43883 101.759 7.43883C88.3598 7.43883 79.9231 17.6036 74.7122 40.9363C69.005 66.5793 64.7866 96.0036 54.1166 190.356\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.8),\n          ease: \"easeInOut\",\n          opacity: { duration: 0.4 },\n        }}\n      />\n\n      {/* h2, ello */}\n      <motion.path\n        d=\"M55.1624 181.135C60.6251 133.114 81.4118 98.0479 107.963 98.0479C123.844 98.0479 133.937 110.703 131.071 128.817C129.457 139.487 127.587 150.405 125.408 163.06C122.869 178.941 130.128 191.348 152.122 191.348C184.197 191.348 219.189 173.523 237.097 145.915C243.198 136.509 245.68 128.073 245.928 119.884C246.176 104.996 237.739 93.8296 222.851 93.8296C203.992 93.8296 189.6 115.17 189.6 142.465C189.6 171.745 205.481 192.341 239.208 192.341C285.066 192.341 335.86 137.292 359.199 75.8585C365.788 58.513 368.26 42.4065 368.26 31.1512C368.26 17.8057 364.042 7.55823 352.131 7.55823C340.469 7.55823 332.777 16.6141 325.829 30.9129C317.688 47.4967 311.667 71.4162 309.203 98.4549C303 166.301 316.896 191.348 349.936 191.348C390 191.348 434.542 135.534 457.286 75.6686C463.803 58.513 466.275 42.4065 466.275 31.1512C466.275 17.8057 462.057 7.55823 450.146 7.55823C438.484 7.55823 430.792 16.6141 423.844 30.9129C415.703 47.4967 409.682 71.4162 407.218 98.4549C401.015 166.301 414.911 191.348 444.416 191.348C473.874 191.348 489.877 165.67 499.471 138.402C508.955 111.447 520.618 94.8221 544.935 94.8221C565.035 94.8221 580.916 109.71 580.916 137.75C580.916 168.768 560.792 192.093 535.362 192.341C512.984 192.589 498.285 174.475 499.774 147.179C501.511 116.907 519.873 94.8221 543.943 94.8221C557.839 94.8221 569.51 100.999 578.682 107.725C603.549 125.866 622.709 114.656 630.047 96.7186\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(2.8),\n          ease: \"easeInOut\",\n          delay: calc(0.7),\n          opacity: { duration: 0.7, delay: calc(0.7) },\n        }}\n        onAnimationComplete={onAnimationComplete}\n      />\n    </motion.svg>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "https://chanhdai.com/components/apple-hello-effect",
  "type": "registry:component"
}