1
npm i framer-motion

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

4
type RainbowTextProps = {
5
  colors?: string[];
6
  className?: string;
7
  duration?: number;
8
  children?: ReactNode;
9
};
10

11
const RainbowText = ({
12
  colors = [
13
    '#FF4D4D',
14
    '#FF944D',
15
    '#FFC14D',
16
    '#E8FF4D',
17
    '#6DFF4D',
18
    '#4DFFA1',
19
    '#4DFFFF',
20
    '#4DAAFF',
21
    '#4D6DFF',
22
    '#6D4DFF',
23
    '#A14DFF',
24
    '#D14DFF',
25
    '#FF4DAA',
26
    '#FF4D6D',
27
    '#FF4D4D',
28
    '#FF944D'
29
  ],
30
  className = '',
31
  duration = 2,
32
  children
33
}: RainbowTextProps) => {
34
  const linearGradients = [];
35
  for (let i = 0; i < colors.length - 1; i++) {
36
    linearGradients.push(`linear-gradient(90deg, ${colors[i]} 0%, ${colors[i + 1]} 100%)`);
37
  }
38

39
  return (
40
    <motion.p
41
      initial={{ backgroundImage: linearGradients[0] }}
42
      animate={{ backgroundImage: linearGradients }}
43
      transition={{
44
        duration: duration,
45
        ease: 'linear',
46
        repeat: Infinity
47
      }}
48
      className={className}
49
      style={{
50
        backgroundClip: 'text',
51
        WebkitBackgroundClip: 'text',
52
        color: 'transparent',
53
        WebkitTextFillColor: 'transparent'
54
      }}
55
    >
56
      {children}
57
    </motion.p>
58
  );
59
};
60

61
export default RainbowText;