{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apple-hello-effect-vietnamese",
  "title": "Apple Hello Effect - Vietnamese",
  "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-vietnamese.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 AppleHelloEffectVietnamese({\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 1009 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>xin chào</title>\n\n      {/* x1 */}\n      <motion.path\n        d=\"M102.233 96.2277C75.6823 127.245 45.1612 158.759 11.4143 190.521\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.3),\n          ease: \"easeInOut\",\n          opacity: { duration: 0.15 },\n        }}\n      />\n\n      {/* x2 */}\n      <motion.path\n        d=\"M7.69214 116.575C9.67725 105.16 16.8733 95.7311 28.5358 95.7311C40.4465 95.7311 46.8981 105.408 53.3497 124.019C56.7409 133.283 60.1322 142.547 63.5234 151.81C73.689 179.58 81.1988 191.513 100.855 191.513C128.722 191.513 154.043 159.148 161.595 118.502C162.929 111.321 164.774 103.736 166.043 96.2273\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.7),\n          ease: \"easeInOut\",\n          delay: calc(0.4),\n          opacity: { duration: 0.35, delay: calc(0.4) },\n        }}\n      />\n\n      {/* i */}\n      <motion.path\n        d=\"M166.043 96.2273C163.191 113.101 160.565 126.997 158.92 139.404C157.989 147.592 157.544 154.54 157.596 161.488C157.729 179.354 164.764 191.513 182.695 191.513C209.39 191.513 236.181 159.123 243.73 118.5C245.064 111.321 247.012 103.759 248.139 96.2273\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.5),\n          ease: \"easeOut\",\n          delay: calc(1),\n          opacity: { duration: 0.25, delay: calc(1) },\n        }}\n      />\n\n      {/* n1 */}\n      <motion.path\n        d=\"M248.139 96.2278C243.424 127.741 239.454 158.759 234.491 190.272\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.3),\n          ease: \"easeOut\",\n          delay: calc(1.5),\n          opacity: { duration: 0.15, delay: calc(1.5) },\n        }}\n      />\n\n      {/* n2 */}\n      <motion.path\n        d=\"M237.873 167.951C244.704 121.32 265.508 94.2422 290.322 94.2422C307.692 94.2422 316.625 106.153 315.136 123.026C313.896 135.681 309.677 150.322 308.685 162.729C307.444 179.85 316.499 191.513 330.769 191.513C348.722 191.513 359.309 179.314 364.143 165.965\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.9),\n          ease: \"easeOut\",\n          delay: calc(1.8),\n          opacity: { duration: 0.45, delay: calc(1.8) },\n        }}\n      />\n\n      {/* c, h1 */}\n      <motion.path\n        d=\"M535.91 109.876C531.265 100.446 520.943 93.4984 505.459 93.4984C476.516 93.4984 462.044 117.816 462.044 143.374C462.044 171.503 482.265 192.506 511.307 192.506C559.762 192.506 592.902 136.708 621.581 97.8807C640.764 71.9101 649.874 49.2359 650.372 31.1674C650.62 17.7684 644.168 7.60362 632.01 7.60362C618.61 7.60362 610.173 17.7684 604.963 41.1011C599.255 66.7441 595.037 96.1684 584.367 190.521\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(1.1),\n          ease: \"easeInOut\",\n          delay: calc(2.6),\n          opacity: { duration: 0.55, delay: calc(2.6) },\n        }}\n      />\n\n      {/* h2 */}\n      <motion.path\n        d=\"M585.413 181.299C590.677 135.025 611.663 98.2125 638.213 98.2125C654.094 98.2125 664.187 110.868 661.321 128.982C659.708 139.652 656.794 152.059 655.128 164.217C653.102 179.602 658.89 191.513 676.813 191.513C702.178 191.513 717.375 164.077 725.613 135.196\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(1),\n          ease: \"easeInOut\",\n          delay: calc(3.6),\n          opacity: { duration: 0.5, delay: calc(3.6) },\n        }}\n      />\n\n      {/* a1 */}\n      <motion.path\n        d=\"M803.871 112.995C799.007 101.8 788.666 94.2423 772.207 94.2423C744.912 94.2423 724.398 121.538 723.052 150.818C721.878 177.617 734.244 192.681 751.857 192.505C776.858 192.255 795.234 167.699 803.437 115.742C804.449 109.332 805.498 102.638 806.51 96.2274\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.8),\n          ease: \"easeOut\",\n          delay: calc(4.6),\n          opacity: { duration: 0.4, delay: calc(4.6) },\n        }}\n      />\n\n      {/* a2, o */}\n      <motion.path\n        d=\"M806.51 96.2274C805.486 102.73 804.461 109.232 803.436 115.735C798.955 144.175 796.887 155.395 797.109 162.729C797.628 179.85 803.785 191.513 820.064 191.513C842.563 191.513 860.966 164.721 870.266 138.289C879.653 111.612 891.315 94.9867 915.633 94.9867C935.732 94.9867 951.613 109.875 951.613 137.915C951.613 168.932 931.489 192.257 906.059 192.505C883.681 192.753 868.983 174.639 870.471 147.344C872.208 117.071 890.571 94.9867 914.64 94.9867C928.536 94.9867 940.207 101.164 949.38 107.89C974.247 126.031 993.407 114.82 1000.74 96.8832\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(1.5),\n          ease: \"easeOut\",\n          delay: calc(5.4),\n          opacity: { duration: 0.75, delay: calc(5.4) },\n        }}\n      />\n\n      {/* sign */}\n      <motion.path\n        d=\"M763.027 19.3039C768.734 34.6886 780.397 48.3362 792.059 55.5322\"\n        initial={initialProps}\n        animate={animateProps}\n        transition={{\n          duration: calc(0.8),\n          ease: \"easeInOut\",\n          delay: calc(7),\n          opacity: { duration: 0.4, delay: calc(7) },\n        }}\n        onAnimationComplete={onAnimationComplete}\n      />\n    </motion.svg>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/apple-hello-effect-vietnamese.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/apple-hello-effect",
  "categories": [
    "text-effects"
  ],
  "type": "registry:component"
}