Retro Forge

"use client";

import { motion } from "motion/react";
import * as React from "react";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "@/registry/default/hooks/use-reduced-motion/use-reduced-motion";
import { OglCanvas } from "@/registry/default/lib/ogl-canvas/ogl-canvas";

export interface RetroForgeProps extends React.ComponentPropsWithoutRef<"div"> {
  /**
   * Three tones: `[line, glow, sun]`. `line` is the grid-line color
   * (magenta), `glow` is the horizon glow (violet), `sun` is the horizon
   * semicircle (cyan). Any hex string.
   */
  colors?: [string, string, string];
  /** Grid-scroll speed multiplier. 1 = default, 2 = twice as fast. Default 1. */
  speed?: number;
  /**
   * Heat 0–1: scales the brightness of the horizon glow, the rolling glow
   * wave on the grid, and the sun together. Default 1.
   */
  heat?: number;
  /** Grid cell size in px (larger = coarser grid). Default 60. */
  cellSize?: number;
  /** Render the horizon "sun" semicircle with scanline slits. Default true. */
  sun?: boolean;
  /** Render the neon outrun sports car cruising on the grid. Default true. */
  car?: boolean;
  /** Freeze the animation at its current frame. */
  paused?: boolean;
}

const DEFAULT_COLORS: [string, string, string] = [
  "#ec4899", // magenta — grid lines
  "#8b5cf6", // violet — horizon glow
  "#22d3ee", // cyan — sun
];

/** Hex → [r,g,b] in 0–1. Accepts #rgb / #rrggbb. */
function hexToRgb(hex: string): [number, number, number] {
  let h = hex.replace("#", "").trim();
  if (h.length === 3) {
    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
  }
  const int = parseInt(h, 16);
  if (Number.isNaN(int) || h.length !== 6) return [0.93, 0.28, 0.6];
  return [((int >> 16) & 255) / 255, ((int >> 8) & 255) / 255, (int & 255) / 255];
}

/**
 * Original synthwave-horizon fragment shader. The lower half is a receding
 * ground plane reconstructed per-pixel (uv projected through the horizon into
 * world x/z), with glowing grid lines drawn as exponential falloff around the
 * nearest cell edge — bright core plus a wide halo, perspective-correct width
 * (thicker near, thinner far), and an anti-moire fade where cells shrink
 * below a few pixels. A glow wave rolls down the plane toward the viewer with
 * an eased surge. The horizon is layered bloom (tight hot line + wide
 * breathing violet wash), topped by an optional slit-scanned sun disc and a
 * restrained star field. Film-grain dithering and a soft tone curve keep the
 * bloom clean. GLSL ES 1.00 (WebGL1/2 compatible).
 */
