Colourful Text

"use client";
import React from "react";
import ColourfulText from "@/lab/aceternity/ui/colourful-text";
import { motion } from "motion/react";

export default function ColourfulTextDemo() {
  return (
    <div className="h-full w-full flex items-center justify-center relative overflow-hidden bg-black [container-type:inline-size]">
      <motion.img
        src="https://assets.aceternity.com/linear-demo.webp"
        alt=""
        className="h-full w-full object-cover absolute inset-0 [mask-image:radial-gradient(circle,transparent,black_80%)] pointer-events-none"
        initial={{ opacity: 0 }}
        animate={{ opacity: 0.5 }}
        transition={{ duration: 1 }}
      />
      <h1 className="text-[clamp(1.25rem,6.5cqw,4.5rem)] leading-tight font-bold text-center text-white relative z-2 font-sans px-4">
        The best <ColourfulText text="components" /> <br /> you will ever find
      </h1>
    </div>
  );
}