Apple Hello Effect - Spanish

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 AppleHelloEffectSpanish({
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 562 200"
46      fill="none"
47      stroke="currentColor"
48      strokeWidth="14.888"
49      strokeLinecap="round"
50      initial={{ opacity: 1 }}
51      exit={{ opacity: 0 }}
52      transition={{ duration: 0.5 }}
53      {...props}
54    >
55      <title>hola</title>
56      <motion.path
57        d="M8.692 169.422c27.495-16.185 51.282-36.493 77.822-72.424 18.627-25.219 27.738-47.893 28.236-65.962.248-13.399-6.204-23.563-18.362-23.563-13.4 0-21.837 10.164-27.048 33.497-5.707 25.643-9.925 55.067-20.595 149.42"
58        initial={initialProps}
59        animate={animateProps}
60        transition={{
61          duration: calc(0.8),
62          ease: "easeOut",
63          opacity: { duration: 0.4 },
64        }}
65      />
66      <motion.path
67        d="M49.79 181.168c5.265-46.274 26.25-83.086 52.801-83.086 15.881 0 25.974 12.655 23.108 30.769-1.613 10.67-4.528 23.077-6.193 35.236-2.026 15.384 3.761 27.295 21.655 27.295 25.257 0 41.157-24.523 48.037-53.562"
68        initial={initialProps}
69        animate={animateProps}
70        transition={{
71          duration: calc(0.8),
72          ease: "easeInOut",
73          delay: calc(0.7),
74          opacity: { duration: 0.2, delay: calc(0.8) },
75        }}
76      />
77      <motion.path
78// … truncated