An animated text component that renders colorful curved lines on a canvas, clipped to the shape of the given text.
"use client";
import CanvasText from "@/components/ui/canvas-text";
import { cn } from "@/lib/utils";
export default function CanvasTextDemo() {
const headingClass = cn(
"group relative mx-auto mt-4 max-w-2xl text-left text-4xl leading-20 font-bold tracking-tight text-balance text-neutral-600 sm:text-5xl md:text-6xl xl:text-7xl dark:text-neutral-700",
);
return (
<div className="flex min-h-80 items-center justify-center p-8">
<h2 className={headingClass}>
Ship landing pages at{" "}
<CanvasText
text="Lightning Speed"
backgroundClassName="bg-blue-600 dark:bg-blue-700"
colors={[
"rgba(0, 153, 255, 1)",
"rgba(0, 153, 255, 0.9)",
"rgba(0, 153, 255, 0.8)",
"rgba(0, 153, 255, 0.7)",
"rgba(0, 153, 255, 0.6)",
"rgba(0, 153, 255, 0.5)",
"rgba(0, 153, 255, 0.4)",
"rgba(0, 153, 255, 0.3)",
"rgba(0, 153, 255, 0.2)",
"rgba(0, 153, 255, 0.1)",
]}
lineGap={4}
animationDuration={20}
/>
</h2>
</div>
);
}
Part of Aceternity UI — browse the full library on 21st.dev.