Animated Form

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion } from "motion/react";
5import { FaGithub } from "react-icons/fa6";
6import { useEffect, useState } from "react";
7import { IoMdCheckmark } from "react-icons/io";
8 
9type AnimatedFormProps = {
10  delay?: number;
11  name?: string;
12};
13 
14const AnimatedForm = ({
15  delay = 7000,
16  name = "Alex Morgan",
17}: AnimatedFormProps) => {
18  const [animationKey, setAnimationKey] = useState(0);
19 
20  const delayTime = Math.max(delay, 7000);
21 
22  useEffect(() => {
23    const interval = setInterval(() => {
24      setAnimationKey((prev) => prev + 1);
25    }, delayTime);
26 
27    return () => clearInterval(interval);
28  }, [delayTime]);
29 
30  return <Animatedform key={animationKey} name={name} />;
31};
32 
33export default AnimatedForm;
34 
35const Animatedform = ({ name }: { name: string }) => {
36  const password = "********";
37  const circleLength = 2 * Math.PI * 50;
38 
39  const nameAnimationDuration = Math.ceil(name.length / 5);
40  const passwordAnimationDuration = 2;
41  const nameStaggerDelay = nameAnimationDuration / name.length;
42  const passwordStaggerDelay = passwordAnimationDuration / password.length;
43 
44  const icons = [
45    {
46      icon: <FaGithub className="text-primary size-6" />,
47      key: "github",
48    },
49    {
50      icon: <ShopifyIcon className="size-6" />,
51      key: "shopify",
52    },
53    {
54      icon: <TwitchIcon className="size-6" />,
55      key: "twitch",
56    },
57    {
58      icon: <YoutubeIcon className="size-6" />,
59      key: "youtube",
60    },
61  ];
62 
63  return (
64    <div className={cn("relative", "w-full max-w-85")}>
65      <div className="w-full rounded-[12px] border border-neutral-200/60 p-1.5 dark:border-neutral-900/60">
66        <div
67          className={cn(
68            "relative",
69            "flex flex-col gap-1 divide-y divide-neutral-200 rounded-lg",
70            "border border-neutral-200 dark:divide-neutral-900 dark:border-neutral-900",
71          )}
72        >
73          <div
74            className={cn(
75              "px-3 pt-3 pb-2 text-[14px] leading-4 tracking-wide text-transparent",
76              "bg-linear-to-r from-neutral-700 to-neutral-300 bg-clip-text dark:from-neutral-400 dark:to-neutral-700",
77            )}
78          >
79            Create Account
80          </div>
81          <div className="flex flex-col gap-2 p-2">
82            <div
83              className={cn(
84                "w-full rounded-md border p-2",
85                "flex items-center justify-between gap-4",
86// … truncated