Apple Hello Effect

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