const FRAGMENT = /* glsl */ `
precision highp float;

varying vec2 vUv;

uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uPointer;

uniform vec3 uLine;   // grid lines
uniform vec3 uGlow;   // horizon glow
uniform vec3 uSun;    // sun disc
uniform float uSpeed;
uniform float uHeat;
uniform float uCell;  // world cell scale, 1.0 at the 60px default
uniform float uSunOn; // 1.0 = draw the sun

const float HORIZON = 0.5;
const float CAM = 0.09; // camera height over the plane; sets perspective rate

float hash21(vec2 p) {
  p = fract(p * vec2(123.34, 456.21));
  p += dot(p, p + 45.32);
  return fract(p.x * p.y);
}

// Glowing line profile from a pixel-space distance: a tight gaussian core
// plus a wide exponential halo. This is what separates neon from wireframe.
float glowLine(float px) {
  return exp(-px * px * 0.32) + 0.30 * exp(-px * 0.28);
}

void main() {
  vec2 uv = vUv;
  float aspect = uResolution.x / max(uResolution.y, 1.0);
  float resY = max(uResolution.y, 1.0);
  float t = uTime * uSpeed;

  // Pointer lean, -1..1. The horizon glow and grid brightness follow it.
  float lean = clamp((uPointer.x - 0.5) * 2.0, -1.0, 1.0);

  // Near-black base with the faintest violet cast so the frame never reads
  // as a dead #000 rectangle.
  vec3 col = vec3(0.004, 0.004, 0.010) + uGlow * 0.012;

  // ---------------------------------------------------------------- grid --
  float h = HORIZON - uv.y; // 0 at the horizon, 0.5 at the bottom edge
  if (h > 0.0) {
    float z = CAM / max(h, 0.0022); // world depth of this pixel's plane hit
    float worldX = (uv.x - 0.5) * aspect * z;
    // Eased scroll: a slow sinusoid over the linear run makes the plane
    // surge and relax instead of conveyor-belting at constant speed.
    // Grid drift runs well under the animation clock (gt = t * 0.18) so the
    // lines advance calmly and hypnotically like an open cruise; this replays
    // the exact same surge/relax trajectory at that slow pace, leaving
    // horizon/sun/stars at full speed. The speed prop still scales it on top.
    float gt = t * 0.18;
    float scroll = gt * 1.35 + 0.45 * sin(gt * 0.8);
    float worldZ = z + scroll;

    float cell = 0.034 * uCell;

    // World-units-per-pixel at this depth, per axis. These make line width
    // perspective-correct and expose the on-screen cell size for the
    // anti-moire fade.
    float wppX = aspect * z / max(uResolution.x, 1.0);
    float wppZ = (z * z / CAM) / resY;

    // Distance to the nearest grid line, in world units, then pixels.
    float dx = abs(fract(worldX / cell + 0.5) - 0.5) * cell;
    float dz = abs(fract(worldZ / cell + 0.5) - 0.5) * cell;
    // Thicker near the viewer, thin at distance.
    float widen = mix(0.8, 2.0, smoothstep(0.0, 0.5, h));
    float pxX = dx / (wppX * widen);
    float pxZ = dz / (wppZ * widen);

    // Anti-moire: once a cell spans only a few pixels the lattice can only
    // alias, so fade each line family out as its spacing collapses. The
    // distance fog below finishes the job.
    float cellPxX = cell / wppX;
    float cellPxZ = cell / wppZ;
    float keepX = smoothstep(2.5, 9.0, cellPxX);
    float keepZ = smoothstep(2.5, 9.0, cellPxZ);

    float grid = glowLine(pxX) * keepX + glowLine(pxZ) * keepZ;

    // Distance fog: lines melt into the horizon glow instead of ending.
    float fog = smoothstep(0.0, 0.16, h);
    grid *= fog;

    // Lines shade from glow-violet at depth to full line color up close.
    vec3 lineCol = mix(uGlow, uLine, smoothstep(0.02, 0.30, h));

    // Grid brightness leans subtly toward the pointer side.
    float side = clamp((uv.x - 0.5) * 2.0, -1.0, 1.0);
    float leanBoost = 1.0 + 0.16 * lean * side;

    col += lineCol * grid * 0.85 * leanBoost;

    // Rolling glow wave: a soft band of extra light traveling down the
    // plane toward the viewer, tinted with the glow color. Replaces a hard
    // stripe with light that lives on the lines themselves.
    float wavePhase = fract(worldZ / (cell * 9.0));
    float wave = exp(-pow((wavePhase - 0.5) * 3.2, 2.0));
    col += uGlow * grid * wave * 0.7 * uHeat;

    // Faint plane sheen so the ground is not pure void between lines.
    col += uGlow * fog * exp(-h * 9.0) * 0.10 * uHeat;
  }

  // ------------------------------------------------------------- horizon --
  float dy = uv.y - HORIZON;
  // Horizontal emphasis follows the pointer: a wide, subtle hot spot.
  float px2 = (uv.x - uPointer.x) * aspect;
  float pointerSpot = exp(-px2 * px2 * 2.4);
  float emphasis = 0.8 + 0.35 * pointerSpot;
  // Breathing on the wide bloom only; the core line stays steady.
  float breathe = 0.86 + 0.14 * sin(t * 0.55);

  float coreLine = exp(-abs(dy) * 260.0);
  float innerBloom = exp(-abs(dy) * 34.0);
  float wideBloom = exp(-abs(dy) * 8.5);

  vec3 hotCore = mix(uGlow, vec3(1.0), 0.55);
  col += hotCore * coreLine * 1.1 * emphasis * uHeat;
  col += mix(uGlow, uLine, 0.35) * innerBloom * 0.40 * emphasis * uHeat;
  col += uGlow * wideBloom * 0.34 * breathe * emphasis * uHeat;

  // ----------------------------------------------------------------- sun --
  if (uSunOn > 0.5) {
    vec2 sp = vec2((uv.x - 0.5) * aspect, dy);
    float pulse = 1.0 + 0.035 * sin(t * 0.9);
    float R = 0.20 * pulse;
    float sd = length(sp) - R;
    float aa = 1.6 / resY;

    // Only the upper semicircle, with a hair of forgiveness at the base so
    // the disc visually sits ON the horizon line.
    float upper = smoothstep(-aa, aa, sp.y);
    float sy = clamp(sp.y / R, 0.0, 1.0); // 0 at the base, 1 at the top

    // Scanline slits: horizontal cuts across the disc that widen toward
    // the base and close up toward the top - the classic synthwave sun.
    float f = fract(sp.y / R * 7.0 - t * 0.12);
    float gap = mix(0.48, 0.0, smoothstep(0.05, 0.8, sy));
    float slit = smoothstep(gap, gap + 0.10, f);

    float disc = smoothstep(aa, -aa, sd) * upper * slit;

    // Radial gradient: bright sun color at the top, melting into the
    // horizon glow at the base.
    vec3 sunTop = mix(uSun, vec3(1.0), 0.30);
    vec3 sunCol = mix(uGlow, sunTop, smoothstep(0.0, 0.9, sy));
    col += sunCol * disc * 1.15 * uHeat;

    // Soft outer bloom hugging the disc, above the horizon only.
    float bloom = exp(-max(sd, 0.0) * 11.0);
    col += uSun * bloom * upper * 0.30 * uHeat;
  }

  // ----------------------------------------------------------------- sky --
  if (dy > 0.0) {
    // Restrained star sparkle, kept clear of the horizon glow.
    float skyMask = smoothstep(0.10, 0.30, dy);
    vec2 sc = uv * vec2(aspect, 1.0) * 70.0;
    vec2 id = floor(sc);
    float pick = hash21(id);
    if (pick > 0.994) {
      vec2 starPos = vec2(hash21(id + 7.31), hash21(id + 13.7));
      float d = length(fract(sc) - starPos);
      float star = pow(max(0.0, 1.0 - d * 2.4), 4.0);
      float twinkle = 0.55 + 0.45 * sin(t * 1.4 + pick * 61.0);
      col += vec3(0.82, 0.86, 1.0) * star * twinkle * skyMask * 0.55;
    }
  }

  // ------------------------------------------------------------- surface --
  // Whisper-quiet CRT scanlines across the whole frame.
  col *= 1.0 - 0.03 * (0.5 + 0.5 * sin(gl_FragCoord.y * 1.6));

  // Soft tone curve so the stacked bloom rolls off instead of clipping.
  col = col / (col + vec3(0.62));

  // Gentle vignette to sink the plane into black at the frame edges.
  vec2 vg = (uv - vec2(0.5, 0.42)) * vec2(aspect, 1.0);
  col *= 1.0 - 0.30 * dot(vg, vg);

  // Film-grain dithering to defeat 8-bit banding in the glows.
  float grain = hash21(gl_FragCoord.xy + fract(t) * 137.0) - 0.5;
  col += grain * (1.8 / 255.0);

  gl_FragColor = vec4(max(col, 0.0), 1.0);
}
`;

