Glass type

Build this: three kinetic-type scenes taking turns through ONE ripple lens — high-contrast serif type on white paper: a line rising bottom-to-top and unrolling to readable, a hand-drawn glass ball swapping two words inside its boiling outline, and single words conveying right-to-left through a magnifying wave. THE ONE MECHANISM, and finding it was the whole job: a radial PINCUSHION lens — magnification grows toward the rim — with a sine ripple riding on the radius, and the typeset content simply MOVING through that field. Nothing is animated per letter anywhere. The first scene's entry arch, its melted edge glyphs, the ball's concentric rim echoes and the third scene's wavy baselines are not four effects; they are one formula, mag = 1 + str*rn^pow + rip*sin(2*pi*r/wave - phase) * smoothstep(rim0, 1, rn), sampled as src = centre + q/mag - offset. Read that line and every visible behaviour follows from it. THE ECHOES ARE A FOLD, NOT A REPEAT: where the ripple is strong enough near the rim, the mapping becomes non-monotonic in radius and the same glyphs get sampled several times over, which is why the ball wears concentric arcs of its own word. Nothing draws those arcs. THE TYPE NEVER ANIMATES. It is rasterised ONCE per word to a texture and only a content offset moves, driven by per-frame tables. That is the structural decision the whole piece rests on: it means the distortion is doing all the work, it means a word costs one upload rather than one layout per frame, and it means the motion tables can be a MEASUREMENT rather than an authored curve. Per-frame ink bounding boxes and per-column ink profiles were extracted across all frames, and the resulting tables ship verbatim — which is why the timing carries slop no hand-drawn easing would have: a fast entry, a long readable dwell of about 0.008 of the frame per frame, a hard accelerating exit, and a dwell that settles slightly LEFT of centre rather than on it. That offset is real; do not tidy it. RASTERISE ABOVE FINAL SIZE. The lens MAGNIFIES this texture — up to 2.4x at the first scene's rim — so drawing the word at its final size means the most distorted glyphs are upsampled from detail that was never there, and the melted edge letters resolve as soft pixels instead of as ink. Draw at 2x and let the GPU minify; the shader works in normalised source coordinates, so nothing downstream needs to know. THE LENS IS CHROMATIC. Real glass disperses, so the three channels are given slightly different magnifications — implemented as a per-channel scale on the pincushion term, because dispersion is a difference in how hard the glass BENDS each wavelength, not an RGB offset pasted on afterwards. Scale it by normalised radius so the fringe lives at the rim where the distortion already peaks and the centre stays neutral, since that is where the type has to stay readable. About 3-5px of red-to-blue split at the rim is plenty; push it and a typographic study becomes a 3D-glasses gag. WHAT WAS TRIED AND CUT, because it is the more useful half: caustics and a refracted shadow. Both are physically correct — where the ripple folds, the derivative of the magnification collapses, which is exactly where rays bunch and light concentrates; and a real glass ball throws a displaced softened shadow on the paper under it. Both were implemented, and both were wrong, because this composition is BLACK INK ON WHITE PAPER with no light source in it. There is nothing to concentrate and nothing to cast. What they actually produced was manufactured grey structure — concentric rings and a wash inside the ball — in a piece whose entire character is clean white. The card is a DRAWING of glass, not a render of one, and grey belongs nowhere in it. If you are tempted by either, that is the reason not to. (The caustics also failed quietly first: normalised against the lens radius the exponent ran into the hundreds and the band collapsed to a measured peak of 0.001 against a strength of 0.55 — the layer was doing nothing at all, and the correct scale was the ripple's own wavelength. Worth knowing that a physically-motivated layer can be both mis-scaled AND unwanted.) HOVER CARRIES THE LENS. The centre normally sits at the frame centre; hovering eases it toward the pointer, so you are moving the GLASS over a page that keeps doing its own thing underneath — the type never moves, the scenes never scrub. Snap the eased centre on the frame the pointer first appears or the lens visibly flies in from wherever it was left. Mouse only: a touch would strand the glass where the finger lifted. THE FACE MATTERS MORE THAN IT LOOKS. A high-contrast serif — hairline horizontals against thick stems — is what gives the lens something to chew on: the thin strokes break up and smear at the rim while the stems hold their shape. A monoline face distorts uniformly and the effect has nothing to say. Load the real face at runtime and re-upload the raster when it arrives, since a cached texture will otherwise keep the fallback forever; and never ask a single-weight face for bold, because the synthesised weight smears exactly the hairlines the lens exists to reveal. The ball's outline is its own small piece of craft: a circle whose radius wobbles on three angular harmonics at different speeds, stroked with a weight that breathes around the circumference, and its time STEPPED to about 12fps so it boils like a hand-drawn line rather than sliding like a computed one. The scenes hand off at the first loop boundary past a dwell budget rather than on a timer, so no scene is ever cut mid-word. Framework-free WebGL1, one fragment shader, one full-screen triangle, one texture. Note that GLSL has no implicit int-to-float conversion, so any constant interpolated into the shader source must carry a decimal point — a value like 3.0 serialises as "3" and the shader then refuses to multiply it with a float, which is a hard compile failure that only surfaces at runtime. 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.

### glass-type/params.ts
```ts
export const PAPER = "#ffffff";
export const INK = "#0a0a0a";

export const A_TEXT = "(open) your world";
export const A_FRAMES = 41;
export const A_Y = [
  0.864, 0.842, 0.826, 0.812, 0.801, 0.792, 0.784, 0.777, 0.733, 0.71, 0.689,
  0.63, 0.611, 0.593, 0.579, 0.567, 0.556, 0.546, 0.537, 0.528, 0.52, 0.511,
  0.503, 0.494, 0.486, 0.476, 0.464, 0.453, 0.439, 0.426, 0.409, 0.391, 0.371,
  0.349, 0.323, 0.292, 0.256, 0.182, 0.133, 0.104, 0.069,
];

export const A_TEXT_W = 1.49;

export const B_WORDS = ["Open Sound", "Technology"];
export const B_FRAMES = 35;
export const B_SWAP_FRAME = 15;
export const B_R = [
  0.641, 0.664, 0.679, 0.69, 0.697, 0.702, 0.706, 0.707, 0.707, 0.706, 0.702,
  0.699, 0.693, 0.687, 0.659, 0.567, 0.539, 0.518, 0.512, 0.506, 0.502, 0.5,
  0.498, 0.49, 0.494, 0.494, 0.494, 0.494, 0.494, 0.493, 0.496, 0.491, 0.492,
  0.488, 0.486,
];

export const B_TEXT_W = 0.56;

export const C_WORDS = ["Sound", "is", "rich"] as const;
export const C_FRAMES = 52;
export const C_SEGMENTS: [number, number][] = [
  [0, 17],
  [18, 34],
  [35, 51],
];
export const C_X = [
  0.422, 0.21, 0.113, 0.068, 0.042, 0.026, 0.014, 0.007, 0.001, -0.002,
  -0.004, -0.004, -0.006, -0.01, -0.016, -0.027, -0.043, -0.076, 0.416, 0.304,
  0.223, 0.159, 0.107, 0.069, 0.019, 0.004, -0.004, -0.009, -0.011, -0.013,
  -0.023, -0.039, -0.066, -0.108, -0.169, 0.45, 0.268, 0.156, 0.093, 0.056,
  0.031, 0.017, 0.008, 0, -0.004, -0.007, -0.007, -0.009, -0.02, -0.031,
  -0.053, -0.093,
];

export const C_TEXT_W = 0.76;

export const FPS = 24;

export const FONT_STACK = 'Georgia, "Times New Roman", serif';

export const FONT_WEIGHT = 500;

export const LENS = {
  a: { rl: 1.05, str: 2.4, pow: 3.0, rip: 0.35, wave: 0.34, rim0: 0.25 },
  b: { rl: 0.49, str: 1.7, pow: 2.4, rip: 0.55, wave: 0.16, rim0: 0.35 },
  c: { rl: 0.85, str: 0.9, pow: 2.2, rip: 0.28, wave: 0.42, rim0: 0.1 },
};

export const B_R_SCALE = 1.0;

export const RIP_DRIFT = 1.1;

export const RING_WOBBLE: [number, number, number][] = [

  [3, 0.010, 1.3],
  [7, 0.007, -2.1],
  [11, 0.005, 3.7],
];
export const RING_STROKE = 0.008;
export const RING_THIN = 0.35;
export const RING_BOIL_FPS = 12;

export const SCENE_SECONDS = 5;

export const DISPERSE = 0.016;

export const POINTER_PULL = 0.72;
export const POINTER_EASE = 6.0;

export const POINTER_IN = 0.22;
export const POINTER_OUT = 0.5;

export const TEX_SS = 2;

```

### glass-type/engine.ts
```ts
import {
  PAPER,
  INK,
  A_TEXT,
  A_FRAMES,
  A_Y,
  A_TEXT_W,
  B_WORDS,
  B_FRAMES,
  B_SWAP_FRAME,
  B_R,
  B_TEXT_W,
  C_WORDS,
  C_FRAMES,
  C_SEGMENTS,
  C_X,
  C_TEXT_W,
  FPS,
  FONT_STACK,
  FONT_WEIGHT,
  LENS,
  B_R_SCALE,
  RIP_DRIFT,
  RING_WOBBLE,
  RING_STROKE,
  RING_THIN,
  RING_BOIL_FPS,
  SCENE_SECONDS,
  DISPERSE,
  POINTER_PULL,
  POINTER_EASE,
  POINTER_IN,
  POINTER_OUT,
  TEX_SS,
} from "./params";

const f = (n: number) => (Number.isInteger(n) ? `${n}.0` : `${n}`);

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

const FRAG = `
precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;
uniform vec2 uRes;
uniform float uU;
uniform vec2 uOff;
uniform vec2 uCen;
uniform float uRL;
uniform float uStr, uPow, uRip, uWave, uRim0;
uniform float uRipPh;
uniform float uBall;
uniform float uRingT;
uniform vec3 uInk, uPaper;

float magAt(float r, float k) {
  float rn = r / uRL;
  float m = 1.0
    + uStr * k * pow(clamp(rn, 0.0, 1.6), uPow)
    + uRip * sin(6.28318 * r / (uWave * uU) - uRipPh)
        * smoothstep(uRim0, 1.0, rn);
  return max(m, 0.35);
}

float inkAt(vec2 q, vec2 c, float m) {
  vec2 src = c + q / m - uOff;
  return 1.0 - texture2D(uTex, src / uRes).r;
}

void main() {
  vec2 px = vUv * uRes;
  vec2 c = uCen;
  vec2 q = px - c;
  float r = length(q);
  float rn = r / uRL;

  float d = ${f(DISPERSE)} * clamp(rn, 0.0, 1.0);
  float mR = magAt(r, 1.0 + d);
  float mG = magAt(r, 1.0);
  float mB = magAt(r, 1.0 - d);

  vec3 ink = vec3(inkAt(q, c, mR), inkAt(q, c, mG), inkAt(q, c, mB));

  if (uBall > 0.5) {
    float th = atan(q.y, q.x);
    float wob =
        ${RING_WOBBLE.map(([k, a, s]) => `${f(a)} * sin(${k}.0 * th + ${f(s)} * uRingT)`).join(" + ")};
    float Rw = uRL * (1.0 + wob);

    float insideM = 1.0 - smoothstep(Rw - 1.5, Rw + 0.5, r);
    ink *= insideM;

    float w = ${f(RING_STROKE)} * uU * (${f(RING_THIN)} + (1.0 - ${f(RING_THIN)}) * (0.5 + 0.5 * sin(2.0 * th + 0.9 * uRingT)));
    float ring = 1.0 - smoothstep(w * 0.45, w, abs(r - Rw));
    ink = max(ink, vec3(ring));
  }

  vec3 col = mix(uPaper, uInk, clamp(ink, 0.0, 1.0));

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

type SceneId = 0 | 1 | 2;

const hex = (s: string): [number, number, number] => [
  parseInt(s.slice(1, 3), 16) / 255,
  parseInt(s.slice(3, 5), 16) / 255,
  parseInt(s.slice(5, 7), 16) / 255,
];

function tableAt(tab: number[], f: number, lo = 0, hi = tab.length - 1) {
  const x = Math.min(Math.max(f, lo), hi);
  const i = Math.floor(x);
  const j = Math.min(i + 1, hi);
  return tab[i] + (tab[j] - tab[i]) * (x - i);
}

export class GlassType {
  ok = false;

  private canvas: HTMLCanvasElement;
  private gl: WebGLRenderingContext | null = null;
  private prog: WebGLProgram | null = null;
  private quad: WebGLBuffer | null = null;
  private tex: WebGLTexture | null = null;
  private u: Record<string, WebGLUniformLocation | null> = {};

  private src: HTMLCanvasElement;
  private srcCtx: CanvasRenderingContext2D | null;
  private fontFamily = FONT_STACK;
  private texKey = "";

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

  private scene: SceneId = 0;
  private sceneT0 = 0;

  private ptrX = 0.5;
  private ptrY = 0.5;
  private lensX = 0.5;
  private lensY = 0.5;
  private hover = 0;
  private hoverTo = 0;
  private lastNow = 0;
  private W = 0;
  private H = 0;
  private dpr = 1;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.src = document.createElement("canvas");
    this.srcCtx = this.src.getContext("2d");
    const gl = canvas.getContext("webgl", {
      alpha: false,
      antialias: false,
      premultipliedAlpha: false,
      powerPreference: "low-power",
    }) as WebGLRenderingContext | null;
    if (!gl || !this.srcCtx) return;
    this.gl = gl;

    const compile = (type: number, s: string) => {
      const sh = gl.createShader(type)!;
      gl.shaderSource(sh, s);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        console.warn("[glass-type]", gl.getShaderInfoLog(sh));
        return null;
      }
      return sh;
    };
    const v = compile(gl.VERTEX_SHADER, VERT);
    const f = compile(gl.FRAGMENT_SHADER, FRAG);
    if (!v || !f) return;
    const p = gl.createProgram()!;
    gl.attachShader(p, v);
    gl.attachShader(p, f);
    gl.linkProgram(p);
    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) return;
    this.prog = p;

    this.quad = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);

    for (const n of [
      "uTex", "uRes", "uU", "uOff", "uRL", "uStr", "uPow", "uRip", "uWave",
      "uRim0", "uRipPh", "uBall", "uRingT", "uInk", "uPaper", "uCen",
    ]) this.u[n] = gl.getUniformLocation(p, n);

    this.tex = gl.createTexture();

    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    this.ok = true;
    this.sceneT0 = performance.now();
    this.resize();
  }

  setFont(family: string) {
    this.fontFamily = `${family}, ${FONT_STACK}`;
    this.texKey = "";
    if (!this.running && !this.disposed) this.renderStill();
  }

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

  start() {
    if (this.running || this.disposed || !this.ok) return;
    this.running = true;
    this.sceneT0 = performance.now() - this.pausedAt;
    this.raf = requestAnimationFrame(this.loop);
  }

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

    if (this.hoverTo === 0 && this.hover < 0.01) {
      this.lensX = p.x;
      this.lensY = p.y;
    }
    this.hoverTo = 1;
  }

  private pausedAt = 0;
  stop() {
    if (this.running) this.pausedAt = performance.now() - this.sceneT0;
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  renderStill() {
    if (this.pausedAt > 0) {

      const frames = [A_FRAMES, B_FRAMES, C_FRAMES][this.scene];
      this.drawScene(this.scene, this.pausedAt % ((frames / FPS) * 1000));
      return;
    }

    this.drawScene(0, (A_FRAMES / 2 / FPS) * 1000);
  }

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

  private loop = () => {
    if (!this.running) return;
    const now = performance.now();

    const dt = Math.min(Math.max((now - this.lastNow) / 1000, 1 / 240), 0.1);
    this.lastNow = now;
    const hr = this.hoverTo > this.hover ? POINTER_IN : POINTER_OUT;
    this.hover += (this.hoverTo - this.hover) * (1 - Math.exp(-dt / hr));
    const k = 1 - Math.exp(-dt * POINTER_EASE);
    this.lensX += (this.ptrX - this.lensX) * k;
    this.lensY += (this.ptrY - this.lensY) * k;
    const el = now - this.sceneT0;
    const frames = [A_FRAMES, B_FRAMES, C_FRAMES][this.scene];
    const loopMs = (frames / FPS) * 1000;

    if (el >= SCENE_SECONDS * 1000 && el % loopMs < 40) {
      this.scene = ((this.scene + 1) % 3) as SceneId;
      this.sceneT0 = performance.now();
      this.drawScene(this.scene, 0);
    } else {
      this.drawScene(this.scene, el % loopMs);
    }
    this.raf = requestAnimationFrame(this.loop);
  };

  private setContent(text: string, widthU: number, U: number) {
    const key = `${text}|${widthU.toFixed(3)}|${U.toFixed(1)}|${this.fontFamily}`;
    if (key === this.texKey) return;
    this.texKey = key;
    const ctx = this.srcCtx!;

    const S = TEX_SS;
    const W = this.W * S;
    const H = this.H * S;
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, W, H);
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    ctx.font = `${FONT_WEIGHT} 100px ${this.fontFamily}`;
    const w100 = ctx.measureText(text).width || 1;
    const size = (widthU * U * S * 100) / w100;
    ctx.font = `${FONT_WEIGHT} ${size}px ${this.fontFamily}`;
    ctx.fillText(text, W / 2, H / 2);

    const gl = this.gl!;
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.src);
  }

  private drawScene(scene: SceneId, ms: number) {
    const gl = this.gl;
    if (!gl || !this.prog || !this.W) return;
    const { W, H } = this;

    const U = Math.min(H, W / (16 / 9));
    const f = (ms / 1000) * FPS;
    const t = ms / 1000;

    let offX = 0;
    let offY = 0;
    let rl = 1;
    let ball = 0;
    const lens = [LENS.a, LENS.b, LENS.c][scene];

    if (scene === 0) {
      this.setContent(A_TEXT, A_TEXT_W, U);

      offY = -(tableAt(A_Y, f) - 0.5) * U;
      rl = lens.rl * U;
    } else if (scene === 1) {
      const word = B_WORDS[f >= B_SWAP_FRAME ? 1 : 0];
      this.setContent(word, B_TEXT_W, U);
      rl = tableAt(B_R, f) * B_R_SCALE * U * (lens.rl / 0.49);
      ball = 1;
    } else {
      const seg = C_SEGMENTS.findIndex(([a, b]) => f >= a && f <= b + 1);
      const s = seg < 0 ? 2 : seg;
      this.setContent(C_WORDS[s], C_TEXT_W, U);
      offX = tableAt(C_X, f, C_SEGMENTS[s][0], C_SEGMENTS[s][1]) * U;
      rl = lens.rl * U;
    }

    gl.viewport(0, 0, W, H);
    gl.useProgram(this.prog);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);
    const loc = gl.getAttribLocation(this.prog, "aPos");
    gl.enableVertexAttribArray(loc);
    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, this.tex);
    gl.uniform1i(this.u.uTex, 0);
    gl.uniform2f(this.u.uRes, W, H);
    gl.uniform1f(this.u.uU, U);
    gl.uniform2f(this.u.uOff, offX, offY);

    const pull = this.hover * POINTER_PULL;
    gl.uniform2f(
      this.u.uCen,
      W * (0.5 + (this.lensX - 0.5) * pull),
      H * (0.5 - (this.lensY - 0.5) * pull),
    );
    gl.uniform1f(this.u.uRL, rl);
    gl.uniform1f(this.u.uStr, lens.str);
    gl.uniform1f(this.u.uPow, lens.pow);
    gl.uniform1f(this.u.uRip, lens.rip);
    gl.uniform1f(this.u.uWave, lens.wave);
    gl.uniform1f(this.u.uRim0, lens.rim0);
    gl.uniform1f(this.u.uRipPh, t * RIP_DRIFT);
    gl.uniform1f(this.u.uBall, ball);
    gl.uniform1f(this.u.uRingT, Math.floor(t * RING_BOIL_FPS) / RING_BOIL_FPS);
    gl.uniform3fv(this.u.uInk, hex(INK));
    gl.uniform3fv(this.u.uPaper, hex(PAPER));

    gl.drawArrays(gl.TRIANGLES, 0, 3);
  }
}

