Apple Hello Effect - Hindi

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 0.8
27   */
28  durationScale?: number
29  /** Called when the full handwriting animation completes. */
30  onAnimationComplete?: () => void
31}
32 
33export function AppleHelloEffectHindi({
34  className,
35  durationScale = 0.8,
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 605 273"
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>नमस्ते</title>
56      <motion.path
57        d="M42.3842 150.002C53.2928 153.473 60.4984 162.29 60.4984 175.561C60.4984 189.953 50.3247 201.119 36.677 201.119C24.022 201.119 14.8408 192.186 14.8408 179.035C14.8408 160.269 31.2182 148.265 56.5282 149.01C82.0863 149.754 103.723 163.663 120.367 185.069"
58        initial={initialProps}
59        animate={animateProps}
60        transition={{
61          duration: calc(0.6),
62          ease: "easeOut",
63          opacity: { duration: 0.2 },
64        }}
65      />
66      <motion.path
67        d="M133.502 93.5842C124.459 153.875 117.303 209.683 111.71 264.988"
68        initial={initialProps}
69        animate={animateProps}
70        transition={{
71          duration: calc(0.4),
72          ease: "easeOut",
73          delay: calc(0.6),
74          opacity: { duration: 0.2, delay: calc(0.6) },
75        }}
76      />
77      <motion.path
78        d="M216.556 90.9181C217.117 117.977 216.81 137.689 214.869 160.067C212.007 193.058 200.119 213.115 180.936 213.115C169.295 213.115 160.844 205.334 160.844 193.399C160.844 177.222 175.901 164.28 203.653 165.376C229.863 166.411 256.651 174.863 275.138 192.025"
79        initial={initialProps}
80// … truncated