1
npm i framer-motion

1
@keyframes flip {
2
  0% {
3
    transform: rotateY(0deg);
4
  }
5
  50% {
6
    transform: rotateY(-180deg); 
7
  }
8
  100% {
9
    transform: rotateY(-360deg); 
10
  }
11
}
12

13
/* Apply animation to the entire container */
14
.flip {
15
  animation: flip 2.4s linear infinite;
16
  transform-style: preserve-3d;
17
  position: relative;
18
}
19

20
/* Ensure back side is rotated initially */
21
.flip-back {
22
  transform: rotateY(180deg);
23
}

1
import React from 'react';
2
import { motion } from 'framer-motion';
3

4
const FlipBadge = ({
5
  frontContent,
6
  backContent
7
}: {
8
  // * Remove these data types for javascript
9
  frontContent?: string | React.ReactNode;
10
  backContent?: string | React.ReactNode;
11
  // * ----
12
}) => {
13
  return (
14
    <motion.div
15
      initial={{ y: -5 }}
16
      animate={{
17
        y: 0,
18
        transition: { repeat: Infinity, duration: 0.8, repeatType: 'reverse' }
19
      }}
20
      className="relative h-[200px] w-[200px] rounded-full"
21
      style={{ perspective: '1000px' }}
22
    >
23
      <div className="flip h-full w-full rounded-full relative flex items-center justify-center">
24
        <motion.div
25
          animate={{
26
            boxShadow: [
27
              '0 -10px 10px rgba(255, 85, 0, 0.5), 0 -10px 20px rgba(255, 100, 0, 0.6), 0 -10px 30px rgba(255, 120, 0, 0.7)',
28
              '0 -10px 15px rgba(255, 100, 0, 0.6), 0 -10px 25px rgba(255, 120, 0, 0.7), 0 -10px 35px rgba(255, 150, 0, 0.8)',
29
              '0 -10px 12px rgba(255, 85, 0, 0.5), 0 -10px 22px rgba(255, 100, 0, 0.6), 0 -10px 32px rgba(255, 120, 0, 0.7)'
30
            ]
31
          }}
32
          transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
33
          className="absolute inset-0 rounded-full border border-orange-500"
34
        ></motion.div>
35

36
        {/* Front Side */}
37
        <div
38
          className="h-full w-full absolute top-0 left-0 flex items-center justify-center rounded-full"
39
          style={{
40
            backfaceVisibility: 'hidden',
41
            background: 'radial-gradient(circle at center, #ffebe6da, #adadadaa)'
42
          }}
43
        >
44
          {frontContent}
45
        </div>
46

47
        {/* Back Side*/}
48
        <div
49
          className="h-full w-full absolute top-0 left-0 flex items-center justify-center bg-neutral-700 rounded-full flip-back"
50
          style={{
51
            backfaceVisibility: 'hidden',
52
            background: 'radial-gradient(circle at center, #2e2a2900, #ododod)'
53
          }}
54
        >
55
          {backContent}
56
        </div>
57
      </div>
58
    </motion.div>
59
  );
60
};
61

62
export default FlipBadge;