animated-footer

1"use client";
2 
3import * as React from "react";
4import { useEffect, useMemo, useRef } from "react";
5import gsap from "gsap";
6import { useTheme } from "next-themes";
7import { cn } from "@/lib/utils";
8 
9/**
10 * Animated Footer
11 *
12 * A cinematic, reveal-on-scroll footer: two source images are re-drawn as
13 * live ASCII art on <canvas>, light up in little clusters around the cursor,
14 * and drift with a soft parallax. When the footer scrolls into view the
15 * display headings unmask character-by-character, the links and copy slide
16 * up behind masks, and the ASCII "hands" glide in from the edges.
17 *
18 * Ported from the vanilla "LukeBaffait Animated Footer" (GSAP + canvas) into a
19 * single, self-contained, prop-driven React component. No global smooth-scroll
20 * or SplitText plugin required — the reveal is driven by an IntersectionObserver
21 * and text is split in JSX.
22 */
23 
24export interface AnimatedFooterLink {
25  label: string;
26  href: string;
27}
28 
29export interface AnimatedFooterProps {
30  /** The large display words along the bottom edge. Defaults to ["VengeanceUI"]. */
31  headingLines?: string[];
32  /** Left image URL, sampled into ASCII art. Must be same-origin or CORS-enabled. */
33  leftImage?: string;
34  /** Right image URL, sampled into ASCII art. Must be same-origin or CORS-enabled. */
35  rightImage?: string;
36 
37  /** Footer background color. Defaults to "#0f0f0f". */
38  background?: string;
39  /** Text color for links, copy and headings. Defaults to "#ffffff". */
40  textColor?: string;
41 
42  /** Character ramp, ordered dark → light, used to render the ASCII art. */
43  asciiChars?: string;
44  /** Color of the ASCII glyphs. Defaults to "#803500". */
45  charColor?: string;
46  /** Fill color of a highlighted (hovered) cell. Defaults to "#ff6a00". */
47  hoverColor?: string;
48  /** Glyph color inside a highlighted cell. Defaults to "#0f0f0f". */
49  hoverCharColor?: string;
50  /** Number of columns each image is sampled to. Defaults to 80. */
51  columns?: number;
52  /** Pixel size of each ASCII cell. Defaults to 20. */
53  cellSize?: number;
54  /** Font size (px) of the ASCII glyphs. Defaults to 18. */
55  fontSize?: number;
56 
57  /** Pointer parallax strength in px; set to 0 to disable. Defaults to 20. */
58  parallaxStrength?: number;
59  /** Cursor influence radius, in cells, for the hover highlight. Defaults to 8. */
60  hoverRadius?: number;
61 
62  /** Play the reveal when the footer scrolls into view (else it shows immediately). Defaults to true. */
63  revealOnScroll?: boolean;
64  /**
65// … truncated