Ruixen Gradient Footer

1"use client";
2 
3// Ruixen Gradient Footer — a normal footer that sits at the bottom of the page.
4// Its content reads first; the blurred rainbow is pinned to the bottom of the
5// viewport and stretches up from the floor over the last stretch of scroll,
6// hitting full height exactly when you reach the end of the page.
7// One inline <svg> — no canvas, no giant scroll spacer.
8//
9// Gradient design inspired by Dia Browser — https://www.diabrowser.com
10 
11import {
12  useEffect,
13  useId,
14  useRef,
15  useState,
16  type CSSProperties,
17  type ReactNode,
18} from "react";
19 
20type Stop = { offset: number; color: string };
21 
22const VBW = 1271;
23const VBH = 599;
24 
25// Ruixen's stops, floor (0) → top (1): dark ember → blue → near-white → yellow
26// → red-orange → magenta → transparent pink.
27const RUIXEN_STOPS: Stop[] = [
28  { offset: 0, color: "#340B05" },
29  { offset: 0.1827, color: "#0358F7" },
30  { offset: 0.2837, color: "#5092C7" },
31  { offset: 0.4135, color: "#E1ECFE" },
32  { offset: 0.5866, color: "#FFD400" },
33  { offset: 0.6827, color: "#FA3D1D" },
34  { offset: 0.8029, color: "#FD02F5" },
35  { offset: 1, color: "#FFC0FD00" },
36];
37 
38// Height curve: a gentle power falloff, giving the flatter, pyramid-like rise of
39// the original footer (short edges, tallest middle).
40function bellHeights(n: number, peak: number, valley: number): number[] {
41  const out: number[] = [];
42  const mid = (n - 1) / 2;
43  for (let i = 0; i < n; i++) {
44    const t = mid === 0 ? 0 : Math.abs(i - mid) / mid; // 0 center → 1 edge
45    const eased = 1 - Math.pow(t, 1.24);
46    out.push(peak * VBH * (valley + (1 - valley) * eased));
47  }
48  return out;
49}
50 
51const clamp01 = (v: number) => Math.max(0, Math.min(1, v));
52 
53export interface RuixenGradientFooterProps {
54  /** Footer content — links, wordmark, copyright — shown above the glow. */
55  children?: ReactNode;
56  /**
57   * Height of the glow band pinned to the viewport bottom. Doubles as the
58   * scroll distance the reveal takes, and the room reserved under the content.
59   */
60  gradientHeight?: string;
61  /**
62   * Resting height of the glow, as a fraction of the band — a thin, flat strip
63   * of rainbow along the bottom edge before the scroll reveal starts. `0` keeps
64   * it hidden until the last screen.
65   */
66  minReveal?: number;
67  /** Number of blurred columns. */
68  bars?: number;
69  /** Blur in viewBox units. */
70  blur?: number;
71  /** Peak height as a fraction of the viewBox. */
72  peak?: number;
73// … truncated