Canvas Text

"use client";
import { cn } from "@/lib/utils";
import { Fit } from "./_fit";
import { CanvasText } from "@/lab/aceternity/ui/canvas-text";

export default function CanvasTextDemo() {
  return (
    <Fit width={760} height={340} max={1.4}>
    <div className="flex h-full items-center justify-center p-8">
      <h2
        className={cn(
          "group relative mx-auto mt-4 max-w-2xl text-left text-6xl leading-20 font-bold tracking-tight text-balance text-neutral-600 dark:text-neutral-700",
        )}
      >
        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>
    </Fit>
  );
}