1
.glitch {
2
  position: relative;
3
  display: inline-block;
4
  animation: glitch 0.7s infinite;
5
}
6

7
@keyframes glitch {
8
  0% {
9
    text-shadow: 3px 3px 0 #ff0d00, -3px -3px 0 #00ffff;
10
  }
11
  25% {
12
    text-shadow: -3px -3px 0 #ff00ff, 3px 3px 0 #00ffff;
13
  }
14
  50% {
15
    text-shadow: 3px -3px 0 #0400ff, -3px 3px 0 #00ffff;
16
  }
17
  75% {
18
    text-shadow: -3px 3px 0 #00ff00, 3px -3px 0 #00ffff;
19
  }
20
  100% {
21
    text-shadow: 3px 3px 0 #ff0d00, -3px -3px 0 #00ffff;
22
  }
23
}

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

4
const GlitchText = ({ children, className }: { children: React.ReactNode; className?: string }) => {
5
  return (
6
    <motion.span
7
      animate={{
8
        scale: [1, 1, 1.3, 1, 1, 1, 1],
9
        x: [0, 0, 0, 2, 0, 2, 2],
10
        y: [2, -2, -2, 0, 0, 2, 0],
11
        filter: [
12
          'blur(0px)',
13
          'blur(2px)',
14
          'blur(4px)',
15
          'blur(0px)',
16
          'blur(0px)',
17
          'blur(0px)',
18
          'blur(0px)'
19
        ],
20
        transition: {
21
          repeat: Infinity,
22
          duration: 0.3,
23
          repeatDelay: 1
24
        }
25
      }}
26
      className={`glitch ${className}`}
27
    >
28
      {children}
29
    </motion.span>
30
  );
31
};
32

33
export default GlitchText;