Electric Text

1'use client';
2 
3import React, {
4  useCallback,
5  useEffect,
6  useId,
7  useLayoutEffect,
8  useRef,
9  useState,
10} from 'react';
11import { cn } from '@/lib/utils';
12 
13type ElectricTextProps = {
14  children: React.ReactNode;
15  color?: string;
16  speed?: number;
17  chaos?: number;
18  strokeWidth?: number;
19  className?: string;
20  glowIntensity?: 'low' | 'medium' | 'high';
21  fillColor?: string;
22  showFill?: boolean;
23};
24 
25function hexToRgba(hex: string, alpha = 1): string {
26  if (!hex) return `rgba(0,0,0,${alpha})`;
27  let h = hex.replace('#', '');
28  if (h.length === 3) {
29    h = h
30      .split('')
31      .map((c) => c + c)
32      .join('');
33  }
34  const int = parseInt(h, 16);
35  const r = (int >> 16) & 255;
36  const g = (int >> 8) & 255;
37  const b = int & 255;
38  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
39}
40 
41const ElectricText: React.FC<ElectricTextProps> = ({
42  children,
43  color = '#5227FF',
44  speed = 1,
45  chaos = 1,
46  strokeWidth = 2,
47  className = '',
48  glowIntensity = 'medium',
49  fillColor = 'rgba(0,0,0,0.8)',
50  showFill = true,
51}) => {
52  const rawId = useId().replace(/[:]/g, '');
53  const filterId = `text-turbulent-${rawId}`;
54  const svgRef = useRef<SVGSVGElement | null>(null);
55  const measureRef = useRef<HTMLDivElement | null>(null);
56  const [svgFontSize, setSvgFontSize] = useState(120);
57 
58  const updateAnim = useCallback(() => {
59    const svg = svgRef.current;
60    if (!svg) return;
61 
62    const dyAnims = Array.from(
63      svg.querySelectorAll<SVGAnimateElement>(
64        'feOffset > animate[attributeName="dy"]',
65      ),
66    );
67    const dxAnims = Array.from(
68      svg.querySelectorAll<SVGAnimateElement>(
69        'feOffset > animate[attributeName="dx"]',
70      ),
71    );
72 
73    const baseDur = 6;
74    const dur = Math.max(0.001, baseDur / (speed || 1));
75    [...dyAnims, ...dxAnims].forEach((a) => a.setAttribute('dur', `${dur}s`));
76 
77    const disp = svg.querySelector('feDisplacementMap');
78    if (disp) disp.setAttribute('scale', String(30 * (chaos || 1)));
79 
80    requestAnimationFrame(() => {
81      [...dyAnims, ...dxAnims].forEach((a: SVGAnimateElement) => {
82        if (typeof a.beginElement === 'function') {
83          try {
84            a.beginElement();
85          } catch {}
86        }
87      });
88    });
89  }, [speed, chaos]);
90 
91  useEffect(() => {
92    updateAnim();
93  }, [updateAnim]);
94 
95  useLayoutEffect(() => {
96    if (measureRef.current) {
97      const computedStyle = window.getComputedStyle(measureRef.current);
98      const fontSize = parseFloat(computedStyle.fontSize);
99// … truncated