Apple Hello Effect

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 AppleHelloEffectEnglishProps = 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 AppleHelloEffectEnglish({
34  className,
35  durationScale = 1,
36  onAnimationComplete,
37  ...props
38}: AppleHelloEffectEnglishProps) {
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 638 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>hello</title>
56 
57      {/* h1 */}
58      <motion.path
59        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"
60        initial={initialProps}
61        animate={animateProps}
62        transition={{
63          duration: calc(0.8),
64          ease: "easeInOut",
65          opacity: { duration: 0.4 },
66        }}
67      />
68 
69      {/* h2, ello */}
70      <motion.path
71// … truncated