Apple Hello Effect - Vietnamese

1"use client"
2 
3import type { ComponentProps } from "react"
4import type { TargetAndTransition } from "motion/react"
5import { motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9const initialProps: TargetAndTransition = {
10  pathLength: 0,
11  opacity: 0,
12}
13 
14const animateProps: TargetAndTransition = {
15  pathLength: 1,
16  opacity: 1,
17}
18 
19export type AppleHelloEffectProps = Omit<
20  ComponentProps<typeof motion.svg>,
21  "durationScale" | "onAnimationComplete"
22> & {
23  /**
24   * Scales the duration and delay of the handwriting animation.
25   * Values below 1 speed up, values above 1 slow down.
26   * @defaultValue 1
27   */
28  durationScale?: number
29  /** Called when the full handwriting animation completes. */
30  onAnimationComplete?: () => void
31}
32 
33export function AppleHelloEffectVietnamese({
34  className,
35  durationScale = 1,
36  onAnimationComplete,
37  ...props
38}: AppleHelloEffectProps) {
39  const calc = (x: number) => x * durationScale
40 
41  return (
42    <motion.svg
43      className={cn("h-20", className)}
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 1009 200"
46      fill="none"
47      stroke="currentColor"
48      strokeWidth="14.8883"
49      strokeLinecap="round"
50      initial={{ opacity: 1 }}
51      exit={{ opacity: 0 }}
52      transition={{ duration: 0.5 }}
53      {...props}
54    >
55      <title>xin chào</title>
56 
57      {/* x1 */}
58      <motion.path
59        d="M102.233 96.2277C75.6823 127.245 45.1612 158.759 11.4143 190.521"
60        initial={initialProps}
61        animate={animateProps}
62        transition={{
63          duration: calc(0.3),
64          ease: "easeInOut",
65          opacity: { duration: 0.15 },
66        }}
67      />
68 
69      {/* x2 */}
70      <motion.path
71        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"
72        initial={initialProps}
73        animate={animateProps}
74        transition={{
75          duration: calc(0.7),
76          ease: "easeInOut",
77          delay: calc(0.4),
78          opacity: { duration: 0.35, delay: calc(0.4) },
79        }}
80      />
81 
82      {/* i */}
83      <motion.path
84// … truncated