ascii-glitch-ripple

1"use client";
2 
3import React, { useEffect, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6// Constants for wave animation behavior
7const WAVE_THRESH = 3;
8const CHAR_MULT = 3;
9const ANIM_STEP = 40;
10const WAVE_BUF = 5;
11 
12export interface AsciiGlitchRippleProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
13  /**
14   * The text to display and animate.
15   */
16  children: string;
17  /**
18   * The HTML element or component to render as.
19   * @default "a"
20   */
21  as?: any;
22  /**
23   * Additional CSS classes.
24   */
25  className?: string;
26  /**
27   * Duration of each ripple wave in milliseconds.
28   * @default 1000
29   */
30  dur?: number;
31  /**
32   * Character set to scramble through during the ripple wave.
33   * @default '.,·-─~+:;=*π""┐┌┘┴┬╗╔╝╚╬╠╣╩╦║░▒▓█▄▀▌▐■!?&#$@0123456789*'
34   */
35  chars?: string;
36  /**
37   * Whether to preserve space characters or scramble them too.
38   * @default true
39   */
40  preserveSpaces?: boolean;
41  /**
42   * The spread of the ripple wave. Larger numbers mean wider waves.
43   * @default 1.0
44   */
45  spread?: number;
46  [key: string]: any;
47}
48 
49export function AsciiGlitchRipple({
50  children,
51  as = "a",
52  className,
53  dur = 1000,
54  chars = '.,·-─~+:;=*π""┐┌┘┴┬╗╔╝╚╬╠╣╩╦║░▒▓█▄▀▌▐■!?&#$@0123456789*',
55  preserveSpaces = true,
56  spread = 1.0,
57  ...props
58}: AsciiGlitchRippleProps) {
59  const Component = as;
60  const elRef = useRef<any>(null);
61 
62  // Use a mutable ref to store animation state, preventing unnecessary React renders
63  const stateRef = useRef({
64    origTxt: children,
65    origChars: children.split(""),
66    isAnim: false,
67    cursorPos: 0,
68    waves: [] as Array<{ startPos: number; startTime: number; id: number }>,
69    animId: null as number | null,
70    isHover: false,
71    origW: null as number | null,
72    dur,
73    chars,
74    preserveSpaces,
75    spread,
76  });
77 
78  // Keep internal mutable state updated when props change
79  useEffect(() => {
80    stateRef.current.origTxt = children;
81    stateRef.current.origChars = children.split("");
82    stateRef.current.dur = dur;
83    stateRef.current.chars = chars;
84    stateRef.current.preserveSpaces = preserveSpaces;
85    stateRef.current.spread = spread;
86 
87    // Reset layout widths if text changes dynamically
88    if (stateRef.current.origW !== null && elRef.current) {
89      elRef.current.style.width = "";
90      stateRef.current.origW = null;
91    }
92 
93    if (!stateRef.current.isAnim && elRef.current) {
94// … truncated