Canvas Text

Heroes 24

About

An animated text component that renders colorful curved lines on a canvas, clipped to the shape of the given text.

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

Code

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

Usage.tsx

"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>
  );
}