Wordmark Footer

1"use client";
2 
3import { useState, useRef, useEffect, useCallback } from "react";
4import { motion } from "motion/react";
5 
6/**
7 * Wordmark Footer — Rauno Freiberg craft, Ruixen UI edition.
8 *
9 * Centered giant wordmark on a full-width dark surface with a subtle
10 * bottom clip. Move your cursor and the metallic shine follows —
11 * a radial gradient spotlight tracks the pointer with lerped
12 * smoothing at 60fps via direct DOM writes, zero re-renders.
13 * A vertical mask handles the half-cut fade independently.
14 * cursor: pointer. The light IS the interaction.
15 */
16 
17/* ── Types ── */
18 
19interface WordmarkFooterProps {
20  brandName?: string;
21}
22 
23/* ── Scoped CSS ── */
24 
25const STYLE = `
26.wf{
27  --wf-bg:#161618;
28  --wf-line:rgba(255,255,255,.07)
29}
30.dark .wf,[data-theme="dark"] .wf{
31  --wf-bg:#111113;
32  --wf-line:rgba(255,255,255,.08)
33}
34`.replace(/\n/g, "");
35 
36/* ── Radial shine gradient — follows cursor ── */
37 
38function makeShine(x: number, y: number): string {
39  return `radial-gradient(ellipse 100% 100% at ${x.toFixed(1)}% ${y.toFixed(1)}%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 24%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 100%)`;
40}
41 
42/* ── Vertical mask — dims bottom for the half-cut, independent of shine ── */
43 
44const VMASK =
45  "linear-gradient(to bottom, black 0%, black 38%, rgba(0,0,0,.55) 76%, rgba(0,0,0,.30) 100%)";
46 
47/* ── Main component ── */
48 
49export function WordmarkFooter({
50  brandName = "Ruixen UI",
51}: WordmarkFooterProps) {
52  const [inView, setInView] = useState(false);
53  const sectionRef = useRef<HTMLElement>(null);
54  const textRef = useRef<HTMLSpanElement>(null);
55 
56  /* ── Cursor-tracking state — refs only, zero re-renders ── */
57 
58  const hovering = useRef(false);
59  const curX = useRef(50);
60  const curY = useRef(30);
61  const tgtX = useRef(50);
62  const tgtY = useRef(30);
63  const raf = useRef(0);
64 
65  /* ── Per-frame lerp loop — direct DOM writes ── */
66 
67  const paint = useCallback(() => {
68    curX.current += (tgtX.current - curX.current) * 0.1;
69    curY.current += (tgtY.current - curY.current) * 0.1;
70 
71    const grad = makeShine(curX.current, curY.current);
72 
73    if (textRef.current) {
74      textRef.current.style.backgroundImage = grad;
75    }
76 
77    const dx = Math.abs(tgtX.current - curX.current);
78    const dy = Math.abs(tgtY.current - curY.current);
79 
80    if (hovering.current || dx > 0.05 || dy > 0.05) {
81      raf.current = requestAnimationFrame(paint);
82    }
83  }, []);
84 
85// … truncated