1
npm i framer-motion

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

4
const FlickerBox = ({
5
  children,
6
  className
7
}: {
8
  children?: React.ReactNode;
9
  className?: string;
10
}) => {
11
  return (
12
    <motion.div
13
      className={`relative duration-200 hover:scale-105 ${className}`}
14
      style={{
15
        background: 'radial-gradient(circle at left, #1a1a2e, transparent)'
16
      }}
17
      animate={{
18
        boxShadow: [
19
          '0 0 2px #00ccff, 0 0 5px #00ccff, 0 0 10px rgba(0, 204, 255, 0.5)',
20
          '0 0 3px #00c9ff, 0 0 6px #00c9ff, 0 0 12px rgba(0, 201, 255, 0.55)',
21
          '0 0 4px #cc00ff, 0 0 8px #cc00ff, 0 0 16px rgba(204, 0, 255, 0.7)',
22
          '0 0 5px #d100ff, 0 0 10px #d100ff, 0 0 18px rgba(210, 0, 255, 0.75)',
23
          '0 0 6px #ff66cc, 0 0 12px #ff66cc, 0 0 20px rgba(255, 102, 204, 0.8)',
24
          '0 0 5px #ff75d0, 0 0 10px #ff75d0, 0 0 18px rgba(255, 117, 208, 0.78)',
25
          '0 0 4px #00ffcc, 0 0 10px #00ffcc, 0 0 18px rgba(0, 255, 204, 0.75)',
26
          '0 0 3px #77ffcc, 0 0 7px #77ffcc, 0 0 14px rgba(119, 255, 204, 0.70)',
27
          '0 0 2px #66ff66, 0 0 7px #66ff66, 0 0 14px rgba(102, 255, 102, 0.65)'
28
        ],
29
        opacity: [
30
          1, 0.9, 1, 0.95, 1, 1, 0.9, 1, 0.95, 1, 1, 0.9, 1, 0.95, 1, 1, 0.9, 1, 0.95, 1, 1, 0.9, 1,
31
          0.95, 1, 1, 0.9, 1, 0.95, 1, 1, 0.9, 1, 0.95, 1, 1, 0.9, 1, 0.95, 1
32
        ]
33
      }}
34
      transition={{
35
        duration: 2,
36
        repeat: Infinity,
37
        repeatType: 'mirror',
38
        ease: 'easeInOut'
39
      }}
40
    >
41
      {children}
42
    </motion.div>
43
  );
44
};
45

46
export default FlickerBox;