1"use client";
2
3export const SpeederButton = () => {
4  return (
5    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
6      <button className="relative flex items-center text-base font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-black text-white shadow hover:bg-black/90 h-12 px-10 py-3 transition-all duration-300 ease-out overflow-hidden group rounded-4xl">
7        <div className="flex items-center gap-2 relative z-10 transition-opacity duration-300 group-hover:opacity-0">
8          <span className="text-white">Hover me, man!</span>
9        </div>
10
11        <div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
12          <div className="relative animate-[speeder_0.4s_linear_infinite]">
13            {/* Main body */}
14            <span className="h-[5px] w-[35px] bg-white absolute -top-[19px] -left-[30px] rounded-[2px_10px_1px_0] block">
15              <span className="absolute w-[30px] h-px bg-white animate-[fazer1_0.2s_linear_infinite]" />
16              <span className="absolute top-[3px] w-[30px] h-px bg-white animate-[fazer2_0.4s_linear_infinite]" />
17              <span className="absolute top-px w-[30px] h-px bg-white animate-[fazer3_0.4s_linear_infinite] [-webkit-animation-delay:-1s] [animation-delay:-1s]" />
18              <span className="absolute top-1 w-[30px] h-px bg-white animate-[fazer4_1s_linear_infinite] [-webkit-animation-delay:-1s] [animation-delay:-1s]" />
19            </span>
20
21            <div className="relative -left-[90px]">
22              {/* Base triangle */}
23              <span className="absolute w-0 h-0 border-t-[6px] border-t-transparent border-r-[100px] border-r-white border-b-[6px] border-b-transparent before:content-[''] before:h-[22px] before:w-[22px] before:rounded-full before:bg-white before:absolute before:-right-[110px] before:-top-4 after:content-[''] after:absolute after:w-0 after:h-0 after:border-t-0 after:border-t-transparent after:border-r-[55px] after:border-r-white after:border-b-[16px] after:border-b-transparent after:-top-4 after:-right-[98px]" />
24
25              {/* Face */}
26              <div className="absolute h-3 w-5 bg-white rounded-[20px_20px_0_0] -rotate-[40deg] -right-[125px] -top-[15px] after:content-[''] after:h-3 after:w-3 after:bg-white after:right-1 after:top-[7px] after:absolute after:rotate-[40deg] after:origin-center after:rounded-[0_0_0_2px]" />
27            </div>
28          </div>
29        </div>
30
31        {/* Long fazers background */}
32        <div className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none overflow-hidden">
33          <span className="absolute h-0.5 w-1/5 bg-white top-[20%] animate-[lf_0.6s_linear_infinite] [-webkit-animation-delay:-5s] [animation-delay:-5s]" />
34          <span className="absolute h-0.5 w-1/5 bg-white top-[40%] animate-[lf2_0.8s_linear_infinite] [-webkit-animation-delay:-1s] [animation-delay:-1s]" />
35          <span className="absolute h-0.5 w-1/5 bg-white top-[60%] animate-[lf3_0.6s_linear_infinite]" />
36          <span className="absolute h-0.5 w-1/5 bg-white top-[80%] animate-[lf4_0.5s_linear_infinite] [-webkit-animation-delay:-3s] [animation-delay:-3s]" />
37        </div>
38      </button>
39    </div>
40  );
41};
42