Orbit

Build this: twenty-six labeled multiplayer cursors riding an INVISIBLE SPHERE, seen dead-on, around a thin violet ring that breathes — rebuilt from a 241-frame reference GIF (a perfect 10.04s loop at 24fps, 540x540). THE SPHERE IS NEVER DRAWN and that is the whole piece: every cursor only grows, shrinks and fades, but because they all do it on one hidden globe the eye assembles the volume instantly. HOW THE MODEL WAS RECOVERED, because none of it is guessable by eye: every name pill was blob-detected in all 241 frames and tracked by nearest neighbour, and the trajectory overlay is unmistakable — great-circle ellipses inscribed in one circle, turning tightly at the rim, plus a couple of tight little pole-loops near the right edge. That is a rotating sphere and nothing else. Pill size against distance-from-centre correlates NEGATIVE across every long track (big through the middle, small at the rim) and each tracked cursor's size cycles exactly once per loop, so the spin is one revolution per 10 seconds. THE PROJECTION IS ORTHOGRAPHIC — front-pass and back-pass turnaround radii come back identical, so depth never moves a cursor sideways; it shows up ONLY as scale (31px pills at the front of the 540 frame, 11px at the back, linear in z, a 2.8x range) and as opacity (full through the whole front half, ~40% mid-back, and the deepest four or five of the 26 simply gone — per-frame blob counts confirm it). THE RING IS A RED HERRING: it is not the sphere's silhouette. The swarm projects to ~195px while the ring breathes between 125px and 145px, two full cycles per loop — scanline-measured at dozens of frames, horizontal and vertical radii agreeing to the pixel, so it is a flat centred circle, ~2px of violet (#6B3EB5), and every cursor draws over it (verified on a frame where a back-side pill crosses the stroke and wins). Reading it as the sphere's edge under perspective fails the arithmetic: that ratio would put the camera 1.3 radii from centre, which forces a 7.6x front-to-back scale range, and the clip shows 2.8x — so ring and sphere are simply two different props. The axis is NOT fixed — the trajectory ellipses point every which way across the loop — but a 2D clip cannot return the exact axis path, so the tumble is the invented layer, kept fenced in the params file: two slow incommensurate sines (17s and 23s) nod and roll the spin axis, reproducing the same variety without ever visibly repeating. THE SPIN IS INTEGRATED FROM A PHRASED RATE, NOT DERIVED FROM t, and that change is what gives the motion intent. Summing a constant 10s revolution with two wobble sines means their ANGULAR VELOCITIES ADD: measured across the loop, an equator cursor ran at 0.76 units/s when a wobble happened to turn the same way as the spin and nearly FROZE at 0.012 when it opposed — a 64x swing with nothing deciding any of it, three unrelated oscillators beating against each other. So the angle is state now, advanced by a rate that is phrased over 27 seconds: a long calm drift, an eased build, a 1.9s whip at fifteen times drift speed, a settle, and a 3.2s HELD BEAT of near-stillness (a crawl, never a true stop — a dead stop reads as a stall or a dropped frame). The whip rides the same measured-curve language as the rest of the Vault, lazy wind-up into a violent middle into a long landing, through a monotone spline rather than a sine, because a sine accelerates and decelerates symmetrically and reads as a machine cycling. THE PHRASE IS BALANCED BACK TO THE REFERENCE: rates were tuned so the whole thing still averages 0.105 rev/s, a 9.5s revolution against the clip's measured 10.0s. A first cut with a longer, earlier whip averaged 0.164 — the sphere turned 64% faster than the thing it was traced from, which is exactly how a rebuild quietly becomes a different piece. Most of the phrase is now slower than the original constant and the whip buys its speed back out of that budget. THE SPHERE HAS MASS: the rate is pulled toward the phrase's target on an under-damped spring, so a fast pass carries slightly past and rings down instead of arriving on schedule. AND THE SWARM LAGS UNDER ACCELERATION — each cursor trails its own true position in proportion to how hard the globe is accelerating, scaled by depth so the front drags most, then snaps back as the whip settles; the sphere reads as carrying its passengers rather than as a rigid diagram of them. DRAG TO SPIN IT, RELEASE TO THROW IT: drag and the phrase feed THE SAME integrator, so nothing ever fights. Dragging drives the rate directly, releasing converts your hand's speed into a throw that decays into the phrase over about six seconds (one full extra revolution from a flick), and the phrase's own rate is suppressed while you are driving so what you feel is your throw rather than your throw plus the autopilot underneath. Because the angle is state, releasing does not yank the globe back to where a timeline says it should be — there is no such place. The live rate is SEEDED with the throw on release rather than left for the spring to chase, or the globe hesitates for half a second before taking off. Touch is included, but a gesture is only claimed once it is clearly more horizontal than vertical, so the page can still scroll. The cast is the reference's own 26 short names in its measured 8-hue palette; pill anatomy from 5x crops — corner radius 0.32 of pill height (a rounded rect, NOT a stadium), padding 0.42, label 0.47, the pointer 0.68 of pill height, tilted ~18 degrees with its TIP exactly on the sphere point and the pill hanging 0.55 below-right, with a visible gap. Depth sorting is honest — nearer pills genuinely cover farther ones, back-to-front every frame. HOVERING MUST NEVER MOVE THE COMPOSITION, and arriving at that rule cost more than anything else in this piece. There used to be a 'lean' that rotated the sphere's AXIS toward the pointer, and a lean does not nudge the swarm — it swings the entire constellation: at 0.22 rad a cursor at the sphere's edge travelled 49px and moving the pointer corner to corner swept the whole thing through 98px, 16% of the card's height. Tracked in a browser, swarm travel went from 26.9% of the card at idle to 70.4% with the pointer moving. Every fix attempted treated the symptom — shrink the angle, slow the ease, add an approach ramp, make the ramp isotropic — and each made the jump smaller without making it right, because the premise was wrong. ANY pointer-driven rotation of the axis relocates the composition, and a composition that relocates when you look at it will always read as a teleport. So the lean was deleted rather than tuned. Steering the globe is what DRAG is for; drag is explicit, so it is allowed to move things. What replaces it is ATTENTION: each cursor reacts to how close your pointer is to IT, so the effect is local and travels with you while the arrangement stays exactly where it was designed. Nearby cursors pull out of depth-of-field blur (the swarm RESOLVES around your pointer), faded back-side cursors come forward in opacity, each lifts a few percent in place, and its arrow turns to look at you — a cursor pointing at you being the most natural thing a cursor can do. Not one of those changes a position. TWO LAYERS SIT ON TOP OF THE REFERENCE, both fenced off from the measured numbers. THE BACK HALF IS DEFOCUSED, not just faded: scale and alpha alone are what the clip measured and they are correct, but they leave the far pills small, faint and perfectly SHARP, which reads as far-away-in-a-diagram rather than far away in a room. Blur ramps with depth from a focal plane parked AT THE FRONT of the sphere, and both halves of that sentence are load-bearing. A plane through the middle defocuses the near cap as hard as the far one — the one part of the swarm the eye is meant to read becomes the part being softened — and it also makes the blur curve non-monotonic, which is where the real artefact came from: the skip-the-filter threshold was first crossed at an already-visible 1.24px, so a cursor rotating through that depth POPPED from sharp to blurred in a single frame, over and over as the sphere turned. With focus at the front the ramp starts at zero and grows continuously, the threshold sits below perception, and the cutoff goes back to being what it was meant to be — not paying for a ctx.filter state change you cannot see. AND YOUR OWN POINTER JOINS THE CAST: hovering draws you as one more element in the swarm's exact anatomy — same arrow, same rounded pill, same proportions — labelled 'You' in a near-black that sits deliberately outside the reference's eight-hue palette, so you read as the odd one out rather than as one of the crowd. It is the one element NOT on the sphere: full size, always in focus, never faded, always on top, because you are in front of the globe rather than riding it. The real CSS cursor is hidden over the canvas, since two cursors on one surface reads as a bug rather than as a feature, and your drawn one chases the pointer with a hair of lag (0.22 per frame) — not 1:1, because the lag is exactly what makes it read as a tracked cursor in a shared room instead of a texture glued to the mouse — and the pointer is TRACKED ON THE WINDOW RATHER THAN THE CANVAS, which is the single most important line in the interaction. With the listener on the canvas the engine learned where you were only once you had ALREADY crossed the boundary — it went from 'no pointer' straight to a position well inside the card, with no history to ease from, so every hover-driven value had a real target on its very first frame. That is a step function no matter how small the magnitudes are: shrinking them makes the jump smaller and can never make it smooth. Watching the window means the card sees you APPROACHING, and engagement ramps from zero at about a card-height away to full at the edge, so by the time you arrive everything is already where it should be. THREE UNIT BUGS HID BEHIND THAT ONE, all of which hit a VERTICAL approach hardest because the card is 2.17:1. The proximity ramp is computed but must actually be USED — reduced to a boolean it collapses back into the step function it was written to remove, and everything gated on it then ramps on a time constant from the moment you come in range, which the short vertical axis has no room to finish. Pointer VELOCITY has to be normalised to the same square-fractions the positions already use: left as per-axis card fractions, the x component measures in widths and the y in heights, they get hypot'd together as if they matched, and identical hand movement reads 2.17x faster vertically — saturating both the wake gate and the force multiplier on an ordinary approach from below. And a SCROLL moves the card's rect under a stationary pointer, so the next event reports a jump of hundreds of pixels that becomes impossible hand speed unless the position is re-derived on scroll and the per-event gap is clamped. Every one of these easings is FRAME-RATE INDEPENDENT (exponential in dt, not a flat per-frame fraction) — a fixed fraction chases twice as fast on a 120Hz display, so the cursor's lag, the thing that makes it read as tracked rather than glued, would otherwise differ per monitor. Both the arrow and the pill are drawn by ONE shared element routine used by the swarm and by you alike, so the two can never drift apart in anatomy. THE SWARM'S VISUAL CENTRE IS NOT ITS SPHERE CENTRE, and this is the alignment bug worth naming: every cursor's TIP rides the sphere, but the pill hangs down-right of the tip, so the composition's mass lands 34px right and 22px below the ring on a 620px card — ring and swarm read as two things that were meant to be concentric and missed. The correction is SOLVED rather than eyeballed: the area-and-alpha-weighted centroid of every element's bounding box, averaged over a full spin, is linear in the sphere's offset, so sampling it at two offsets and inverting puts the centroid exactly on the ring (verified residual 0.00px). THE SWARM PARTS AROUND YOU LIKE A BOW WAVE, and getting there took throwing away the obvious version. SETTING POSITION DIRECTLY FROM DISTANCE IS THE TRAP: displacement as a pure function f(d) re-evaluated every frame looks like puppets snapping to a rule rather than objects being pushed, and every symptom traces to the same missing idea — the field had no MEMORY. Move fast and every nearby cursor TELEPORTED, because nothing accelerated; positions simply were whatever the formula said. Leave, and the hole closed as abruptly as it opened, with no settle. And a strictly radial push made the swarm INFLATE LIKE A BALLOON around the pointer instead of being swept aside by something moving through it. So the force became an ACCELERATION on a per-cursor spring — each carries its own offset and velocity, integrated on real clamped delta time — under-damped at zeta 0.55 so a cursor overshoots ~13% and rings down over about a second rather than sliding home. Heavier (nearer, bigger) cursors accelerate less, so depth changes HOW a cursor moves and not merely how far. Direction is a blend of straight-away-from-you and YOUR OWN DIRECTION OF TRAVEL, plus a signed perpendicular slip so cursors slide AROUND you: things ahead are swept forward and aside, things behind close in after you pass. The whole field is GATED ON POINTER SPEED — a parked cursor barely disturbs anything, because it is motion that displaces, and gating on it also means the card at rest looks exactly like the untouched reference. THE STANDING-FORCE FLOOR HAS TO BE NEARLY ZERO, which is not obvious until you feel it: a floor generous enough that proximity alone pushes means approaching the sphere displaces everything and then HOLDS it there, motionless but out of position — the swarm never settles, and a permanent shove reads as lag rather than as reaction. Dropped from a held 6.9px to 1.7px, so the push is something that happens and then resolves. The heading is held as SMOOTHED STATE rather than recomputed from instantaneous velocity: normalising a near-zero velocity yields a direction that swings wildly frame to frame, so the vector itself is eased and its own LENGTH carries the confidence — consistent motion builds a long vector, jitter cancels to a short one, and the wake fades back to pure radial as you slow without any separate trust factor to tune. THE FORCE MUST SCALE WITH SPEED OR THE RESPONSE COMES OUT BACKWARDS, which the numbers caught: at fixed force a moderate sweep displaced 26px while a fast flick displaced only 6px, because the pointer crossed the cursor's reach in a few frames and the same force over a tenth of the window delivers a tenth of the impulse. Scaling force with speed keeps the impulse roughly constant and puts a normal sweep at ~68px. The displacement cap is then sized to sit just ABOVE what a normal sweep produces — a cap that engages during ordinary use is not a safety rail, it is a flattened response curve. Verified stable and settling to exactly zero from 144fps down to 20fps. Displaced cursors also TURN a few degrees toward their own direction of travel — the shortest signed angle from the arrow's rest heading, scaled right down, because the reference's arrow never rotates at all — so the parting reads as people reacting rather than as sprites sliding. The offset is applied in SCREEN space, never to the sphere point: displacing the 3D position drags cursors through the globe and scrambles the depth sort. A VERY FAINT HUE WASH keeps the flat #fdfdfd from reading as dead canvas: two wide radial pools in the cast's own violet and teal, drifting on incommensurate 29s and 41s circuits at ~5% peak alpha, each fading to a TRANSPARENT STOP OF ITS OWN HUE rather than toward white — fading a colour to white leaves a pale halo ring where the two grounds disagree. The rule for this layer is that if you can name the colour without going looking for it, it is too strong. MINIMAL MULTILAYERING ON THE ELEMENTS, none of which touches the silhouette: a soft contact shadow set on the context rather than drawn as a blurred duplicate (one shadowed fill is far cheaper and stays perfectly registered to the shape), plus a clipped vertical gradient on the pill — a hairline of white along the top edge where the light is, fading out by mid-height, and a whisper of dark at the bottom — so the fill has a direction instead of being one flat chip. The shadow FADES OUT AS A PILL DEFOCUSES, because a blurred element carrying a crisp contact shadow reads as mud and the two blurs otherwise compound. Framework-free Canvas 2D, no assets, no library; DPR-capped at 2, pauses offscreen / when hidden / during route transitions, one static frame under reduced motion.

The complete, self-contained implementation follows, one file per block. It is framework-agnostic core logic — wire it into your own component and mount it on an element.

### orbit/params.ts
```ts
export const BG = "#fdfdfd";

export const RING_R_MIN = 0.2315;
export const RING_R_MAX = 0.2685;
export const RING_PERIOD = 5.0;
export const RING_STROKE = 0.0037;
export const RING_COLOR = "#6B3EB5";

export const SPHERE_R = 0.361;

export const SPIN_PERIOD = 10.0;

export const PILL_H_FRONT = 0.0574;
export const PILL_H_BACK = 0.0204;

export const FADE_FULL = -0.1;
export const FADE_GONE = -0.85;

export const PILL_RADIUS = 0.32;
export const PILL_PAD_X = 0.42;
export const FONT_K = 0.47;
export const ARROW_K = 0.68;
export const ARROW_TILT = -0.31;
export const TIP_GAP = 0.55;

export const CAST: [string, string][] = [
  ["Finn", "#7728DB"],
  ["Taya", "#7728DB"],
  ["Cole", "#7728DB"],
  ["Aria", "#9C45F2"],
  ["Quin", "#9C45F2"],
  ["Yael", "#C864DB"],
  ["Wynn", "#F37C31"],
  ["Dara", "#F37C31"],
  ["Nola", "#F37C31"],
  ["Rex", "#F37C31"],
  ["Xena", "#F34B4B"],
  ["Ulan", "#F34B4B"],
  ["Zane", "#F34B4B"],
  ["Pia", "#F34B4B"],
  ["Milo", "#31C67D"],
  ["Cade", "#31C67D"],
  ["Vera", "#31C67D"],
  ["Hana", "#31C67D"],
  ["Elmo", "#31C67D"],
  ["Sora", "#5677F2"],
  ["Seth", "#5677F2"],
  ["Gage", "#5677F2"],
  ["Abel", "#5677F2"],
  ["Jett", "#1FC4C9"],
  ["Beau", "#1FC4C9"],
  ["Hope", "#1FC4C9"],
];

export const TILT_BASE = 0.5;
export const WOBBLE_X_AMP = 0.45;
export const WOBBLE_X_PERIOD = 17;
export const WOBBLE_Z_AMP = 0.6;
export const WOBBLE_Z_PERIOD = 23;

export const PHRASE = 27;

export const RATE_DRIFT = 0.03;
export const RATE_WHIP = 0.45;

export const RATE_HOLD = 0.012;

export const BUILD_AT = 0.58;
export const WHIP_AT = 0.68;
export const WHIP_END = 0.75;
export const SETTLE_END = 0.88;

export const WHIP_E: [number, number][] = [
  [0, 0], [0.15, 0.03], [0.3, 0.14], [0.45, 0.42],
  [0.6, 0.76], [0.72, 0.91], [0.85, 0.975], [1, 1],
];

export const INERTIA_SPRING = 7.5;
export const INERTIA_DAMP = 3.6;

export const LAG_PER_ACCEL = 0.055;

export const LAG_RECOVER = 5.5;

export const DRAG_PER_REV = 1.15;

export const DRAG_TILT = 0.5;

export const DRAG_TILT_MAX = 0.3;

export const THROW_FRICTION = 1.25;

export const THROW_MAX = 1.6;

export const DRAG_YIELD = 1.8;

export const SWARM_OFF_X = -0.963;
export const SWARM_OFF_Y = -0.628;

export const DOF_FOCUS_Z = 1;

export const DOF_MAX = 0.006;

export const DOF_SLAB = 0.45;

export const YOU_NAME = "You";

export const YOU_COLOR = "#1b1b1b";

export const YOU_PILL_H = 0.064;

export const YOU_EASE = 0.22;

export const ATTN_RADIUS = 0.26;

export const ATTN_FOCUS = 0.85;

export const ATTN_LIFT = 0.14;

export const ATTN_LOOK = 0.5;

export const ATTN_RATE = 5;

export const POINTER_NEAR = 1.15;

export const YOU_FADE = 0.11;

export const MAG_RADIUS = 0.19;

export const MAG_FORCE = 5.2;

export const MAG_SPEED_GAIN = 2.6;

export const MAG_MASS_BIAS = 1.7;

export const MAG_SPRING = 46;
export const MAG_DAMP = 7.4;

export const MAG_MAX_OFF = 0.075;

export const MAG_WAKE = 0.55;

export const MAG_SLIP = 0.34;

export const MAG_SPEED_FULL = 0.85;

export const MAG_SPEED_MIN = 0.04;

export const ARROW_TURN_MAX = 0.14;

export const ARROW_TURN_AT = 0.5;

export const WASH_ALPHA = 0.055;
export const WASH_R = 0.62;
export const WASH_A_COLOR = "#7728DB";
export const WASH_B_COLOR = "#1FC4C9";
export const WASH_A_PERIOD = 29;
export const WASH_B_PERIOD = 41;

export const WASH_DRIFT = 0.26;

export const SHADOW_BLUR = 0.34;
export const SHADOW_Y = 0.12;
export const SHADOW_ALPHA = 0.16;

export const PILL_SHEEN = 0.15;

export const PILL_SHADE = 0.09;

```

### orbit/engine.ts
```ts
import {
  BG,
  RING_R_MIN,
  RING_R_MAX,
  RING_PERIOD,
  RING_STROKE,
  RING_COLOR,
  SPHERE_R,
  PILL_H_FRONT,
  PILL_H_BACK,
  FADE_FULL,
  FADE_GONE,
  PILL_RADIUS,
  PILL_PAD_X,
  FONT_K,
  ARROW_K,
  ARROW_TILT,
  TIP_GAP,
  CAST,
  TILT_BASE,
  WOBBLE_X_AMP,
  WOBBLE_X_PERIOD,
  WOBBLE_Z_AMP,
  WOBBLE_Z_PERIOD,
  ATTN_RADIUS,
  ATTN_FOCUS,
  ATTN_LIFT,
  ATTN_LOOK,
  ATTN_RATE,
  DOF_FOCUS_Z,
  DOF_MAX,
  DOF_SLAB,
  SWARM_OFF_X,
  SWARM_OFF_Y,
  YOU_NAME,
  YOU_COLOR,
  YOU_PILL_H,
  YOU_EASE,
  YOU_FADE,
  POINTER_NEAR,
  MAG_RADIUS,
  MAG_FORCE,
  MAG_SPEED_GAIN,
  MAG_MASS_BIAS,
  MAG_SPRING,
  MAG_DAMP,
  MAG_MAX_OFF,
  MAG_WAKE,
  MAG_SLIP,
  MAG_SPEED_FULL,
  MAG_SPEED_MIN,
  ARROW_TURN_MAX,
  ARROW_TURN_AT,
  PHRASE,
  RATE_DRIFT,
  RATE_WHIP,
  RATE_HOLD,
  BUILD_AT,
  WHIP_AT,
  WHIP_END,
  SETTLE_END,
  WHIP_E,
  INERTIA_SPRING,
  INERTIA_DAMP,
  LAG_PER_ACCEL,
  LAG_RECOVER,
  DRAG_PER_REV,
  DRAG_TILT,
  DRAG_TILT_MAX,
  THROW_FRICTION,
  THROW_MAX,
  DRAG_YIELD,
  WASH_ALPHA,
  WASH_R,
  WASH_A_COLOR,
  WASH_B_COLOR,
  WASH_A_PERIOD,
  WASH_B_PERIOD,
  WASH_DRIFT,
  SHADOW_BLUR,
  SHADOW_Y,
  SHADOW_ALPHA,
  PILL_SHEEN,
  PILL_SHADE,
} from "./params";

const ARROW_PATH =
  "M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L5.94 2.47a.5.5 0 0 0-.44.74Z";
const TIP_X = 5.5;
const TIP_Y = 3.21;

interface Node {
  name: string;
  color: string;

  bx: number;
  by: number;
  bz: number;

  x: number;
  y: number;
  z: number;
  labelW: number;

  ox: number;
  oy: number;
  vx: number;
  vy: number;

  lag: number;

  attn: number;
}

function lcg(seed: number) {
  let s = seed >>> 0;
  return () => {
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 0xffffffff;
  };
}

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
const smooth = (v: number) => v * v * (3 - 2 * v);
const lerp = (a: number, b: number, k: number) => a + (b - a) * k;

function spline(pts: [number, number][]): (k: number) => number {
  const n = pts.length;
  const xs = pts.map((p) => p[0]);
  const ys = pts.map((p) => p[1]);
  const dx: number[] = [];
  const s: number[] = [];
  for (let i = 0; i < n - 1; i++) {
    dx.push(xs[i + 1] - xs[i]);
    s.push((ys[i + 1] - ys[i]) / dx[i]);
  }
  const m: number[] = [s[0]];
  for (let i = 1; i < n - 1; i++) {
    if (s[i - 1] * s[i] <= 0) m.push(0);
    else {
      const w1 = 2 * dx[i] + dx[i - 1];
      const w2 = dx[i] + 2 * dx[i - 1];
      m.push((w1 + w2) / (w1 / s[i - 1] + w2 / s[i]));
    }
  }
  m.push(s[n - 2]);
  return (k: number) => {
    if (k <= 0) return ys[0];
    if (k >= 1) return ys[n - 1];
    let i = 0;
    while (i < n - 2 && xs[i + 1] < k) i++;
    const h = dx[i];
    const u = (k - xs[i]) / h;
    const u2 = u * u;
    const u3 = u2 * u;
    return (
      ys[i] * (2 * u3 - 3 * u2 + 1) +
      m[i] * h * (u3 - 2 * u2 + u) +
      ys[i + 1] * (-2 * u3 + 3 * u2) +
      m[i + 1] * h * (u3 - u2)
    );
  };
}

const whipE = spline(WHIP_E);

function phraseRate(p: number): number {
  if (p < BUILD_AT) return RATE_DRIFT;
  if (p < WHIP_AT) {

    const k = (p - BUILD_AT) / (WHIP_AT - BUILD_AT);
    return lerp(RATE_DRIFT, RATE_WHIP, whipE(k));
  }
  if (p < WHIP_END) return RATE_WHIP;
  if (p < SETTLE_END) {

    const k = (p - WHIP_END) / (SETTLE_END - WHIP_END);
    return lerp(RATE_WHIP, RATE_HOLD, whipE(k));
  }

  const k = (p - SETTLE_END) / (1 - SETTLE_END);
  return lerp(RATE_HOLD, RATE_DRIFT, smooth(k));
}

function rgbOf(hex: string) {
  const h = hex.replace("#", "");
  const n = parseInt(h, 16);
  return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`;
}