/**
 * A neon rear-view outrun sports car sitting on the grid — pure SVG, so it
 * stays crisp at any size. Body tones follow the grid palette; the tail-light
 * bar and underglow read as classic driving-game chrome.
 */
function OutrunCar({ line, sun }: { line: string; sun: string }) {
  return (
    <svg viewBox="0 0 200 118" className="h-auto w-full" fill="none">
      {/* cyan underglow pooling on the road */}
      <ellipse cx="100" cy="100" rx="82" ry="10" fill={sun} opacity="0.30"
        style={{ filter: "blur(6px)" }} />
      {/* rear wheels */}
      <rect x="24" y="70" width="26" height="30" rx="7" fill="#08060f" />
      <rect x="150" y="70" width="26" height="30" rx="7" fill="#08060f" />
      <rect x="27" y="76" width="20" height="6" rx="3" fill={line} opacity="0.5" />
      <rect x="153" y="76" width="20" height="6" rx="3" fill={line} opacity="0.5" />
      {/* body */}
      <g style={{ filter: `drop-shadow(0 0 4px ${line})` }}>
        <path
          d="M20 84 L30 62 Q34 55 44 54 L156 54 Q166 55 170 62 L180 84 Q181 90 174 90 L26 90 Q19 90 20 84 Z"
          fill="#170a2b" stroke={line} strokeWidth="1.6" />
        {/* cabin + rear glass */}
        <path d="M58 54 L70 39 Q72 36 78 36 L122 36 Q128 36 130 39 L142 54 Z"
          fill="#12081f" stroke={line} strokeWidth="1.4" />
        <path d="M70 51 L79 41 L121 41 L130 51 Z" fill="#0a1436" opacity="0.9" />
      </g>
      {/* signature tail-light bar */}
      <g style={{ filter: "drop-shadow(0 0 6px #ff2d6b)" }}>
        <rect x="40" y="64" width="120" height="7" rx="3.5" fill="#ff2d6b" />
        <rect x="46" y="66" width="108" height="3" rx="1.5" fill="#ffd0dd" opacity="0.85" />
      </g>
      {/* diffuser fins */}
      <g stroke={sun} strokeWidth="1.4" opacity="0.7" strokeLinecap="round">
        <path d="M78 84 v4" /><path d="M90 84 v4" /><path d="M100 84 v4" />
        <path d="M110 84 v4" /><path d="M122 84 v4" />
      </g>
    </svg>
  );
}

