coin-spin-animation

1"use client";
2 
3import { motion } from "framer-motion";
4 
5const CoinSpinAnimation = () => {
6  return (
7    <div
8      className="relative h-[74px] w-[74px]"
9      style={{ perspective: "900px" }}
10    >
11      <motion.div
12        className="absolute left-1/2 top-1/2 h-14 w-14"
13        style={{
14          transform: "translate(-50%, -50%)",
15          transformStyle: "preserve-3d",
16        }}
17        animate={{ rotateY: 360 }}
18        transition={{ duration: 2, ease: "linear", repeat: Infinity }}
19      >
20        <div
21          className="absolute h-14 w-[5.5px] bg-[#A9EFC3]"
22          style={{
23            transform: "translateX(25px) rotateY(90deg)",
24            transformOrigin: "center",
25          }}
26        />
27 
28        <div
29          className="absolute inset-0 rounded-full bg-[#A9EFC3]"
30          style={{
31            transform: "translateZ(3px)",
32            backfaceVisibility: "hidden",
33            WebkitBackfaceVisibility: "hidden",
34          }}
35        >
36          <CoinIcon />
37        </div>
38 
39        <div
40          className="absolute inset-0 rounded-full bg-[#A9EFC3]"
41          style={{
42            transform: "rotateY(180deg) translateZ(-2px)",
43            backfaceVisibility: "hidden",
44            WebkitBackfaceVisibility: "hidden",
45          }}
46        />
47 
48        <div
49          className="absolute inset-0 rounded-full bg-[#A9EFC3]"
50          style={{
51            transform: "rotateY(180deg) translateZ(3px)",
52            backfaceVisibility: "hidden",
53            WebkitBackfaceVisibility: "hidden",
54          }}
55        >
56          <CoinIcon />
57        </div>
58 
59        <div
60          className="absolute inset-0 rounded-full bg-[#A9EFC3]"
61          style={{
62            transform: "translateZ(-2px)",
63            backfaceVisibility: "hidden",
64            WebkitBackfaceVisibility: "hidden",
65          }}
66        />
67      </motion.div>
68    </div>
69  );
70};
71 
72function CoinIcon() {
73  return (
74    <svg viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
75      <circle cx="43.75" cy="43.75" r="43.75" fill="#A9EFC3" />
76      <path
77        d="M43.7501 78.3334C62.8499 78.3334 78.3334 62.8499 78.3334 43.7501C78.3334 24.6502 62.8499 9.16675 43.7501 9.16675C24.6502 9.16675 9.16675 24.6502 9.16675 43.7501C9.16675 62.8499 24.6502 78.3334 43.7501 78.3334Z"
78        stroke="#0048FF"
79        strokeWidth="3"
80        strokeLinecap="round"
81        strokeLinejoin="round"
82      />
83      <path
84// … truncated