React Colourful Text

Powered by

Motion

Most "rainbow text" effects just cycle through static colors in a predictable pattern. Users see the same boring red-orange-yellow progression every time. This component shuffles through a rich color palette with smooth character-level animations, creating text that feels alive and engaging rather than mechanical.

Dynamic color cycling with character animations

Text that continuously cycles through vibrant colors with smooth transitions:

import { ColourfulText } from '@/components/ui/shadcn-io/colourful-text';const ColourfulTextDemo = () => {  return (    <div className="flex items-center justify-center p-8">      <h1 className="text-4xl md:text-6xl font-bold text-center">        The best{' '}        <ColourfulText          text="components"          className="inline"        />{' '}        <br />        you will ever find      </h1>    </div>  );};export default ColourfulTextDemo;

'use client';import * as React from 'react';import { motion } from 'motion/react';type ColourfulTextProps = Omit<React.ComponentProps<'span'>, 'children'> & {  text: string;  interval?: number;  colors?: string[];  animationDuration?: number;  staggerDelay?: number;};const defaultColors = [  'rgb(131, 179, 32)',  'rgb(47, 195, 106)',  'rgb(42, 169, 210)',  'rgb(4, 112, 202)',  'rgb(107, 10, 255)',  'rgb(183, 0, 218)',  'rgb(218, 0, 171)',  'rgb(230, 64, 92)',  'rgb(232, 98, 63)',  'rgb(249, 129, 47)',];function ColourfulText({  ref,  text,  interval = 5000,  colors = defaultColors,  animationDuration = 0.5,  staggerDelay = 0.05,  ...props}: ColourfulTextProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const [currentColors, setCurrentColors] = React.useState(colors);  const [count, setCount] = React.useState(0);  React.useEffect(() => {    const intervalId = setInterval(() => {      const shuffled = [...colors].sort(() => Math.random() - 0.5);      setCurrentColors(shuffled);      setCount((prev) => prev + 1);    }, interval);    return () => clearInterval(intervalId);  }, [colors, interval]);  const characters = React.useMemo(() => text.split(''), [text]);  return (    <span ref={localRef} data-slot="colourful-text" {...props}>      {characters.map((char, index) => (        <motion.span          key={`${char}-${count}-${index}`}          initial={{ y: 0 }}          animate={{            color: currentColors[index % currentColors.length],            y: [0, -3, 0],            scale: [1, 1.01, 1],            filter: ['blur(0px)', 'blur(5px)', 'blur(0px)'],            opacity: [1, 0.8, 1],          }}          transition={{            duration: animationDuration,            delay: index * staggerDelay,          }}          className="inline-block whitespace-pre font-sans tracking-tight will-change-transform will-change-opacity will-change-filter"        >          {char}        </motion.span>      ))}    </span>  );}export { ColourfulText, type ColourfulTextProps };

Built with TypeScript and Motion for React applications, each character animates independently with subtle movement, blur effects, and opacity changes. The color palette shuffles every few seconds, ensuring the animation never becomes predictable or stale.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/colourful-text.json

npx shadcn@latest add https://www.shadcn.io/registry/colourful-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/colourful-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/colourful-text.json

Usage

import { ColourfulText } from "@/components/text/colourful-text";

<ColourfulText
  text="Amazing components"
  interval={3000}
  animationDuration={0.7}
  colors={["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"]}
/>;

Why most colorful text implementations suck

Most developers just apply CSS gradients or cycle through basic colors linearly—predictable and boring. The result is text that looks like a 1990s website or a slot machine display. Users see the same color progression every time, making the effect feel cheap and repetitive.

This React component uses a shuffled color palette that reorders itself at configurable intervals. Each character gets its own animation timing with realistic spring physics for smooth color transitions. The subtle blur and scale effects during transitions create depth, while the staggered timing prevents the jarring "all-at-once" color swap that breaks immersion.

The key insight: randomness creates engagement. When users can't predict what color comes next, they pay attention longer. The component maintains visual harmony by using a curated color palette while keeping the sequencing unpredictable.

Features

• Character-level color cycling with dynamic palette shuffling for React applications
• Smooth spring animations with blur and scale effects during transitions
• Configurable timing intervals and animation duration for different content types
• Custom color palettes or use the built-in vibrant 10-color gradient
• TypeScript support with complete interface definitions and prop validation
• Performance optimized with proper will-change properties for smooth rendering
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

ColourfulText

Dynamic text component with cycling colors and character-level animations.

Default Color Palette

Ten vibrant colors spanning the spectrum:

Common gotchas

Animation feels too fast: Default 0.5s duration with 0.05s stagger works for most text in React applications. For longer words or technical content, increase animationDuration to 0.7-0.8s for better readability in TypeScript projects.

Colors don't shuffle: The component shuffles colors every 5 seconds by default in JavaScript applications. For faster changes, reduce interval to 2000-3000ms. For subtle effects, increase to 8000-10000ms in Next.js projects.

Text looks blurry: The blur effect is intentional during color transitions for smooth visual changes. If too pronounced, the component uses optimized filter animations that respect prefers-reduced-motion in React applications.

Characters animate all at once: Default stagger delay creates wave-like transitions in JavaScript applications. If characters seem too synchronized, increase staggerDelay to 0.08-0.1s for more dramatic cascade effects in TypeScript projects.

Performance issues on long text: Each character creates a motion component. For text longer than 50 characters, consider breaking into multiple components or using this free open source solution for shorter highlight phrases only.

Integration with other components

Perfect for hero sections with Card layouts or attention-grabbing text in Badge components within React applications. Works excellently in Button hover states for dynamic call-to-action effects in Next.js projects.

For marketing interfaces, combine with Progress indicators or Tabs for section highlighting. This TypeScript component pairs well with Avatar for profile names and Dialog titles, all with seamless shadcn/ui integration.

Questions developers actually ask