export class Orbit {
  ok = false;

  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D | null;
  private nodes: Node[] = [];
  private arrow = new Path2D(ARROW_PATH);
  private fontFamily = "sans-serif";

  private raf = 0;
  private running = false;
  private disposed = false;
  private t0 = 0;

  private W = 0;
  private H = 0;
  private dpr = 1;

  private near = 0;

  private youX = 0.5;
  private youY = 0.5;
  private youTX = 0.5;
  private youTY = 0.5;
  private youAlpha = 0;
  private youLabelW = 0;

  private entering = false;

  private seen = false;

  private youVX = 0;
  private youVY = 0;

  private dirX = 0;
  private dirY = 0;
  private lastT = 0;

  private spin = 0;
  private spinRate = 0;
  private throwRate = 0;
  private lastRate = 0;
  private accel = 0;
  private dragTilt = 0;

  private dragging = false;
  private dragX = 0;
  private dragY = 0;
  private dragVX = 0;
  private yieldFor = 0;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    if (!this.ctx) return;
    this.ok = true;
    this.t0 = performance.now();

    const rand = lcg(20260815);
    const n = CAST.length;
    const golden = Math.PI * (3 - Math.sqrt(5));
    this.nodes = CAST.map(([name, color], i) => {
      const y = 1 - ((i + 0.5) / n) * 2;
      const r = Math.sqrt(Math.max(0, 1 - y * y));
      const a = golden * i + (rand() - 0.5) * 0.9;
      const tiltJitter = (rand() - 0.5) * 0.35;
      const px = Math.cos(a) * r;
      const py = y + tiltJitter * r * 0.3;
      const pz = Math.sin(a) * r;
      const len = Math.hypot(px, py, pz) || 1;
      return {
        name,
        color,
        bx: px / len,
        by: py / len,
        bz: pz / len,
        x: 0,
        y: 0,
        z: 0,
        labelW: 0,
        ox: 0,
        oy: 0,
        vx: 0,
        vy: 0,
        lag: 0,
        attn: 0,
      };
    });

