Components
Loading preview...
A text component with various colours, filter and scale effects.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/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>
);
}