Colourful Text

Heroes 46

About

A text component with various colours, filter and scale effects.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Colourful Text to your project and fits it to your theme.

Code

How Colourful Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import React from "react";
import { ColourfulText } from "@/components/ui/colourful-text";
import { motion } from "framer-motion";
import Image from "next/image";

export function ColourfulTextDemo() {
  return (
    <div className="h-screen w-full flex items-center justify-center relative overflow-hidden bg-slate-950">
      <div className="absolute inset-0 w-full h-full flex items-center justify-center">
        <motion.div
          className="relative w-full h-full flex items-center justify-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.5 }}
          transition={{ duration: 1 }}
        >
          <div className="relative w-full aspect-[16/9]">
            <Image
              src="https://cdn.21st.dev/assets/mirror/9d/9dd8f59714f3bbeef90d68659e4614726334bb4c536c82c74de5b64993ecfd70.webp"
              alt="Background"
              fill
              className="object-contain [mask-image:radial-gradient(circle,transparent,black_80%)] pointer-events-none"
              priority
            />
          </div>
        </motion.div>
      </div>
      <h1 className="text-2xl md:text-5xl lg:text-7xl font-bold text-center text-white relative z-20 font-sans">
        The best <ColourfulText text="components" /> <br /> you will ever find
      </h1>
    </div>
  );
}