1
npm i framer-motion

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

4
const ColorCyclone = ({ children }: { children?: React.ReactNode }) => {
5
  const fogs = [
6
    {
7
      fromX: '0%',
8
      fromY: '0%',
9
      gotoX: '-40%',
10
      gotoY: '-40%',
11
      background: 'radial-gradient(circle, rgba(255,182,193,1), transparent 45%)'
12
    },
13
    {
14
      fromX: '0%',
15
      fromY: '0%',
16
      gotoX: '40%',
17
      gotoY: '40%',
18
      background: 'radial-gradient(circle, rgba(173,216,230,1), transparent 45%)'
19
    },
20
    {
21
      fromX: '0%',
22
      fromY: '0%',
23
      gotoX: '-40%',
24
      gotoY: '40%',
25
      background: 'radial-gradient(circle, rgba(144,238,144,1), transparent 45%)'
26
    },
27
    {
28
      fromX: '0%',
29
      fromY: '0%',
30
      gotoX: '40%',
31
      gotoY: '-40%',
32
      background: 'radial-gradient(circle, rgba(255,228,181,1), transparent 45%)'
33
    },
34
    {
35
      fromX: '0%',
36
      fromY: '0%',
37
      gotoX: '0%',
38
      gotoY: '40%',
39
      background: 'radial-gradient(circle, rgba(221,160,221,1), transparent 45%)'
40
    },
41
    {
42
      fromX: '0%',
43
      fromY: '0%',
44
      gotoX: '0%',
45
      gotoY: '-40%',
46
      background: 'radial-gradient(circle, rgba(240,230,140,1), transparent 45%)'
47
    },
48
    {
49
      fromX: '0%',
50
      fromY: '0%',
51
      gotoX: '40%',
52
      gotoY: '0%',
53
      background: 'radial-gradient(circle, rgba(255,218,185,1), transparent 45%)'
54
    },
55
    {
56
      fromX: '0%',
57
      fromY: '0%',
58
      gotoX: '-40%',
59
      gotoY: '0%',
60
      background: 'radial-gradient(circle, rgba(175,238,238,1), transparent 45%)'
61
    }
62
  ];
63

64
  return (
65
    <div
66
      className="h-full w-full relative flex items-center justify-center overflow-hidden bg-[#ffffff11]"
67
      style={{ perspective: '1000px', transformStyle: 'preserve-3d' }}
68
    >
69
      <div className="z-10">{children}</div>
70

71
      <motion.div
72
        initial={{
73
          rotateZ: 0
74
        }}
75
        animate={{
76
          rotateZ: 360
77
        }}
78
        transition={{
79
          duration: 30,
80
          repeat: Infinity,
81
          repeatType: 'loop'
82
        }}
83
        className="h-full w-full absolute "
84
      >
85
        {fogs.map((fog, index) => (
86
          <motion.div
87
            key={index}
88
            initial={{
89
              transform: `translateZ(-10px) translateX(${fog.fromX}) translateY(${fog.fromY})`
90
            }}
91
            animate={{
92
              transform: `translateZ(-10px) translateX(${fog.gotoX}) translateY(${fog.gotoY})`,
93
              transition: {
94
                duration: 3,
95
                repeat: Infinity,
96
                repeatType: 'reverse'
97
              }
98
            }}
99
            transition={{ duration: 2, ease: 'easeInOut' }}
100
            style={{
101
              transformStyle: 'preserve-3d',
102
              position: 'absolute',
103
              top: 0,
104
              left: 0,
105
              width: '100%',
106
              height: '100%',
107
              background: fog.background
108
            }}
109
          />
110
        ))}
111
      </motion.div>
112
    </div>
113
  );
114
};
115

116
export default ColorCyclone;