    this.measureLabels();
    this.resize();
  }

  setFont(family: string) {
    this.fontFamily = family;
    this.measureLabels();
    if (!this.running && !this.disposed) this.renderStill();
  }

  private measureLabels() {
    const ctx = this.ctx;
    if (!ctx) return;
    ctx.font = `600 100px ${this.fontFamily}`;
    for (const node of this.nodes) node.labelW = ctx.measureText(node.name).width;
    this.youLabelW = ctx.measureText(YOU_NAME).width;
  }

  resize() {
    const rect = this.canvas.getBoundingClientRect();
    if (!rect.width || !rect.height) return;
    this.dpr = Math.min(window.devicePixelRatio || 1, 2);
    this.W = rect.width;
    this.H = rect.height;
    this.canvas.width = Math.round(rect.width * this.dpr);
    this.canvas.height = Math.round(rect.height * this.dpr);
    if (!this.running) this.renderStill();
  }

  setPointer(p: { x: number; y: number } | null) {
    if (!p) {
      this.near = 0;
      this.youAlpha = 0;
      return;
    }

    const S = this.H || 1;
    const outX = Math.max(0, -p.x, p.x - 1) * (this.W || 1);
    const outY = Math.max(0, -p.y, p.y - 1) * S;
    const outside = Math.hypot(outX, outY) / S;
    this.near = 1 - smooth(clamp01(outside / POINTER_NEAR));
    this.youTX = p.x;
    this.youTY = p.y;

    if (!this.seen) {
      this.youX = p.x;
      this.youY = p.y;
      this.youVX = 0;
      this.youVY = 0;
      this.entering = true;
      this.seen = true;
    }
  }

  dragStart(p: { x: number; y: number }) {
    this.dragging = true;
    this.dragX = p.x;
    this.dragY = p.y;
    this.dragVX = 0;
  }

  dragMove(p: { x: number; y: number }, dt: number) {
    if (!this.dragging) return;
    const dx = p.x - this.dragX;
    const dy = p.y - this.dragY;
    this.dragX = p.x;
    this.dragY = p.y;

    const want = clamp01(dt) > 0 ? dx / DRAG_PER_REV / Math.max(dt, 1 / 240) : 0;
    this.dragVX += (Math.max(-THROW_MAX, Math.min(THROW_MAX, want)) - this.dragVX) * 0.35;
    this.dragTilt = Math.max(
      -DRAG_TILT_MAX,
      Math.min(DRAG_TILT_MAX, this.dragTilt + dy * DRAG_TILT),
    );
  }

  dragEnd() {
    if (!this.dragging) return;
    this.dragging = false;
    this.throwRate = Math.max(-THROW_MAX, Math.min(THROW_MAX, this.dragVX));

    this.spinRate = this.throwRate;
    this.yieldFor = DRAG_YIELD;
  }

  start() {
    if (this.running || this.disposed || !this.ok) return;
    this.running = true;

    this.lastT = (performance.now() - this.t0) / 1000;
    this.raf = requestAnimationFrame(this.loop);
  }

  stop() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  renderStill() {

    this.draw(2.6);
  }

  destroy() {
    this.disposed = true;
    this.stop();
  }

  private loop = () => {
    if (!this.running) return;
    const t = (performance.now() - this.t0) / 1000;

    const dt = Math.min(Math.max(t - this.lastT, 1 / 240), 1 / 20);
    this.lastT = t;

    if (!this.dragging && this.dragTilt !== 0) {
      this.dragTilt += (0 - this.dragTilt) * (1 - Math.exp(-dt * 0.6));
      if (Math.abs(this.dragTilt) < 1e-4) this.dragTilt = 0;
    }

    const pxPrev = this.youX;
    const pyPrev = this.youY;

    const chase = 1 - Math.exp(-dt * YOU_EASE * 60);
    const fade = 1 - Math.exp(-dt * YOU_FADE * 60);

    this.youX += (this.youTX - this.youX) * chase;
    this.youY += (this.youTY - this.youY) * chase;

    this.youAlpha += (this.near - this.youAlpha) * fade;

    void pxPrev;
    void pyPrev;
    if (this.entering) {
      this.entering = false;
      this.youVX = 0;
      this.youVY = 0;
    } else {

      const S = this.H || 1;
      const gapX = ((this.youTX - this.youX) * (this.W || 1)) / S;
      const gapY = this.youTY - this.youY;

      const k = YOU_EASE * 60;
      const vSmooth = 1 - Math.exp(-dt * 9);

      const gl = Math.hypot(gapX, gapY);
      const gk = gl > 0.5 ? 0.5 / gl : 1;
      this.youVX += (gapX * gk * k - this.youVX) * vSmooth;
      this.youVY += (gapY * gk * k - this.youVY) * vSmooth;
    }

    this.spinStep(dt, t);
    this.step(dt);
    this.draw(t);
    this.raf = requestAnimationFrame(this.loop);
  };

  private rotate(t: number) {

    const spin = this.spin;

    const tiltX =
      TILT_BASE +
      WOBBLE_X_AMP * Math.sin((t / WOBBLE_X_PERIOD) * Math.PI * 2) +
      this.dragTilt;
    const rotZ = WOBBLE_Z_AMP * Math.sin((t / WOBBLE_Z_PERIOD) * Math.PI * 2);
    const sx = Math.sin(tiltX), cxn = Math.cos(tiltX);
    const sz = Math.sin(rotZ), czn = Math.cos(rotZ);

    for (const node of this.nodes) {

      const own = spin - node.lag;
      const so = Math.sin(own);
      const co = Math.cos(own);

      const x1 = node.bx * co + node.bz * so;
      const y1 = node.by;
      const z1 = -node.bx * so + node.bz * co;

      const x2 = x1;
      const y2 = y1 * cxn - z1 * sx;
      const z2 = y1 * sx + z1 * cxn;

      node.x = x2 * czn - y2 * sz;
      node.y = x2 * sz + y2 * czn;
      node.z = z2;
    }
  }

  private spinStep(dt: number, t: number) {

    const p = ((t / PHRASE) % 1 + 1) % 1;
    const yieldK = this.dragging ? 0 : clamp01(1 - this.yieldFor / DRAG_YIELD);
    const target = phraseRate(p) * yieldK;

    if (this.dragging) {

      this.spinRate = this.dragVX;
      this.throwRate = this.dragVX;
    } else {

      this.throwRate += (0 - this.throwRate) * clamp01(THROW_FRICTION * dt);
      const err = target + this.throwRate - this.spinRate;
      this.spinRate += err * clamp01(INERTIA_SPRING * dt);

      this.spinRate -= (this.spinRate - target - this.throwRate) *
        clamp01(INERTIA_DAMP * dt) * 0.35;
      if (this.yieldFor > 0) this.yieldFor = Math.max(0, this.yieldFor - dt);
    }

    const raw = (this.spinRate - this.lastRate) / dt;
    this.lastRate = this.spinRate;
    this.accel += (raw - this.accel) * clamp01(dt * 8);

    this.spin += this.spinRate * Math.PI * 2 * dt;

    if (this.spin > Math.PI * 2) this.spin -= Math.PI * 2;
    if (this.spin < 0) this.spin += Math.PI * 2;
  }

  private step(dt: number) {
    if (!this.W || !this.H) return;
    const S = this.H;
    const off = PILL_H_FRONT * S;
    const sx0 = this.W / 2 + SWARM_OFF_X * off;
    const sy0 = this.H / 2 + SWARM_OFF_Y * off;
    const R = SPHERE_R * S;

    const pxF = (this.youX * this.W) / S;
    const pyF = (this.youY * this.H) / S;
    const speed = Math.hypot(this.youVX, this.youVY);

    const wake =
      this.youAlpha *
      (MAG_SPEED_MIN +
        (1 - MAG_SPEED_MIN) * smooth(clamp01(speed / MAG_SPEED_FULL)));

    const dirLen = speed > 1e-4 ? speed : 0;
    const tx = dirLen ? this.youVX / dirLen : 0;
    const ty = dirLen ? this.youVY / dirLen : 0;
    const dirK = 1 - Math.exp(-dt * 6);
    this.dirX += (tx * clamp01(speed / (MAG_SPEED_FULL * 0.5)) - this.dirX) * dirK;
    this.dirY += (ty * clamp01(speed / (MAG_SPEED_FULL * 0.5)) - this.dirY) * dirK;
    const dirTrust = Math.min(1, Math.hypot(this.dirX, this.dirY));
    const hx = dirTrust > 1e-4 ? this.dirX / Math.hypot(this.dirX, this.dirY) : 0;
    const hy = dirTrust > 1e-4 ? this.dirY / Math.hypot(this.dirX, this.dirY) : 0;

    for (const node of this.nodes) {

      const depthK = (node.z + 1) * 0.5;
      const lagTarget = -this.accel * LAG_PER_ACCEL * depthK;
      node.lag += (lagTarget - node.lag) * clamp01(LAG_RECOVER * dt);

      const rx = (sx0 + node.x * R) / S;
      const ry = (sy0 + node.y * R) / S;

      const dx = rx + node.ox - pxF;
      const dy = ry + node.oy - pyF;
      const d = Math.hypot(dx, dy);

      const want = this.youAlpha * (1 - smooth(clamp01(d / ATTN_RADIUS)));
      node.attn += (want - node.attn) * clamp01(ATTN_RATE * dt);

      let ax = 0;
      let ay = 0;
      if (wake > 0.001 && d < MAG_RADIUS) {
        const f = smooth(1 - d / MAG_RADIUS) ** 2;

        const ux = d > 1e-4 ? dx / d : 0.7;
        const uy = d > 1e-4 ? dy / d : 0.7;

        const w = MAG_WAKE * dirTrust;
        const mx = ux * (1 - w) + hx * w;
        const my = uy * (1 - w) + hy * w;

        const side = (Math.sign(hx * uy - hy * ux) || 1) * MAG_SLIP * dirTrust;
        const bx = mx - my * side;
        const by = my + mx * side;
        const bl = Math.hypot(bx, by) || 1;

        const mass = 1 + (MAG_MASS_BIAS - 1) * (node.z + 1) * 0.5;

        const gain = 1 + MAG_SPEED_GAIN * clamp01(speed / MAG_SPEED_FULL);
        const a = (f * MAG_FORCE * wake * gain) / mass;
        ax = (bx / bl) * a;
        ay = (by / bl) * a;
      }

      ax -= MAG_SPRING * node.ox + MAG_DAMP * node.vx;
      ay -= MAG_SPRING * node.oy + MAG_DAMP * node.vy;

      node.vx += ax * dt;
      node.vy += ay * dt;
      node.ox += node.vx * dt;
      node.oy += node.vy * dt;

      const ol = Math.hypot(node.ox, node.oy);
      if (ol > MAG_MAX_OFF) {
        const s = MAG_MAX_OFF / ol;
        node.ox *= s;
        node.oy *= s;

        const vr = node.vx * (node.ox / ol) + node.vy * (node.oy / ol);
        if (vr > 0) {
          node.vx -= vr * (node.ox / ol);
          node.vy -= vr * (node.oy / ol);
        }
      }
    }
  }

  private draw(t: number) {
    const ctx = this.ctx;
    if (!ctx || !this.W || !this.H) return;
    const { W, H } = this;
    const S = H;
    const cx = W / 2;
    const cy = H / 2;

    ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, W, H);

    this.wash(cx, cy, S, t, WASH_A_COLOR, WASH_A_PERIOD, 0);
    this.wash(cx, cy, S, t, WASH_B_COLOR, WASH_B_PERIOD, 2.1);

    const off = PILL_H_FRONT * S;
    const sx0 = cx + SWARM_OFF_X * off;
    const sy0 = cy + SWARM_OFF_Y * off;

    const breath = 0.5 - 0.5 * Math.cos((t / RING_PERIOD) * Math.PI * 2);
    const ringR = (RING_R_MIN + (RING_R_MAX - RING_R_MIN) * breath) * S;
    ctx.beginPath();
    ctx.arc(cx, cy, ringR, 0, Math.PI * 2);
    ctx.strokeStyle = RING_COLOR;
    ctx.lineWidth = Math.max(1.25, RING_STROKE * S);
    ctx.stroke();

    this.rotate(t);

    const order = [...this.nodes].sort((a, b) => a.z - b.z);

    const R = SPHERE_R * S;
    let filtered = false;

    let lastBlur = -1;
    for (const node of order) {

      const depthAlpha = smooth(
        clamp01((node.z - FADE_GONE) / (FADE_FULL - FADE_GONE)),
      );
      const alpha = depthAlpha + (1 - depthAlpha) * 0.8 * node.attn;
      if (alpha < 0.02) continue;

      const h =
        (PILL_H_BACK + (PILL_H_FRONT - PILL_H_BACK) * (node.z + 1) * 0.5) *
        S *
        (1 + ATTN_LIFT * node.attn);

      const px = sx0 + node.x * R + node.ox * S;
      const py = sy0 + node.y * R + node.oy * S;

      const vs = Math.hypot(node.vx, node.vy);
      let turn = 0;
      if (vs > 1e-3) {

        let d = Math.atan2(node.vy, node.vx) - ARROW_TILT;
        d = Math.atan2(Math.sin(d), Math.cos(d));
        turn = Math.max(-1, Math.min(1, d / Math.PI)) *
          ARROW_TURN_MAX *
          smooth(clamp01(vs / ARROW_TURN_AT));
      }

      if (node.attn > 0.01) {
        let la = Math.atan2(this.youY * H - py, this.youX * W - px) - ARROW_TILT;
        la = Math.atan2(Math.sin(la), Math.cos(la));
        turn += Math.max(-1, Math.min(1, la / Math.PI)) * ATTN_LOOK * node.attn;
      }

      const defocus = Math.max(0, Math.abs(node.z - DOF_FOCUS_Z) - DOF_SLAB);

      const rawBlur =
        (defocus / (1 + DOF_FOCUS_Z - DOF_SLAB)) * DOF_MAX * S *
        (1 - ATTN_FOCUS * node.attn);

      const step = Math.round(rawBlur / 0.5) * 0.5;
      const blurPx = step;
      if (step >= 0.5) {
        if (step !== lastBlur) {
          ctx.filter = `blur(${step}px)`;
          lastBlur = step;
        }
        filtered = true;
      } else if (filtered) {
        ctx.filter = "none";
        lastBlur = 0;
        filtered = false;
      }

      ctx.globalAlpha = alpha;

      this.element(
        px,
        py,
        h,
        node.color,
        node.name,
        node.labelW,
        1 - clamp01(blurPx / 2),
        turn,
      );
    }
    ctx.globalAlpha = 1;
    if (filtered) ctx.filter = "none";

    const inside =
      this.youX > -0.02 && this.youX < 1.02 && this.youY > -0.02 && this.youY < 1.02;
    if (inside && this.youAlpha > 0.01) {
      ctx.globalAlpha = this.youAlpha;
      this.element(
        this.youX * W,
        this.youY * H,
        YOU_PILL_H * S,
        YOU_COLOR,
        YOU_NAME,
        this.youLabelW,
      );
      ctx.globalAlpha = 1;
    }
  }

  private wash(
    cx: number,
    cy: number,
    S: number,
    t: number,
    color: string,
    period: number,
    phase: number,
  ) {
    const ctx = this.ctx!;
    const a = (t / period) * Math.PI * 2 + phase;

    const px = cx + Math.cos(a) * WASH_DRIFT * S;
    const py = cy + Math.sin(a * 1.37 + phase) * WASH_DRIFT * S * 0.7;
    const r = WASH_R * S;
    const rgb = rgbOf(color);
    const g = ctx.createRadialGradient(px, py, 0, px, py, r);
    g.addColorStop(0, `rgba(${rgb},${WASH_ALPHA})`);
    g.addColorStop(1, `rgba(${rgb},0)`);
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, this.W, this.H);
  }

  private element(
    px: number,
    py: number,
    h: number,
    color: string,
    name: string,
    labelW: number,
    depth = 1,
    turn = 0,
  ) {
    const ctx = this.ctx!;
    const fontPx = FONT_K * h;
    const textW = (fontPx / 100) * labelW;
    const pw = textW + 2 * PILL_PAD_X * h;
    const x0 = px + TIP_GAP * h;
    const y0 = py + TIP_GAP * h;
    const rad = PILL_RADIUS * h;

    ctx.save();
    if (depth > 0.75) {
      ctx.shadowColor = `rgba(0,0,0,${SHADOW_ALPHA * depth})`;
      ctx.shadowBlur = SHADOW_BLUR * h;
      ctx.shadowOffsetY = SHADOW_Y * h;
    }

    ctx.fillStyle = color;
    const ah = ARROW_K * h;
    const k = ah / 24;
    ctx.save();
    ctx.translate(px, py);
    ctx.rotate(ARROW_TILT + turn);
    ctx.scale(k, k);
    ctx.translate(-TIP_X, -TIP_Y);
    ctx.fill(this.arrow);
    ctx.restore();

    ctx.beginPath();
    ctx.roundRect(x0, y0, pw, h, rad);
    ctx.fill();
    ctx.restore();

    ctx.save();
    ctx.beginPath();
    ctx.roundRect(x0, y0, pw, h, rad);
    ctx.clip();
    const shade = ctx.createLinearGradient(0, y0, 0, y0 + h);
    shade.addColorStop(0, `rgba(255,255,255,${PILL_SHEEN})`);
    shade.addColorStop(0.45, "rgba(255,255,255,0)");
    shade.addColorStop(1, `rgba(0,0,0,${PILL_SHADE})`);
    ctx.fillStyle = shade;
    ctx.fillRect(x0, y0, pw, h);
    ctx.restore();

    ctx.fillStyle = "#fff";
    ctx.font = `600 ${fontPx}px ${this.fontFamily}`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(name, x0 + pw / 2, y0 + h * 0.54);
  }
}

