DonutLoader

npx shadcn@latest add "https://designpass.dev/r/DonutLoader-TS-TW.json"

/*!
 * DonutLoader, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/donut-loader
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import React, { useEffect, useRef, type CSSProperties } from "react";

export interface DonutLoaderProps {
  /** Overall footprint of the loader (px). */
  size?: number;
  /** Seconds per full turn about the vertical axis. 0 disables the spin. */
  speed?: number;
  /** Tube thickness as a fraction of the donut's outer radius (0.1-0.48).
   * Around 0.48 the hole closes completely. */
  thickness?: number;
  /** How bouncy the donut is (0-1.5). 0 disables the ambient bounce; higher
   * values hop taller with more jelly-like squash on landing and stretch in
   * flight. */
  bounce?: number;
  /** Enables the pointer interactions (hover grow, press-and-hold squish,
   * release to jump). When false the donut ignores the pointer entirely. */
  interactive?: boolean;
  /** Shadow tone for surfaces turned away from the light (off-white). */
  colorFrom?: string;
  /** Base tone for mid-lit surfaces (off-white). */
  colorMid?: string;
  /** Highlight tone for surfaces facing the light (white). */
  colorTo?: string;
  className?: string;
  style?: CSSProperties;
}

const VERT = `
attribute vec2 aPos;
varying vec2 vUv;
void main() {
  vUv = aPos;
  gl_Position = vec4(aPos, 0.0, 1.0);
}`;

// Raymarched torus SDF, CubeLoader's sibling: orthographic rays, the same
// floor-anchored squash/stretch, and a single key light grading the surface
// between three tones. The donut stands upright on its edge (a wheel, hole
// facing the viewer) and spins about the vertical axis.
const FRAG = `
precision highp float;
varying vec2 vUv;
uniform vec3 uFrom;
uniform vec3 uMid;
uniform vec3 uTo;
uniform float uPixel;
uniform float uLift;
uniform float uSquash;
uniform float uSpin;
uniform float uRing;
uniform float uTube;

float map(vec3 p) {
  // Bounce: lift the donut and squash it like a real donut. The ring path
  // (the shape the girth goes around) becomes an ellipse in the ring's plane
  // while the tube girth stays a constant round radius. Path squash is remapped
  // into a mild range so the thick tube never self-intersects and the hole
  // stays a clear oval; the bottom rests on the floor anchor.
  p.y -= uLift;
  float ay = -0.92;
  // Remap the family's crouch into a clear path squash. A 1:1 map of a mild
  // crouch still reads as a circle; amplify the deviation from 1 so that a
  // default crouch lands as a clear wide oval while the deepest bounce-1.5
  // crouch floors at 0.60 so Br stays above uTube and the hole stays open.
  float pathSquash = clamp(1.0 - (1.0 - uSquash) * 1.85, 0.60, 1.55);
  float widen = min(1.0 / pathSquash, 1.55);
  float Ar = uRing * widen;
  float Br = uRing * pathSquash;
  // Outer bottom sits on the floor anchor: center of the ellipse is at
  // ay + Br + uTube.
  p.y -= ay + Br + uTube;
  // Spin about the vertical axis: edge-on, face-on, and back each turn.
  float c = cos(uSpin);
  float s = sin(uSpin);
  p.xz = mat2(c, -s, s, c) * p.xz;
  // Distance to the elliptical path by dense angular sampling, then a round
  // tube of radius uTube. Sampling gives a true constant-girth tube (no
  // thinning at the flat of the ellipse); 64 steps is enough that the gap
  // between samples is far below the tube radius.
  float dMin = 1e9;
  for (int i = 0; i < 64; i++) {
    float t = float(i) * 0.09817477; // 2*pi/64
    vec2 e = vec2(Ar * cos(t), Br * sin(t));
    dMin = min(dMin, length(vec3(p.xy - e, p.z)));
  }
  return dMin - uTube;
}

vec3 normalAt(vec3 p) {
  vec2 e = vec2(0.0015, 0.0);
  return normalize(vec3(
    map(p + e.xyy) - map(p - e.xyy),
    map(p + e.yxy) - map(p - e.yxy),
    map(p + e.yyx) - map(p - e.yyx)
  ));
}

void main() {
  // Orthographic camera looking down +z; the donut fits its jump sweep.
  vec3 ro = vec3(vUv * 1.62, -3.0);
  vec3 rd = vec3(0.0, 0.0, 1.0);

  float t = 0.0;
  float closest = 1e9;
  bool hit = false;
  for (int i = 0; i < 96; i++) {
    vec3 p = ro + rd * t;
    float d = map(p);
    closest = min(closest, d);
    if (d < 0.001) { hit = true; break; }
    t += d;
    if (t > 6.0) break;
  }

  // Edge anti-aliasing from the ray's closest approach to the surface.
  float alpha = hit ? 1.0 : 1.0 - smoothstep(0.0, uPixel * 1.5, closest);
  if (alpha <= 0.0) { discard; }

  vec3 color = uMid;
  if (hit) {
    vec3 n = normalAt(ro + rd * t);
    // Fixed key light in view space, so the light stays put while the donut
    // turns beneath it.
    vec3 l = normalize(vec3(-0.4, 0.85, -0.5));
    float lit = 0.5 + 0.5 * dot(n, l);
    color = lit <= 0.5 ? mix(uFrom, uMid, lit * 2.0) : mix(uMid, uTo, (lit - 0.5) * 2.0);
  }
  gl_FragColor = vec4(color * alpha, alpha);
}`;

