Apple Hello Effect

1"use client"
2 
3import type { TargetAndTransition } from "motion/react"
4import { motion } from "motion/react"
5import type { ComponentProps } from "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  "speed" | "onAnimationComplete"
22> & {
23  /**
24   * Animation speed multiplier (higher = faster).
25   * @defaultValue 1
26   * */
27  speed?: number
28  /** Called when the full handwriting animation completes. */
29  onAnimationComplete?: () => void
30}
31 
32function AppleHelloVietnameseEffect({
33  className,
34  speed = 1,
35  onAnimationComplete,
36  ...props
37}: AppleHelloEffectProps) {
38  const calc = (x: number) => x / speed
39 
40  return (
41    <motion.svg
42      className={cn("h-20", className)}
43      xmlns="http://www.w3.org/2000/svg"
44      viewBox="0 0 1009 200"
45      fill="none"
46      stroke="currentColor"
47      strokeWidth="14.8883"
48      initial={{ opacity: 1 }}
49      exit={{ opacity: 0 }}
50      transition={{ duration: 0.5 }}
51      {...props}
52    >
53      <title>xin chào</title>
54 
55      {/* x1 */}
56      <motion.path
57        d="M102.233 96.2277C75.6823 127.245 45.1612 158.759 11.4143 190.521"
58        style={{ strokeLinecap: "round" }}
59        initial={initialProps}
60        animate={animateProps}
61        transition={{
62          duration: calc(0.3),
63          ease: "easeInOut",
64          opacity: { duration: 0.15 },
65        }}
66      />
67 
68      {/* x2 */}
69      <motion.path
70        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"
71        style={{ strokeLinecap: "round" }}
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        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"
85// … truncated