Colourful Text

"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://assets.aceternity.com/linear-demo.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>
  );
}