```

### glass-type/GlassTypeCard.tsx
```ts
"use client";

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

export function GlassTypeCard({
  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: GlassType | 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 GlassType(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-kyoto)";
        probe.textContent = "Ag";
        document.body.appendChild(probe);
        const fam = getComputedStyle(probe)
          .fontFamily.split(",")[0]
          .replace(/["']/g, "")
          .trim();
        probe.remove();
        if (fam) {
          document.fonts
            .load(`${FONT_WEIGHT} 1em "${fam}"`)
            .then(() => engine?.setFont(`"${fam}"`), () => {});
        }
      }
    });

    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);

    const onMove = (e: PointerEvent) => {
      if (e.pointerType !== "mouse") return;
      const r = canvas.getBoundingClientRect();
      if (!r.width || !r.height) return;
      engine?.setPointer({
        x: (e.clientX - r.left) / r.width,
        y: (e.clientY - r.top) / r.height,
      });
    };
    const onLeave = () => engine?.setPointer(null);
    canvas.addEventListener("pointermove", onMove);
    canvas.addEventListener("pointerleave", onLeave);
    window.addEventListener("blur", onLeave);

    return () => {
      cancelAnimationFrame(raf);
      io.disconnect();
      document.removeEventListener("visibilitychange", onVis);
      offTransition();
      window.removeEventListener("resize", onResize);
      canvas.removeEventListener("pointermove", onMove);
      canvas.removeEventListener("pointerleave", onLeave);
      window.removeEventListener("blur", onLeave);
      window.clearTimeout(rt);
      engine?.destroy();
    };
  }, []);

  return (
    <div
      data-canvas-card
      role="img"
      aria-label="Black serif type on white, warped through a glass lens that fringes colour at its rim: a line rises and unrolls to readable, a hand-drawn glass ball swaps two words inside its boiling outline, and single words drift through a magnifying wave. The three scenes take turns, and hovering carries the lens with the pointer."
      style={viewTransitionName ? { viewTransitionName } : undefined}
      className="relative mx-auto aspect-[1344/620] w-full select-none overflow-hidden rounded-[12px] border border-[var(--border-line)] bg-white"
    >
      <canvas ref={canvasRef} className="h-full w-full" />
    </div>
  );
}

```