Plasma Progress

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import { cn } from "../../lib/cn";
import { PALETTES, type Palette, type PaletteId } from "./palettes";
import { createPlasmaRenderer } from "./plasma-gl";

export type PlasmaBarProps = {
  title: string;
  subtitle?: string;
  /** A palette id, or a palette of your own with the same five stops. */
  palette?: PaletteId | Palette;
  /** Fill percentage, 0-100. */
  value: number;
  /** Supply this to make the bar draggable. Without it the bar is a readout. */
  onValueChange?: (value: number) => void;
  /** Animation rate, 1 = default. */
  speed?: number;
  /** Lighting intensity, 1 = default. */
  glow?: number;
  /** How violently the fluid boundary churns, 1 = default. */
  turbulence?: number;
  /** Phase offset so stacked bars do not ripple in lockstep. */
  seed?: number;
  className?: string;
};

const clamp = (n: number) => Math.max(0, Math.min(100, n));

/** Resolution of the light-spill copy; CSS blur does the rest of the work. */
const GLOW_W = 128;
const GLOW_H = 32;

export function PlasmaBar({
  title,
  subtitle,
  palette = "magma",
  value,
  onValueChange,
  speed = 1,
  glow = 1,
  turbulence = 1,
  seed = 0,
  className,
}: PlasmaBarProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const glowRef = useRef<HTMLCanvasElement>(null);
  const cardRef = useRef<HTMLDivElement>(null);
  const [dragging, setDragging] = useState(false);

  const resolved = typeof palette === "string" ? PALETTES[palette] : palette;

  // The shader reads live values through refs and eases toward them, so neither
  // dragging nor the render loop forces a React render per frame.
  const target = useRef(value);
  const knobs = useRef({ speed, glow, turbulence });
  target.current = value;
  knobs.current = { speed, glow, turbulence };

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const renderer = createPlasmaRenderer(canvas, resolved, seed);
    if (!renderer) return;

    const observer = new ResizeObserver(() => renderer.resize());
    observer.observe(canvas);

    const glowCtx = glowRef.current?.getContext("2d") ?? null;

    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let shown = target.current;
    // Integrated rather than derived from wall time, so a speed change eases in
    // instead of jumping the animation.
    let clock = 0;
    let last = performance.now();

    let frame = requestAnimationFrame(function loop(now) {
      const dt = Math.min((now - last) / 1000, 0.05);
      last = now;
      const { speed: s, glow: g, turbulence: turb } = knobs.current;
      clock += reduced ? 0 : dt * s;
      shown += (target.current - shown) * Math.min(dt * 9, 1);
      renderer.draw(shown / 100, clock, g, turb);

      // The cast light is the frame itself, downsampled and blurred by CSS, so
      // it tracks the fill's position, colour and churn exactly.
      if (glowCtx) {
        glowCtx.clearRect(0, 0, GLOW_W, GLOW_H);
        glowCtx.drawImage(canvas, 0, 0, GLOW_W, GLOW_H);
      }

      frame = requestAnimationFrame(loop);
    });

    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      renderer.dispose();
    };
  }, [resolved, seed]);

  const setFromPointer = useCallback(
    (clientX: number) => {
      const rect = cardRef.current?.getBoundingClientRect();
      if (!rect || !onValueChange) return;
      onValueChange(clamp(Math.round(((clientX - rect.left) / rect.width) * 100)));
    },
    [onValueChange],
  );

  const interactive = Boolean(onValueChange);

  return (
    <div data-surface="plasma" className={cn("relative isolate w-full", className)}>
      {/* Cast light: the live frame, downsampled, pushed down and blurred. */}
      <canvas
        ref={glowRef}
        width={GLOW_W}
        height={GLOW_H}
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 size-full translate-y-3 scale-x-[1.05] scale-y-90 blur-2xl saturate-[1.6]"
        style={{ opacity: Math.min(1, (0.4 + (value / 100) * 0.5) * glow) }}
      />

      <div
        ref={cardRef}
        className={cn(
          "relative isolate h-24 w-full overflow-hidden rounded-[28px] bg-[#141416] select-none",
          interactive && "cursor-ew-resize touch-none",
          dragging && "cursor-grabbing",
        )}
        style={{ boxShadow: "0 18px 32px -22px rgba(0, 0, 0, 0.65)" }}
        role={interactive ? "slider" : "progressbar"}
        tabIndex={interactive ? 0 : -1}
        aria-label={title}
        aria-valuenow={Math.round(value)}
        aria-valuemin={0}
        aria-valuemax={100}
        onPointerDown={
          interactive
            ? (event) => {
                event.currentTarget.setPointerCapture(event.pointerId);
                setDragging(true);
                setFromPointer(event.clientX);
              }
            : undefined
        }
        onPointerMove={
          interactive
            ? (event) => {
                if (dragging) setFromPointer(event.clientX);
              }
            : undefined
        }
        onPointerUp={interactive ? () => setDragging(false) : undefined}
        onPointerCancel={interactive ? () => setDragging(false) : undefined}
        onKeyDown={
          interactive
            ? (event) => {
                const step = event.shiftKey ? 10 : 1;
                if (event.key === "ArrowRight" || event.key === "ArrowUp") {
                  event.preventDefault();
                  onValueChange?.(clamp(value + step));
                } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
                  event.preventDefault();
                  onValueChange?.(clamp(value - step));
                } else if (event.key === "Home") {
                  onValueChange?.(0);
                } else if (event.key === "End") {
                  onValueChange?.(100);
                }
              }
            : undefined
        }
      >
        <canvas ref={canvasRef} className="absolute inset-0 size-full" aria-hidden />

        {/* Glass: a specular lip along the top edge and a hairline bevel. */}
        <div
          className="pointer-events-none absolute inset-0 rounded-[28px] bg-gradient-to-b from-white/12 via-transparent to-black/25 ring-1 ring-white/10 ring-inset"
          aria-hidden
        />

        <div className="pointer-events-none relative flex size-full items-center justify-between gap-4 px-7">
          <div className="min-w-0 [text-shadow:0_1px_10px_rgba(0,0,0,0.55)]">
            <div className="truncate text-[15px] leading-tight font-semibold tracking-[-0.01em] text-white">
              {title}
            </div>
            {subtitle ? (
              <div className="truncate text-[12px] leading-snug font-medium tracking-[0.01em] text-white/55">
                {subtitle}
              </div>
            ) : null}
          </div>
          <div className="shrink-0 text-[34px] leading-none font-extrabold tracking-tight text-white tabular-nums [text-shadow:0_1px_10px_rgba(0,0,0,0.55)]">
            {Math.round(value)}
            <span className="text-white/60">%</span>
          </div>
        </div>
      </div>
    </div>
  );
}