Rainbow Text

Rainbow Text brings vibrant, animated color gradients to your typography! With smooth rainbow transitions and customizable animation speeds, this component creates eye-catching text effects perfect for playful or attention-grabbing content.

Preview

Code

Animation Speeds

Slow Rainbow AnimationNormal Rainbow SpeedFast Rainbow Animation

Different Text Sizes

Small Rainbow TextMedium Rainbow TextLarge Rainbow TextExtra Large Rainbow Text

Stylized Examples

🌈 Beautiful Rainbow

✨ Magical Colors

🎨 Creative Design

Interactive Demo

Hover to see the rainbow effect!

The colors continuously shift through the spectrum

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add rainbow-text

yarn @rajdevxd/aura-ui add rainbow-text

pnpm dlx @rajdevxd/aura-ui add rainbow-text

bunx --bun @rajdevxd/aura-ui add rainbow-text

Usage

import { RainbowText } from "@/components/ui/rainbow-text"

export function Example() {
  return (
    <RainbowText
      text="Colorful Rainbow Text!"
      speed="normal"
    />
  )
}

Props

Prop	Type	Required	Description
`text`	`string`	Yes	The text to apply rainbow effect to
`speed`	`"slow" \| "normal" \| "fast"`	No	Speed of the rainbow animation (default: "normal")
`className`	`string`	No	Additional CSS classes

Speed Variations

Slow Rainbow

Gentle, relaxed color transitions.

<RainbowText text="Slow Rainbow" speed="slow" />

Normal Speed (Default)

Balanced animation timing.

<RainbowText text="Normal Rainbow" speed="normal" />

Fast Rainbow

Quick, energetic color transitions.

<RainbowText text="Fast Rainbow" speed="fast" />

Features

Smooth Gradients: Seamless color transitions
Hardware Acceleration: GPU-accelerated animations
Customizable Speed: Three animation speed options
Responsive Design: Works on all screen sizes
TypeScript Support: Full type safety
Performance Optimized: Efficient CSS animations

Advanced Usage

Large Headlines

<RainbowText
  text="SPECTACULAR"
  speed="normal"
  className="text-6xl font-bold"
/>

Interactive Rainbow

const InteractiveRainbow = () => {
  const [speed, setSpeed] = React.useState('normal')

  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <button onClick={() => setSpeed('slow')}>Slow</button>
        <button onClick={() => setSpeed('normal')}>Normal</button>
        <button onClick={() => setSpeed('fast')}>Fast</button>
      </div>

      <RainbowText
        text="Interactive Rainbow!"
        speed={speed}
        className="text-2xl font-bold"
      />
    </div>
  )
}

Multiple Sizes

<div className="space-y-4">
  <RainbowText text="Small Rainbow" className="text-sm" />
  <RainbowText text="Medium Rainbow" className="text-lg" />
  <RainbowText text="Large Rainbow" className="text-2xl font-bold" />
  <RainbowText text="Extra Large Rainbow" className="text-4xl font-bold" />
</div>

Performance

GPU Accelerated: Uses CSS transforms for smooth animations
Efficient Rendering: Minimal DOM manipulation
Hardware Acceleration: CSS background animations
Memory Efficient: Lightweight animation system

Browser Support

Modern Browsers: Full support for Chrome, Firefox, Safari, Edge
CSS Gradients: Requires CSS gradient support
Fallback: Graceful degradation to solid color

Accessibility

Screen Reader Support: Proper text content for assistive technologies
Reduced Motion: Respects user's motion preferences
High Contrast: Maintains readability with gradient effects

Rainbow Text - adding colorful magic to your text! 🌈✨

Aura UI