function hexToRgb(hex: string): [number, number, number] {
  let h = hex.replace("#", "");
  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
  const n = parseInt(h, 16);
  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
}

function compile(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
  const shader = gl.createShader(type);
  if (!shader) return null;
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

/**
 * CubeLoader's sweeter sibling: a 3D donut standing upright on its edge like
 * a wheel, spinning in place so it turns edge-on, face-on, and back with
 * every revolution, bouncing with cartoon squash and stretch. You can play
 * with it while you wait: it perks up on hover, squishes flat when pressed,
 * and springs when released (the longer the hold, the higher the jump).
 * Rendered as a raymarched signed distance field in a tiny WebGL shader,
 * with a toggle to switch interaction off. Zero dependencies, honors
 * prefers-reduced-motion.
 */
export default function DonutLoader({
  size = 48,
  speed = 2,
  thickness = 0.33,
  bounce = 0.25,
  interactive = true,
  colorFrom = "#dcdce4",
  colorMid = "#f2f2f6",
  colorTo = "#ffffff",
  className = "",
  style,
}: DonutLoaderProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = canvas.getContext("webgl", { alpha: true, premultipliedAlpha: true });
    if (!gl) return;

    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const pixels = Math.max(1, Math.round(size * dpr));
    canvas.width = pixels;
    canvas.height = pixels;
    gl.viewport(0, 0, pixels, pixels);

    const program = gl.createProgram();
    const vert = compile(gl, gl.VERTEX_SHADER, VERT);
    const frag = compile(gl, gl.FRAGMENT_SHADER, FRAG);
    if (!program || !vert || !frag) return;
    gl.attachShader(program, vert);
    gl.attachShader(program, frag);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
    gl.useProgram(program);

    const quad = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, quad);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1]),
      gl.STATIC_DRAW,
    );
    const aPos = gl.getAttribLocation(program, "aPos");
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

    // Outer radius is fixed to fit the view; thickness splits it between the
    // ring radius and the tube radius (at 0.5 the hole closes completely).
    const OUTER = 0.92;
    const tubeFrac = Math.min(Math.max(thickness, 0.1), 0.48);
    const tube = OUTER * tubeFrac;
    const ring = OUTER - tube;

    gl.uniform3fv(gl.getUniformLocation(program, "uFrom"), hexToRgb(colorFrom));
    gl.uniform3fv(gl.getUniformLocation(program, "uMid"), hexToRgb(colorMid));
    gl.uniform3fv(gl.getUniformLocation(program, "uTo"), hexToRgb(colorTo));
    gl.uniform1f(gl.getUniformLocation(program, "uRing"), ring);
    gl.uniform1f(gl.getUniformLocation(program, "uTube"), tube);
    // One shader pixel in ray space: 2 * 1.62 units across `pixels` pixels.
    gl.uniform1f(gl.getUniformLocation(program, "uPixel"), 3.24 / pixels);
    const uLift = gl.getUniformLocation(program, "uLift");
    const uSquash = gl.getUniformLocation(program, "uSquash");
    const uSpin = gl.getUniformLocation(program, "uSpin");

    gl.clearColor(0, 0, 0, 0);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    const draw = (spin: number, lift: number, squash: number) => {
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.uniform1f(uSpin, spin);
      gl.uniform1f(uLift, lift);
      gl.uniform1f(uSquash, squash);
      gl.drawArrays(gl.TRIANGLES, 0, 6);
    };

    const bounciness = Math.min(Math.max(bounce, 0), 1.5);
    const still =
      window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
      (speed <= 0 && bounciness <= 0 && !interactive);
    if (still) {
      // A quarter turn shows the donut three-quarters on, its best angle.
      draw(Math.PI / 5, 0, 1);
      return () => {
        gl.deleteProgram(program);
        gl.deleteBuffer(quad);
      };
    }

    // The bounce runs on its own clock at the family tempo (CubeLoader and
    // BallLoader hop once per second at their defaults); `speed` only drives
    // the spin, so a slow turn doesn't slow the hops.
    const bouncePeriod = 1;
    const GROUND = 0.32;
    const loopFloor = bounciness * -0.3;
    const smooth = (t: number) => {
      const s = Math.min(Math.max(t, 0), 1);
      return s * s * (3 - 2 * s);
    };

    // Ambient bounce targets for a loop phase bf in [0,1). Each cycle splits
    // into a ground phase and a flight phase. On the ground the donut absorbs
    // the landing, settling ever deeper into the anticipation crouch (one
    // continuous ease-out, no recover-pause); in the air it stretches with
    // vertical speed, relaxing smoothly (cos^2) at the apex.
    const loopTargets = (bf: number): [number, number] => {
      if (bounciness <= 0) return [0, 1];
      const crouch = 1 - 0.38 * bounciness;
      const stretch = 1 + 0.18 * bounciness;
      if (bf < GROUND) {
        const u = bf / GROUND;
        const settle = 1 - (1 - u) * (1 - u);
        return [loopFloor, stretch + (crouch - stretch) * settle];
      }
      const v = (bf - GROUND) / (1 - GROUND);
      const wave = Math.cos(Math.PI * v);
      const base = 1 + 0.18 * bounciness * wave * wave;
      return [
        bounciness * (0.62 * Math.sin(Math.PI * v) - 0.3),
        crouch + (base - crouch) * smooth(v / 0.14),
      ];
    };

    // Interaction state: pressing pins the donut to the floor and flattens it
    // asymptotically; releasing launches a jump charged by the hold time.
    let mode: "loop" | "press" | "launch" = "loop";
    let loopOrigin = performance.now();
    let pressStart = 0;
    let releaseSquash = 1;
    let launchStart = 0;
    let launchDuration = 1;
    let jumpPower = 0;
    let currentLift = 0;
    let currentSquash = 1;

    const onPointerDown = (event: PointerEvent) => {
      event.preventDefault();
      mode = "press";
      pressStart = performance.now();
    };
    const onPointerUp = () => {
      if (mode !== "press") return;
      const held = (performance.now() - pressStart) / 1000;
      // Charge saturates with hold time, so long presses approach (but never
      // exceed) the maximum jump.
      jumpPower = 1 - Math.exp(-held / 0.9);
      releaseSquash = currentSquash;
      launchDuration = bouncePeriod * (1 - GROUND) * 1000 * (0.85 + 0.75 * jumpPower);
      launchStart = performance.now();
      mode = "launch";
    };
    const onPointerEnter = () => {
      canvas.style.transform = "scale(1.06)";
    };
    const onPointerLeave = () => {
      canvas.style.transform = "scale(1)";
    };
    // Long-press must squish, not select text or open a context menu.
    const onContextMenu = (event: Event) => event.preventDefault();
    if (interactive) {
      canvas.style.transition = "transform 0.2s ease";
      canvas.style.touchAction = "none";
      canvas.style.userSelect = "none";
      canvas.style.webkitUserSelect = "none";
      canvas.addEventListener("contextmenu", onContextMenu);
      canvas.addEventListener("pointerdown", onPointerDown);
      window.addEventListener("pointerup", onPointerUp);
      canvas.addEventListener("pointerenter", onPointerEnter);
      canvas.addEventListener("pointerleave", onPointerLeave);
    }

    // Keep a fully charged jump inside the canvas (the ortho view spans
    // +/-1.62 world units). Outer top sits at lift + ay + 2*(Br + uTube);
    // path squash is remapped the same way as in the shader.
    const VIEW_TOP = 1.62;
    const ANCHOR_Y = -OUTER;

    let frame = 0;
    const start = performance.now();
    let lastNow = start;
    const loop = (now: number) => {
      // Constant angular velocity: one full turn per `speed` seconds.
      const spin = speed > 0 ? ((now - start) / (speed * 1000)) * Math.PI * 2 : Math.PI / 5;

      let targetLift = 0;
      let targetSquash = 1;
      if (mode === "press") {
        // Pinned against the floor, flattening asymptotically toward (but
        // never reaching) the minimum the longer the hold.
        const held = (now - pressStart) / 1000;
        targetLift = -0.35;
        targetSquash = 0.45 + (0.82 - 0.45) * Math.exp(-held / 0.55);
      } else if (mode === "launch") {
        const v = (now - launchStart) / launchDuration;
        if (v >= 1) {
          // Land straight into the ambient loop's absorb phase.
          mode = "loop";
          loopOrigin = now;
          [targetLift, targetSquash] = loopTargets(0);
        } else {
          const amp = 0.62 * (0.7 + 0.75 * jumpPower);
          const wave = Math.cos(Math.PI * v);
          // Floor eases from the press floor back to the loop floor while the
          // jump arcs above it, so touchdown lines up with the ambient cycle.
          targetLift = -0.35 + (loopFloor + 0.35) * v + amp * Math.sin(Math.PI * v);
          // Stretch scales with jump power (independent of the ambient
          // bounce, so a charged jump stretches even with bounce off).
          const base = 1 + 0.18 * (1 + jumpPower) * wave * wave;
          targetSquash = releaseSquash + (base - releaseSquash) * smooth(v / 0.14);
        }
      } else {
        const bf = ((now - loopOrigin) / (bouncePeriod * 1000)) % 1;
        [targetLift, targetSquash] = loopTargets(bf);
      }

      // Light exponential smoothing bridges every mode hand-off (press in,
      // launch out, landing) without a visible snap.
      const dt = Math.min((now - lastNow) / 1000, 0.1);
      lastNow = now;
      const blend = 1 - Math.exp(-dt / 0.05);
      currentLift += (targetLift - currentLift) * blend;
      currentSquash += (targetSquash - currentSquash) * blend;
      const pathSquash = Math.min(Math.max(1 - (1 - currentSquash) * 1.85, 0.6), 1.55);
      const Br = ring * pathSquash;
      const maxLift = VIEW_TOP - (ANCHOR_Y + 2 * (Br + tube));
      draw(spin, Math.min(currentLift, maxLift), currentSquash);
      frame = requestAnimationFrame(loop);
    };
    frame = requestAnimationFrame(loop);

    return () => {
      cancelAnimationFrame(frame);
      if (interactive) {
        canvas.removeEventListener("contextmenu", onContextMenu);
        canvas.removeEventListener("pointerdown", onPointerDown);
        window.removeEventListener("pointerup", onPointerUp);
        canvas.removeEventListener("pointerenter", onPointerEnter);
        canvas.removeEventListener("pointerleave", onPointerLeave);
        canvas.style.transform = "scale(1)";
      }
      gl.deleteProgram(program);
      gl.deleteBuffer(quad);
    };
  }, [size, speed, thickness, bounce, interactive, colorFrom, colorMid, colorTo]);

  return (
    <span
      role="status"
      aria-label="Loading"
      className={`inline-flex shrink-0 select-none items-center justify-center ${
        interactive ? "cursor-pointer" : ""
      } ${className}`}
      style={{ width: size, height: size, WebkitTouchCallout: "none", ...style }}
    >
      <canvas ref={canvasRef} aria-hidden="true" className="block h-full w-full" />
    </span>
  );
}