Canvas Text

1"use client";
2import { cn } from "@/lib/utils";
3import React, { useEffect, useRef, useState, useCallback } from "react";
4 
5interface CanvasTextProps {
6  text: string;
7  className?: string;
8  backgroundClassName?: string;
9  colors?: string[];
10  animationDuration?: number;
11  lineWidth?: number;
12  lineGap?: number;
13  curveIntensity?: number;
14  overlay?: boolean;
15}
16 
17function resolveColor(color: string): string {
18  if (color.startsWith("var(")) {
19    const varName = color.slice(4, -1).trim();
20    const resolved = getComputedStyle(document.documentElement)
21      .getPropertyValue(varName)
22      .trim();
23    return resolved || color;
24  }
25  return color;
26}
27 
28export function CanvasText({
29  text,
30  className = "",
31  backgroundClassName = "bg-white dark:bg-neutral-950",
32  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7", "#dfe6e9"],
33  animationDuration = 5,
34  lineWidth = 1.5,
35  lineGap = 10,
36  curveIntensity = 60,
37  overlay = false,
38}: CanvasTextProps) {
39  const canvasRef = useRef<HTMLCanvasElement>(null);
40  const textRef = useRef<HTMLSpanElement>(null);
41  const bgRef = useRef<HTMLSpanElement>(null);
42  const animationRef = useRef<number>(0);
43  const startTimeRef = useRef<number>(0);
44  const [bgColor, setBgColor] = useState("#0a0a0a");
45  const [resolvedColors, setResolvedColors] = useState<string[]>([]);
46  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
47  const [font, setFont] = useState("");
48 
49  const updateColors = useCallback(() => {
50    if (bgRef.current) {
51      const computed = window.getComputedStyle(bgRef.current);
52      setBgColor(computed.backgroundColor);
53    }
54    const resolved = colors.map(resolveColor);
55    setResolvedColors(resolved);
56  }, [colors]);
57 
58  useEffect(() => {
59    updateColors();
60 
61    const observer = new MutationObserver(updateColors);
62    observer.observe(document.documentElement, {
63      attributes: true,
64      attributeFilter: ["class"],
65    });
66 
67    return () => observer.disconnect();
68  }, [updateColors]);
69 
70  useEffect(() => {
71    const textEl = textRef.current;
72    if (!textEl) return;
73 
74    const updateDimensions = () => {
75      const rect = textEl.getBoundingClientRect();
76      const computed = window.getComputedStyle(textEl);
77      setDimensions({
78        width: Math.ceil(rect.width) || 400,
79        height: Math.ceil(rect.height) || 200,
80      });
81      setFont(
82        `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`,
83      );
84    };
85 
86    updateDimensions();
87 
88// … truncated