colourful-text

1"use client";
2import React from "react";
3import { motion } from "motion/react";
4 
5export default function ColourfulText({ text }: { text: string }) {
6  const colors = [
7    "rgb(131, 179, 32)",
8    "rgb(47, 195, 106)",
9    "rgb(42, 169, 210)",
10    "rgb(4, 112, 202)",
11    "rgb(107, 10, 255)",
12    "rgb(183, 0, 218)",
13    "rgb(218, 0, 171)",
14    "rgb(230, 64, 92)",
15    "rgb(232, 98, 63)",
16    "rgb(249, 129, 47)",
17  ];
18 
19  const [currentColors, setCurrentColors] = React.useState(colors);
20  const [count, setCount] = React.useState(0);
21 
22  React.useEffect(() => {
23    const interval = setInterval(() => {
24      const shuffled = [...colors].sort(() => Math.random() - 0.5);
25      setCurrentColors(shuffled);
26      setCount((prev) => prev + 1);
27    }, 5000);
28 
29    return () => clearInterval(interval);
30  }, []);
31 
32  return text.split("").map((char, index) => (
33    <motion.span
34      key={`${char}-${count}-${index}`}
35      initial={{
36        y: 0,
37      }}
38      animate={{
39        color: currentColors[index % currentColors.length],
40        y: [0, -3, 0],
41        scale: [1, 1.01, 1],
42        filter: ["blur(0px)", `blur(5px)`, "blur(0px)"],
43        opacity: [1, 0.8, 1],
44      }}
45      transition={{
46        duration: 0.5,
47        delay: index * 0.05,
48      }}
49      className="inline-block whitespace-pre font-sans tracking-tight"
50    >
51      {char}
52    </motion.span>
53  ));
54}