Colourful Text

text

Vibrant animated gradient multi-color text transitions.

#text#gradient#colourful#typography

Live Interactive Preview

WeDesignBuildShipScaleInspire

Component Source Code

Select language in the dropdown

ColourfulText.tsx

1'use client';
2
3import React from 'react';
4
5export default function ColourfulText() {
6  const words = ['Design', 'Build', 'Ship', 'Scale', 'Inspire'];
7
8  return (
9    <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3 p-4 sm:p-6 text-2xl sm:text-4xl font-extrabold tracking-tight">
10      <span className="text-slate-900 dark:text-white">We</span>
11      {words.map((word, idx) => {
12        const gradients = [
13          'from-pink-500 via-rose-500 to-yellow-500',
14          'from-cyan-400 via-blue-500 to-indigo-600',
15          'from-emerald-400 via-teal-500 to-cyan-500',
16          'from-amber-400 via-orange-500 to-red-500',
17          'from-purple-500 via-fuchsia-500 to-pink-500'
18        ];
19        return (
20          <span
21            key={word}
22            className={`bg-gradient-to-r ${gradients[idx % gradients.length]} bg-clip-text text-transparent transition-transform hover:scale-110 cursor-pointer inline-block`}
23          >
24            {word}
25          </span>
26        );
27      })}
28    </div>
29  );
30}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/ColourfulText.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import ColourfulText from '@/components/text/ColourfulText';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <ColourfulText />
7    </main>
8  );
9}