```

### orbit/OrbitCard.tsx
```ts
"use client";

import { useEffect, useRef } from "react";
import { Orbit } from "./engine";
import { onTransitionChange } from "../../lib/view-transition";

export function OrbitCard({
  bare = false,
  viewTransitionName,
}: {
  bare?: boolean;
  viewTransitionName?: string;
} = {}) {
  void bare;
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    let engine: Orbit | null = null;
    let onScreen = false;
    let hidden = false;
    let inTransition = false;

    const sync = () => {
      if (!engine || reduced) return;
      if (onScreen && !hidden && !inTransition) engine.start();
      else engine.stop();
    };

    const raf = requestAnimationFrame(() => {
      if (!canvasRef.current) return;
      engine = new Orbit(canvas);
      if (!engine.ok) return;
      if (reduced) engine.renderStill();
      else sync();

      if (document.fonts?.load) {
        const probe = document.createElement("span");
        probe.style.cssText = "position:absolute;visibility:hidden";
        probe.style.fontFamily = "var(--font-neue-montreal)";
        probe.textContent = "Ag";
        document.body.appendChild(probe);
        const fam = getComputedStyle(probe)
          .fontFamily.split(",")[0]
          .replace(/["']/g, "")
          .trim();
        probe.remove();
        if (fam) {
          document.fonts
            .load(`600 1em "${fam}"`)
            .then(() => engine?.setFont(`"${fam}", sans-serif`), () => {});
        }
      }
    });

    const io = new IntersectionObserver(
      (es) => {
        onScreen = es[0]?.isIntersecting ?? false;
        sync();
      },
      { threshold: 0.2 },
    );
    io.observe(canvas);

    const onVis = () => {
      hidden = document.hidden;
      sync();
    };
    document.addEventListener("visibilitychange", onVis);
    const offTransition = onTransitionChange((active) => {
      inTransition = active;
      sync();
    });

    let rt = 0;
    const onResize = () => {
      window.clearTimeout(rt);
      rt = window.setTimeout(() => engine?.resize(), 120);
    };
    window.addEventListener("resize", onResize);

    let lastClientX = 0;
    let lastClientY = 0;
    let havePointer = false;

    const push = () => {
      if (!havePointer) return;
      const r = canvas.getBoundingClientRect();
      if (!r.width || !r.height) return;
      engine?.setPointer({
        x: (lastClientX - r.left) / r.width,
        y: (lastClientY - r.top) / r.height,
      });
    };

    const onMove = (e: PointerEvent) => {
      if (e.pointerType !== "mouse") return;
      lastClientX = e.clientX;
      lastClientY = e.clientY;
      havePointer = true;
      push();
    };
    const onScroll = () => push();
    const onLeave = () => {
      engine?.setPointer(null);
      engine?.dragEnd();
    };
    window.addEventListener("pointermove", onMove, { passive: true });
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("blur", onLeave);

    let dragT = 0;
    let claimed = false;
    let startX = 0;
    let startY = 0;
    const frac = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect();
      if (!r.width || !r.height) return null;
      return { x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height };
    };
    const onDown = (e: PointerEvent) => {
      const p = frac(e);
      if (!p) return;
      startX = p.x;
      startY = p.y;
      claimed = e.pointerType === "mouse";
      dragT = performance.now();
      if (claimed) {
        canvas.setPointerCapture(e.pointerId);
        engine?.dragStart(p);
      }
    };
    const onDrag = (e: PointerEvent) => {
      const p = frac(e);
      if (!p) return;
      if (!claimed) {

        const dx = Math.abs(p.x - startX);
        const dy = Math.abs(p.y - startY);
        if (dx < 0.02 && dy < 0.02) return;
        if (dx <= dy) return;
        claimed = true;
        canvas.setPointerCapture(e.pointerId);
        engine?.dragStart({ x: startX, y: startY });
      }
      const now = performance.now();
      const dt = Math.min(Math.max((now - dragT) / 1000, 1 / 240), 0.1);
      dragT = now;
      engine?.dragMove(p, dt);
      e.preventDefault();
    };
    const onUp = (e: PointerEvent) => {
      if (claimed && canvas.hasPointerCapture(e.pointerId)) {
        canvas.releasePointerCapture(e.pointerId);
      }
      claimed = false;
      engine?.dragEnd();
    };
    canvas.addEventListener("pointerdown", onDown);
    canvas.addEventListener("pointermove", onDrag);
    canvas.addEventListener("pointerup", onUp);
    canvas.addEventListener("pointercancel", onUp);

    return () => {
      cancelAnimationFrame(raf);
      io.disconnect();
      document.removeEventListener("visibilitychange", onVis);
      offTransition();
      window.removeEventListener("resize", onResize);
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("blur", onLeave);
      canvas.removeEventListener("pointerdown", onDown);
      canvas.removeEventListener("pointermove", onDrag);
      canvas.removeEventListener("pointerup", onUp);
      canvas.removeEventListener("pointercancel", onUp);
      window.clearTimeout(rt);
      engine?.destroy();
    };
  }, []);

  return (
    <div
      data-canvas-card
      role="img"
      aria-label="Twenty-six named multiplayer cursors circling on an invisible sphere, growing and sharpening as they pass the front, blurring and fading as they slip behind, around a thin violet ring that slowly breathes. Now and then one of them types, clicks, or nudges itself a little off course."
      style={viewTransitionName ? { viewTransitionName } : undefined}
      className="relative mx-auto aspect-[1344/620] w-full cursor-grab select-none overflow-hidden rounded-[12px] border border-[var(--border-line)] bg-[#fdfdfd] active:cursor-grabbing"
    >
      {}
      <canvas ref={canvasRef} className="h-full w-full cursor-none" />
    </div>
  );
}

```