/**
 * Retro Forge — a synthwave DRIVE in GL. A perspective ground plane of glowing
 * magenta grid lines scrolls toward the viewer and melts into a layered violet
 * horizon bloom; an optional slit-scanned cyan sun sits on the line under a
 * faint star field, and a neon rear-view sports car cruises on the grid.
 * Built on the `ogl-canvas` harness: GPU-light, offscreen-paused,
 * reduced-motion-safe. Position it inside any `relative` container; it fills
 * and sits behind content.
 */
export function RetroForge({
  colors = DEFAULT_COLORS,
  speed = 1,
  heat = 1,
  cellSize = 60,
  sun = true,
  car = true,
  paused = false,
  className,
  ...props
}: RetroForgeProps) {
  const reduced = useReducedMotion();
  const uniforms = React.useMemo(
    () => ({
      uLine: { value: hexToRgb(colors[0]) },
      uGlow: { value: hexToRgb(colors[1]) },
      uSun: { value: hexToRgb(colors[2]) },
      uSpeed: { value: speed },
      uHeat: { value: Math.min(Math.max(heat, 0), 1) },
      uCell: { value: Math.max(cellSize, 8) / 60 },
      uSunOn: { value: sun ? 1 : 0 },
    }),
    [colors, speed, heat, cellSize, sun]
  );

  return (
    <div
      aria-hidden
      className={cn("absolute inset-0 -z-10 overflow-hidden bg-neutral-950", className)}
      {...props}
    >
      <OglCanvas
        data-crucible="retro-forge"
        className="absolute inset-0"
        fragment={FRAGMENT}
        uniforms={uniforms}
        paused={paused}
        reducedMotionTime={5.2}
      />
      {car && (
        <motion.div
          className="pointer-events-none absolute bottom-[6%] left-1/2 w-[32%] max-w-[400px] min-w-[210px]"
          style={{ x: "-50%" }}
          animate={paused || reduced ? undefined : { y: [0, -5, 0] }}
          transition={{ duration: 4.5, repeat: Infinity, ease: "easeInOut" }}
        >
          <OutrunCar line={colors[0]} sun={colors[2]} />
        </motion.div>
      )}
    </div>
  );
}