Things that run. Pull the sliders. Experiments from my skills, my apps and this site, each with its code.

// The Buddy lab, on the playground: a second Buddy on DialKit's dials. His
// size, his shape, his chrome (the liquid metal he reflects), his face and
// his voice. The voice runs through Web Audio, so it can go robot (a ring
// modulator) and his mouth can follow how loud it is.
import { createDialKit, createDialRoot } from 'dialkit/vanilla';
import 'dialkit/vanilla/styles.css';
import { mountBuddy } from '../../lib/buddy/head.js';

// lines he already has takes for (public/buddy/voice/manifest.json)
const LINES: Record<string, string> = {
	Hello: 'Oh! Hi! I’m Buddy.',
	'Built with': 'He built me with Claude Code, Codex and a little bit of love. Mostly the first two.',
	Taller: 'That’s Adam. He made me. I’d have gone taller.',
	'Request denied': 'His AI asks before it acts. I asked to be taller. Request denied.',
	Naked: 'Naked again. Don’t look. It’s all head, all the way down.',
};
const SIZE = 240; // his box at size 1, in px

const stage = document.querySelector<HTMLElement>('[data-lab-stage]');
const panel = document.querySelector<HTMLElement>('[data-lab-panel]');
if (stage && panel) start(stage, panel);

function start(stage: HTMLElement, panel: HTMLElement) {
	const box = stage.querySelector<HTMLElement>('[data-lab-head]')!;
	const caption = stage.querySelector<HTMLElement>('[data-lab-line]')!;
	const head = mountBuddy(box, { shadow: true });
	const takes: Promise<Record<string, { src: string }>> = fetch('/buddy/voice/manifest.json')
		.then((r) => r.json())
		.catch(() => ({}));

	// ---- the voice ----
	const audio = new Audio();
	audio.preload = 'auto';
	let ctx: AudioContext | null = null;
	let analyser: AnalyserNode;
	let dry: GainNode;
	let wet: GainNode;
	let ringOsc: OscillatorNode;
	const level = new Float32Array(1024);
	// made on the first tap (a browser only lets sound start from one)
	const graph = () => {
		if (ctx) return ctx;
		ctx = new AudioContext();
		const src = ctx.createMediaElementSource(audio);
		analyser = ctx.createAnalyser();
		analyser.fftSize = level.length;
		dry = ctx.createGain();
		wet = ctx.createGain();
		// a ring modulator: the voice times a low sine, the classic robot
		const ring = ctx.createGain();
		ring.gain.value = 0;
		ringOsc = ctx.createOscillator();
		ringOsc.frequency.value = 60;
		ringOsc.connect(ring.gain);
		ringOsc.start();
		src.connect(dry).connect(analyser);
		src.connect(ring).connect(wet).connect(analyser);
		analyser.connect(ctx.destination);
		return ctx;
	};
	// his mouth follows the voice's loudness, frame by frame
	const mouth = () => {
		if (audio.paused || !ctx) return void head.setMouth(0);
		analyser.getFloatTimeDomainData(level);
		let sum = 0;
		for (const v of level) sum += v * v;
		head.setMouth(Math.min(1, Math.sqrt(sum / level.length) * 7));
		requestAnimationFrame(mouth);
	};
	audio.addEventListener('play', () => requestAnimationFrame(mouth));
	audio.addEventListener('ended', () => caption.classList.remove('is-on'));

	// ---- the dials ----
	createDialRoot({ mode: 'inline', target: panel, theme: 'light' });
	const kit = createDialKit(
		'Buddy',
		{
			size: [1, 0.5, 1.5, 0.01],
			shape: { across: [1, 0.75, 1.35, 0.01], up: [1, 0.75, 1.35, 0.01] },
			chrome: {
				tint: '#ffffff',
				brightness: [0.2, 0, 0.6, 0.01],
				stripes: [2.2, 0.5, 6, 0.1],
				warp: [0.09, 0, 0.4, 0.01],
				softness: [0.14, 0, 1, 0.01],
				rainbow: [0.35, 0, 1, 0.01],
				angle: [70, 0, 360, 1],
				flow: [1, 0, 4, 0.1],
			},
			face: {
				mood: { type: 'select', options: ['happy', 'wink', 'smug', 'skeptic', 'starry', 'surprised', 'shy', 'dizzy'] },
				outfit: { type: 'select', options: ['none', 'dapper', 'cool', 'build'] },
			},
			voice: {
				line: { type: 'select', options: Object.keys(LINES) },
				speed: [1, 0.5, 2, 0.05],
				pitch: [0, -12, 12, 1],
				robot: false,
			},
			say: { type: 'action' },
			hop: { type: 'action' },
		},
		{ onAction: (path: string) => (path === 'say' ? say() : path === 'hop' ? head.hop() : undefined) },
	);

	type V = typeof kit.values;
	let last: V | null = null;
	kit.subscribe((v: V) => {
		box.style.width = box.style.height = `${Math.round(SIZE * v.size)}px`;
		head.setShape(v.shape.across, v.shape.up);
		head.setChrome({
			tint: hex(v.chrome.tint),
			lift: v.chrome.brightness,
			flow: v.chrome.flow,
			repetition: v.chrome.stripes,
			distortion: v.chrome.warp,
			softness: v.chrome.softness,
			shiftRed: v.chrome.rainbow,
			shiftBlue: v.chrome.rainbow,
			angle: v.chrome.angle,
		});
		if (last && v.face.mood !== last.face.mood) head.express(v.face.mood, 2400);
		if (last && v.face.outfit !== last.face.outfit && v.face.outfit !== head.outfit) head.spin(v.face.outfit);
		voice(v);
		if (last && v.voice.line !== last.voice.line) say();
		last = v;
	});

	// speed changes the pace and keeps the pitch; pitch, like a tape, moves both
	function voice(v: V) {
		audio.playbackRate = v.voice.speed * 2 ** (v.voice.pitch / 12);
		audio.preservesPitch = v.voice.pitch === 0;
		if (ctx) {
			dry.gain.value = v.voice.robot ? 0 : 1;
			wet.gain.value = v.voice.robot ? 1.6 : 0;
		}
	}

	async function say() {
		const v = kit.values as V;
		const text = LINES[v.voice.line];
		const take = (await takes)[text];
		caption.textContent = text;
		caption.classList.add('is-on');
		if (!take) return;
		graph();
		await ctx!.resume();
		audio.src = take.src;
		voice(v);
		head.inhale();
		audio.play().then(() => voice(v), () => {});
	}
}

// DialKit's colour can come back in any CSS colour space; the head takes hex
function hex(color: string) {
	const c = document.createElement('canvas').getContext('2d')!;
	c.fillStyle = '#ffffff';
	c.fillStyle = color;
	return c.fillStyle;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Thermal finger trail</title>
    <style>
      /*
        Thermal finger trail — from Clicker's trackpad disc (clicker.b150.ai)

        One WebGL fragment shader paints a heat-camera field: domain-warped
        noise shaped into a wobbling blob, coloured through a seven-stop
        thermal ramp. A finger dragged across it smears the colour like wet
        paint: the last 24 points of its path, each carrying its own
        velocity and a fade, push the shader's coordinates. A press sends an
        outward ripple that briefly heats the field.

        No dependencies beyond DialKit (the tuning panel, loaded from a CDN).
        Every constant from the original is a control; "Copy component"
        copies this file with your settings baked in.
      */
      :root {
        --ground: #000;
        --ink: #e9ecef;
        --muted: #8a9096;
        --accent: #ff750d;
        color-scheme: dark;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
      body {
        font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
        -webkit-font-smoothing: antialiased;
        display: grid; place-items: center; overflow: hidden;
      }
      .stage { position: relative; display: grid; place-items: center; gap: 22px; padding: 24px; }
      .field {
        position: relative; width: min(72vmin, 560px); aspect-ratio: 1;
        border-radius: 50%; overflow: hidden; touch-action: none; cursor: none;
        box-shadow: 0 40px 120px -40px rgba(255, 117, 13, 0.35);
        -webkit-tap-highlight-color: transparent;
      }
      body.full .stage { position: fixed; inset: 0; padding: 0; }
      body.full .field { width: 100vw; height: 100svh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
      body.full .caption { position: absolute; left: 0; right: 0; bottom: 28px; }
      canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
      /* the pointer becomes a fingertip over the field */
      .finger {
        position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.14);
        transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .finger.on { opacity: 1; }
      .caption {
        text-align: center; color: var(--muted); font: 500 11px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
        letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none;
      }
      @media (prefers-reduced-motion: reduce) { .finger { transition: none; } }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dialkit@2.0.2/dist/vanilla/styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/dialkit@2.0.2/dist/vanilla/browser.global.js"></script>
  </head>
  <body>
    <main class="stage">
      <div class="field" aria-label="Thermal field: drag across it, press to ripple" role="img">
        <canvas></canvas>
        <div class="finger" aria-hidden="true"></div>
      </div>
      <p class="caption">Drag across it · press to ripple</p>
    </main>

    <script>
      const root = document.documentElement;
      // the page as written, before the panel adds itself: what "Copy component" copies
      const source = root.cloneNode(true);
      const field = document.querySelector(".field");
      const canvas = field.querySelector("canvas");
      const finger = field.querySelector(".finger");
      const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;

      // Every constant from Clicker's shader, as a setting. Values are the original's.
      const defaults = {
        Finger: {
          smudge: [9, 0, 20, 0.5],         // how far the trail drags the field (disp * 9.0)
          radius: [0.17, 0.04, 0.4, 0.01], // reach of each trail point, in field units
          follow: [0.3, 0.05, 1, 0.01],    // how fast the trail head eases toward the finger, per frame
          spacing: [0.01, 0.002, 0.05, 0.001], // distance before a new trail point is laid
          life: [1.6, 0.3, 4, 0.1],        // seconds a trail point keeps pulling
          points: [24, 4, 24, 1],          // trail length (the shader holds 24)
          fingertip: true,                 // draw a fingertip ring under the pointer
        },
        Field: {
          flow: [0.26, 0, 1, 0.01],        // speed the noise flows
          meltSeconds: [6, 2, 16, 0.5],    // one melt cycle: the blob slumps and recovers
          warp: [1, 0, 2.5, 0.05],         // strength of the warp-the-warp curl
          blob: [0.37, 0.15, 0.6, 0.01],   // the hot blob's radius
          blurWash: true,                  // a soft blur front sweeps across, then the edge goes razor-crisp
          heatCap: [0.75, 0.5, 1, 0.01],   // hottest the field gets: 0.75 tops out at orange/red, never white
        },
        Press: {
          ripple: [0.18, 0, 0.5, 0.01],    // outward shove of the ring
          bloom: [0.55, 0, 1.2, 0.05],     // how much the ring heats the field
          duration: [0.9, 0.3, 2, 0.05],   // seconds the ring lives
        },
        Edge: {
          rim: [0.6, 0, 1.5, 0.05],        // the crisp specular rim inside the silhouette
          halo: [0.45, 0, 1.2, 0.05],      // the warm fringe outside it
        },
        Palette: {
          // the thermal() ramp: cold → hot, at heat 0, .12, .30, .45, .60, .78, 1
          cold: "#081f29", deep: "#0d3d52", green: "#38cc52", yellow: "#f2db29",
          orange: "#ff750d", red: "#e61f12", white: "#fffffa",
        },
        Layout: {
          shape: { type: "select", options: ["disc", "full-bleed"] },
        },
      };
      // flat values (what the shader and loop read), from the config above or a copied file
      const flatten = (cfg) => Object.fromEntries(Object.entries(cfg).map(([k, v]) => [
        k,
        Array.isArray(v) ? v[0] : v && v.type === "select" ? v.options[0] : v && typeof v === "object" ? flatten(v) : v,
      ]));
      let S = flatten(defaults);
      const embedded = root.dataset.thermalSettings ? JSON.parse(root.dataset.thermalSettings) : null;
      if (embedded) S = merge(S, embedded);
      function merge(a, b) {
        const out = { ...a };
        for (const k in b) out[k] = a[k] && typeof a[k] === "object" && !Array.isArray(a[k]) ? merge(a[k], b[k]) : b[k];
        return out;
      }

      // ---- the shader: Clicker's, with its constants as uniforms ----
      const FS = `
        precision highp float;
        uniform float uTime; uniform vec2 uRes;
        uniform vec4 uTrail[24]; uniform float uTrailA[24];
        uniform vec3 uClick;
        uniform float uSmudge, uRadius, uFlow, uMelt, uWarp, uBlob, uWash, uCap;
        uniform float uRipple, uBloom, uRippleLife, uRim, uHalo;
        uniform vec3 uPal[7];

        float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }
        float noise(vec2 p){ vec2 i=floor(p),f=fract(p);
          float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));
          vec2 u=f*f*(3.0-2.0*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }
        float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.02; a*=0.5; } return v; }

        // the heat ramp: cold teal → green → yellow → orange → red → white-hot
        vec3 thermal(float t){ t=clamp(t,0.0,1.0); vec3 c=uPal[0];
          c=mix(c,uPal[1],smoothstep(0.00,0.12,t));
          c=mix(c,uPal[2],smoothstep(0.12,0.30,t));
          c=mix(c,uPal[3],smoothstep(0.30,0.45,t));
          c=mix(c,uPal[4],smoothstep(0.45,0.60,t));
          c=mix(c,uPal[5],smoothstep(0.60,0.78,t));
          c=mix(c,uPal[6],smoothstep(0.78,1.00,t)); return c; }

        void main(){
          vec2 uv=gl_FragCoord.xy/uRes-0.5; uv.x*=uRes.x/uRes.y;
          float T=uTime; float ph=fract(T/uMelt); float melt=pow(sin(ph*3.14159265),1.3);

          // the finger: each recent trail point drags nearby colour along its own
          // velocity, fading with age, like a fingertip through wet paint
          vec2 disp=vec2(0.0);
          for(int i=0;i<24;i++){
            float age=uTrailA[i];
            if(age<=0.001) continue;
            disp += uTrail[i].zw * smoothstep(uRadius,0.0,length(uv-uTrail[i].xy)) * age;
          }
          // the press: an expanding ring that shoves points outward, locally
          vec2 clickD=vec2(0.0);
          float cAge=uTime-uClick.z;
          bool pressing = uClick.z>0.0 && cAge>=0.0 && cAge<uRippleLife;
          if(pressing){
            vec2 cd=uv-uClick.xy; float cl=length(cd)+1e-4;
            float ring=smoothstep(0.18,0.0,abs(cl-cAge*0.45))*(1.0-cAge/uRippleLife);
            clickD=(cd/cl)*ring*uRipple;
          }
          vec2 fuv=uv + disp*uSmudge + clickD;

          // warp the warp: noise bends the coordinates, more noise bends that bend
          float fy=T*uFlow;
          vec2 w1=vec2(fbm(fuv*1.25+vec2(11.0,fy))-0.5, fbm(fuv*1.25+vec2(-7.0,fy*1.2))-0.5);
          vec2 w2=vec2(fbm(fuv*2.7+w1*1.6+vec2(3.0,-fy*0.8))-0.5, fbm(fuv*2.7+w1*1.6+vec2(-9.0,fy))-0.5);
          vec2 q=fuv + (w1*(0.05+0.13*melt) + w2*(0.025+0.07*melt))*uWarp;
          q.y-=melt*0.14*smoothstep(-0.55,0.55,fuv.y);

          // a soft blob that breathes between round and a touch tall or wide
          vec2 cc=q-vec2(sin(T*0.23)*0.03, sin(T*0.19+1.3)*0.03);
          float a=atan(cc.x, cc.y);
          float reach=length(cc*vec2(1.0, 0.92+0.20*sin(T*0.34)));
          float wob=(0.18*sin(a*2.0+T*0.55)+0.12*sin(a+T*0.27))*smoothstep(0.0,0.07,reach);
          float d=reach-(uBlob+wob*0.08);

          // sharpness: razor-crisp by default; a soft blur front washes across now and then
          float topBias=mix(0.9,1.0,smoothstep(-0.5,0.45,uv.y));
          float ev=0.5+0.42*sin(T*0.40)+0.30*sin(T*0.233+1.7);
          ev=smoothstep(0.05,0.95,ev*0.62+0.30);
          float ang=T*0.06;
          float proj=dot(uv, vec2(cos(ang),sin(ang)))/0.72;
          float front=mix(-1.7,1.7,ev);
          float blur=smoothstep(front+0.7, front-0.7, proj)*uWash;
          float sharp=clamp((1.0-blur)*topBias*(1.0-0.25*melt),0.0,1.0);
          float edgeW=mix(0.34,0.0028,sharp);

          float mask=smoothstep(edgeW,-edgeW*0.5,d);
          float inside=smoothstep(-0.34,edgeW,d);
          // a hard contour where green meets yellow, softened only by the wash
          float gy=0.40, kk=mix(1.0,9.0,1.0-blur);
          inside=mix(inside, clamp((inside-gy)*kk+gy,0.0,1.0), smoothstep(0.26,0.0,abs(inside-gy)));
          float bg=mix(0.34,0.66,smoothstep(0.35,0.95,melt))+(fbm(fuv*1.2+vec2(0.0,T*0.15))-0.5)*0.10;
          float temp=mix(bg, mix(0.20,0.64,inside), mask);

          // the press heats the field toward its own warm colours
          if(pressing){
            float dd=length(uv-uClick.xy), rad=cAge*0.5, k=1.0-cAge/uRippleLife;
            temp += (smoothstep(0.17,0.0,abs(dd-rad))*0.9 + smoothstep(rad+0.12,0.0,dd)*0.55)*k*uBloom;
          }
          temp=min(temp,uCap);
          vec3 col=thermal(temp);
          col+=vec3(1.0,0.95,0.9)*smoothstep(0.86,1.0,temp)*0.32;
          col+=vec3(1.0,0.97,0.88)*smoothstep(edgeW*1.3,0.0,abs(d+edgeW*0.6))*sharp*uRim;
          col+=thermal(0.66)*smoothstep(0.16,0.0,d)*smoothstep(-0.04,0.02,d)*(0.20+uHalo*sharp);
          col+=vec3(0.85,1.0,0.6)*smoothstep(0.10,0.0,abs(uv.x))*mask*sharp*0.10;
          gl_FragColor=vec4(col,1.0);
        }`;

      const gl = canvas.getContext("webgl", { antialias: false, alpha: false });
      if (!gl) {
        field.style.background = "radial-gradient(circle at 50% 45%, #f2db29, #ff750d 30%, #e61f12 45%, #0d3d52 75%)";
      }
      const U = {};
      if (gl) {
        const compile = (type, src) => {
          const s = gl.createShader(type);
          gl.shaderSource(s, src);
          gl.compileShader(s);
          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
          return s;
        };
        const prog = gl.createProgram();
        gl.attachShader(prog, compile(gl.VERTEX_SHADER, "attribute vec2 p;void main(){gl_Position=vec4(p,0.0,1.0);}"));
        gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FS));
        gl.linkProgram(prog);
        gl.useProgram(prog);
        // one triangle that covers the whole canvas
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
        const loc = gl.getAttribLocation(prog, "p");
        gl.enableVertexAttribArray(loc);
        gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
        for (const n of ["uTime", "uRes", "uTrail", "uTrailA", "uClick", "uSmudge", "uRadius", "uFlow", "uMelt", "uWarp",
          "uBlob", "uWash", "uCap", "uRipple", "uBloom", "uRippleLife", "uRim", "uHalo", "uPal"]) {
          U[n] = gl.getUniformLocation(prog, n);
        }
      }

      // any CSS colour DialKit hands back (hex, rgb, hsl, oklch…) → 0..1 RGB
      const swatch = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
      const rgb = (css) => {
        swatch.clearRect(0, 0, 1, 1);
        swatch.fillStyle = "#000";
        swatch.fillStyle = css;
        swatch.fillRect(0, 0, 1, 1);
        const [r, g, b] = swatch.getImageData(0, 0, 1, 1).data;
        return [r / 255, g / 255, b / 255];
      };
      let palette = new Float32Array(21);
      let lastPalette = "", lastShape = "";
      // only redo the expensive parts when what they depend on changed: dragging
      // a slider shouldn't re-parse seven colours or reallocate the canvas
      function apply() {
        const p = S.Palette;
        const key = JSON.stringify(p);
        if (key !== lastPalette) {
          lastPalette = key;
          palette = new Float32Array([p.cold, p.deep, p.green, p.yellow, p.orange, p.red, p.white].flatMap(rgb));
          root.style.setProperty("--accent", p.orange);
        }
        if (S.Layout.shape !== lastShape) {
          lastShape = S.Layout.shape;
          document.body.classList.toggle("full", lastShape === "full-bleed");
          scale = 1;
          resize();
        }
      }

      // ---- size: it's a heavy shader (about 30 noise lookups a pixel), so it
      // renders to a fixed pixel budget and the browser scales it up. The field is
      // soft, so the difference doesn't show; the frame rate does. If frames still
      // run long, the resolution steps down until they don't. ----
      const BUDGET = 520000;          // pixels rendered per frame, at most
      let W = 1, H = 1, scale = 1;    // scale: the adaptive step, 0.5..1
      function resize() {
        const r = field.getBoundingClientRect();
        W = Math.max(2, r.width);
        H = Math.max(2, r.height);
        const dpr = Math.min(devicePixelRatio || 1, 2);
        const fit = Math.min(1, Math.sqrt(BUDGET / (W * H * dpr * dpr)));
        canvas.width = Math.max(2, Math.round(W * dpr * fit * scale));
        canvas.height = Math.max(2, Math.round(H * dpr * fit * scale));
      }
      addEventListener("resize", resize);
      // average 30 frames; step down 20% when they run long, back up 10% when there's room
      let lastFrame = 0, frameSum = 0, frameCount = 0;
      function pace(t) {
        if (lastFrame) { frameSum += t - lastFrame; frameCount++; }
        lastFrame = t;
        if (frameCount < 30) return;
        const avg = frameSum / frameCount;
        frameSum = frameCount = 0;
        if (avg > 21 && scale > 0.5) { scale = Math.max(0.5, scale * 0.8); resize(); }
        else if (avg < 17.5 && scale < 1) { scale = Math.min(1, scale * 1.1); resize(); }
      }

      // ---- the finger: a smoothed head, sampled into a short trail ----
      const N = 24;
      const trailVec = new Float32Array(N * 4);
      const trailAge = new Float32Array(N);
      let trail = [];
      let target = null, head = null;
      let click = [0, 0, -10];
      const start = performance.now();
      // field coordinates: centred, y up, x scaled by the aspect ratio so a
      // circle of influence stays a circle on a wide field
      const toField = (x, y) => [(x / W - 0.5) * (W / H), 0.5 - y / H];

      field.addEventListener("pointermove", (e) => {
        const r = field.getBoundingClientRect();
        target = { x: e.clientX - r.left, y: e.clientY - r.top };
        finger.style.left = target.x + "px";
        finger.style.top = target.y + "px";
        finger.classList.toggle("on", S.Finger.fingertip);
        wake();
      });
      field.addEventListener("pointerdown", (e) => {
        const r = field.getBoundingClientRect();
        const [x, y] = toField(e.clientX - r.left, e.clientY - r.top);
        click = [x, y, clock()];
        wake();
      });
      field.addEventListener("pointerleave", () => { target = null; head = null; finger.classList.remove("on"); });

      // reduced motion: the field holds still (at a good-looking moment) and only the finger moves it
      const clock = () => (reduced ? 12 : (performance.now() - start) / 1000);

      function step() {
        const t = clock();
        if (target) {
          if (!head) head = { ...target };
          head.x += (target.x - head.x) * S.Finger.follow;
          head.y += (target.y - head.y) * S.Finger.follow;
          const [gx, gy] = toField(head.x, head.y);
          const last = trail[trail.length - 1];
          if (!last || Math.hypot(gx - last.x, gy - last.y) > S.Finger.spacing) {
            trail.push({ x: gx, y: gy, vx: last ? gx - last.x : 0, vy: last ? gy - last.y : 0, born: t });
          }
        }
        while (trail.length && t - trail[0].born > S.Finger.life) trail.shift();
        if (trail.length > S.Finger.points) trail.splice(0, trail.length - S.Finger.points);
        for (let i = 0; i < N; i++) {
          const p = trail[i];
          if (p) {
            trailVec.set([p.x, p.y, p.vx, p.vy], i * 4);
            trailAge[i] = Math.max(0, 1 - (t - p.born) / S.Finger.life);
          } else trailAge[i] = 0;
        }
        return t;
      }

      function draw() {
        const t = step();
        if (!gl) return;
        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.uniform1f(U.uTime, t);
        gl.uniform2f(U.uRes, canvas.width, canvas.height);
        gl.uniform4fv(U.uTrail, trailVec);
        gl.uniform1fv(U.uTrailA, trailAge);
        gl.uniform3f(U.uClick, click[0], click[1], click[2]);
        gl.uniform1f(U.uSmudge, S.Finger.smudge);
        gl.uniform1f(U.uRadius, S.Finger.radius);
        gl.uniform1f(U.uFlow, S.Field.flow);
        gl.uniform1f(U.uMelt, S.Field.meltSeconds);
        gl.uniform1f(U.uWarp, S.Field.warp);
        gl.uniform1f(U.uBlob, S.Field.blob);
        gl.uniform1f(U.uWash, S.Field.blurWash ? 1 : 0);
        gl.uniform1f(U.uCap, S.Field.heatCap);
        gl.uniform1f(U.uRipple, S.Press.ripple);
        gl.uniform1f(U.uBloom, S.Press.bloom);
        gl.uniform1f(U.uRippleLife, S.Press.duration);
        gl.uniform1f(U.uRim, S.Edge.rim);
        gl.uniform1f(U.uHalo, S.Edge.halo);
        gl.uniform3fv(U.uPal, palette);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
      }

      // ---- run only while it can be seen; with reduced motion, only while touched ----
      let raf = 0, visible = true, idleUntil = 0;
      function loop(t) {
        raf = 0;
        pace(t);
        draw();
        const busy = !reduced || target || performance.now() < idleUntil;
        if (visible && !document.hidden && busy) raf = requestAnimationFrame(loop);
      }
      function wake() {
        idleUntil = performance.now() + (S.Finger.life + S.Press.duration) * 1000;
        if (!raf) { lastFrame = 0; raf = requestAnimationFrame(loop); }
      }
      new IntersectionObserver(([e]) => { visible = e.isIntersecting; if (visible) wake(); }).observe(field);
      document.addEventListener("visibilitychange", () => { if (!document.hidden) wake(); });

      // ---- the tuning panel ----
      async function copyComponent() {
        const clone = source.cloneNode(true);
        clone.dataset.thermalSettings = JSON.stringify(S);
        await navigator.clipboard.writeText("<!doctype html>\n" + clone.outerHTML);
      }
      if (window.DialKit) {
        DialKit.createDialRoot({ position: "bottom-right", theme: "dark", defaultOpen: innerWidth >= 640 });
        const withValues = (cfg, vals) => Object.fromEntries(Object.entries(cfg).map(([k, v]) => {
          if (Array.isArray(v)) return [k, [vals[k], ...v.slice(1)]];
          if (v && v.type === "select") return [k, { ...v, default: vals[k] }];
          if (v && typeof v === "object") return [k, withValues(v, vals[k])];
          return [k, vals[k]];
        }));
        const kit = DialKit.createDialKit("Thermal trail", {
          ...withValues(defaults, S),
          poke: { type: "action" },
          "Copy component": { type: "action" },
        }, {
          id: "thermal-finger-trail",
          persist: !embedded,
          onAction: (path) => {
            if (path === "poke") { click = [0, 0, clock()]; wake(); }
            if (path === "Copy component") copyComponent();
          },
        });
        kit.subscribe((values) => { S = merge(S, values); apply(); wake(); });
      }

      apply();
      wake();
    </script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Zine UI Motion Contained Demo</title>
    <style>
      /*
        Zine UI Motion contained demo

        Real Zine stack:
        - Next.js + React
        - matter-js for inflated-type collision behavior
        - opentype.js for extracting and deforming OT2049 glyph outlines
        - Lenis for smooth scroll
        - GSAP + ScrollTrigger for scrubbed scroll choreography
        - next/font/local with Geist, Fragment Mono, Inter, DM Mono, and
          OT2049-Bold.ttf for the hero glyphs

        This standalone file loads Matter, DialKit, Lenis, GSAP, and
        ScrollTrigger from CDNs. The local preview resolves Zine's OT2049
        font from the sibling project; distributed copies should provide
        their own licensed OT2049 file at the path below.
      */

      @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700&display=swap");

      /* On adamperlis.com: Zine's display face, OT2049 (licensed), from
         fonts/ beside this file, with Bricolage Grotesque (SIL OFL) behind it */
      @font-face {
        font-family: "OT2049 Demo";
        src: url("fonts/OT2049-Bold.ttf") format("truetype");
        font-style: normal;
        font-weight: 700;
        font-display: swap;
      }

      :root {
        --electric: #0600ff;
        --paper: #f5f0e7;
        --paper-2: #f7f3ec;
        --ink: #0d0d0c;
        --ink-mid: rgba(13, 13, 12, 0.55);
        --rule: rgba(13, 13, 12, 0.11);
        --blur: 10;
        --scroll-spread: 6.2;
        --font-sans:
          Inter, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
        --font-mono:
          "DM Mono", "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        --font-display:
          "OT2049 Demo", "Bricolage Grotesque", "Arial Black", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        background: var(--paper);
      }

      body {
        margin: 0;
        color: var(--ink);
        background: var(--paper);
        font-family: var(--font-sans);
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
      }

      button,
      input {
        font: inherit;
      }

      .hero {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        color: white;
        background: var(--electric);
        isolation: isolate;
      }

      .topbar {
        position: absolute;
        z-index: 8;
        top: 13px;
        left: 50%;
        display: flex;
        align-items: center;
        gap: 22px;
        height: 34px;
        width: min(638px, calc(100vw - 28px));
        padding: 0 6px 0 15px;
        border-radius: 9px;
        color: rgba(255, 255, 255, 0.92);
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(16px);
        transform: translateX(-50%);
        font-size: 12px;
        line-height: 1;
      }

      .wordmark {
        margin-right: 8px;
        font-weight: 850;
        letter-spacing: -0.06em;
      }

      .navlinks {
        display: flex;
        align-items: center;
        gap: 16px;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.82);
      }

      .nav-cta {
        margin-left: auto;
        border: 0;
        border-radius: 8px;
        padding: 8px 13px;
        color: var(--electric);
        background: white;
        cursor: default;
      }

      .hero-label {
        position: absolute;
        z-index: 7;
        top: 49.2%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
        color: white;
        font-size: clamp(18px, 1.55vw, 22px);
        letter-spacing: -0.02em;
        white-space: nowrap;
      }

      .invisible-word {
        display: inline;
        white-space: nowrap;
      }

      .invisible-word span {
        display: inline-block;
      }

      .hero-label.is-washing .invisible-word span {
        animation: invisible-wash 2s 1;
        animation-delay: calc(var(--i) * 50ms);
      }

      .hero-copy {
        position: absolute;
        z-index: 7;
        left: 50%;
        bottom: 95px;
        width: min(540px, calc(100vw - 40px));
        transform: translateX(-50%);
        text-align: center;
      }

      .hero-copy p {
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: clamp(16px, 1.35vw, 18px);
        line-height: 1.5;
        letter-spacing: -0.02em;
      }

      .actions {
        display: flex;
        justify-content: center;
        gap: 13px;
        margin-top: 20px;
      }

      .btn {
        min-height: 32px;
        border: 1px solid rgba(255, 255, 255, 0.38);
        border-radius: 7px;
        padding: 0 16px;
        color: white;
        background: rgba(255, 255, 255, 0.06);
      }

      .btn.primary {
        border-color: white;
        color: #1b1b1b;
        background: white;
      }

      .hero-type {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
      }

      .glyph {
        position: absolute;
        left: var(--x);
        top: var(--y);
        color: var(--paper-2);
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 0.75;
        letter-spacing: 0;
        text-transform: uppercase;
        transform-origin: 50% 50%;
        will-change: transform, opacity;
        text-shadow:
          0 0 1px rgba(255, 255, 255, 0.25),
          0 12px 22px rgba(0, 0, 0, 0.035);
      }

      .glyph.is-popping {
        opacity: 0;
        transition: opacity 80ms ease-out;
      }

      .hero-confetti {
        position: absolute;
        inset: 0;
        z-index: 3;
        overflow: hidden;
        pointer-events: none;
      }

      .hero-obstacle-masks {
        position: absolute;
        inset: 0;
        z-index: 6;
        pointer-events: none;
      }

      .hero-obstacle-masks span {
        position: absolute;
        background: var(--electric);
      }

      .particle {
        position: absolute;
        width: var(--size);
        height: var(--size);
        background: var(--paper-2);
        animation: particle-flight 950ms cubic-bezier(0.18, 0.4, 0.52, 1) forwards;
      }

      .g-c {
        --x: 6vw;
        --y: 15.5vh;
        font-size: clamp(180px, 19vw, 300px);
      }

      .g-l {
        --x: 21.8vw;
        --y: 15.8vh;
        font-size: clamp(180px, 19vw, 300px);
      }

      .g-a {
        --x: 75.5vw;
        --y: 16vh;
        font-size: clamp(190px, 20vw, 312px);
      }

      .g-u {
        --x: 3vw;
        --y: 67vh;
        font-size: clamp(132px, 13vw, 212px);
      }

      .g-d {
        --x: 12.5vw;
        --y: 67vh;
        font-size: clamp(132px, 13vw, 212px);
      }

      .g-e {
        --x: 81vw;
        --y: 58vh;
        font-size: clamp(220px, 23vw, 350px);
      }

      .manifesto {
        min-height: 210vh;
        padding: 0 clamp(22px, 4.6vw, 66px);
        background:
          radial-gradient(circle at 22% 12%, rgba(6, 0, 255, 0.075), transparent 28%),
          var(--paper);
      }

      .manifesto-inner {
        position: sticky;
        top: 0;
        min-height: 100svh;
        display: flex;
        align-items: center;
      }

      .manifesto-grid {
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding-top: 40px;
        border-top: 1px solid var(--rule);
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 24px;
      }

      .chip {
        grid-column: 1 / 5;
        align-self: start;
        width: fit-content;
        border: 1px solid rgba(13, 13, 12, 0.15);
        border-radius: 2px;
        padding: 6px 7px;
        color: var(--ink-mid);
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 1px;
        text-transform: uppercase;
      }

      .manifesto-copy {
        grid-column: 5 / 12;
        position: relative;
        margin: 0;
        color: var(--ink);
        font-size: clamp(30px, 4.75vw, 74px);
        font-weight: 400;
        line-height: 1.03;
        letter-spacing: -0.045em;
        text-wrap: pretty;
      }

      .layer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.03em 0.2em;
      }

      .layer.ghost {
        position: absolute;
        inset: 0;
        color: rgba(13, 13, 12, 0.32);
        filter: blur(calc(var(--blur) * 1px));
      }

      .word {
        display: inline-block;
        opacity: var(--sharp, 0.14);
        transform: translate3d(0, calc((1 - var(--sharp, 0.14)) * 13px), 0);
        will-change: opacity, transform;
      }

      .ghost .word {
        opacity: var(--ghost, 0);
        transform: none;
      }

      .pill {
        margin-inline: -0.02em;
        border-radius: 999px;
        padding: 0.02em 0.22em 0.09em;
        color: white;
        background: var(--electric);
        letter-spacing: -0.045em;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      @keyframes invisible-wash {
        0% {
          filter: blur(0);
          opacity: 1;
          transform: rotate(0) translateY(0);
          animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4);
        }
        30% {
          filter: blur(calc(var(--invisible-blur, 6) * 1px));
          opacity: 0;
          transform: rotate(-8deg) translateY(-0.12em);
          animation-timing-function: linear;
        }
        55% {
          filter: blur(calc(var(--invisible-blur, 6) * 1px));
          opacity: 0;
          transform: rotate(6deg) translateY(0.1em);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        }
        100% {
          filter: blur(0);
          opacity: 1;
          transform: rotate(0) translateY(0);
        }
      }

      @keyframes particle-flight {
        0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
        55% { opacity: 1; }
        100% {
          opacity: 0;
          transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));
        }
      }

      @media (max-width: 860px) {
        .topbar {
          width: calc(100vw - 24px);
          gap: 12px;
        }

        .navlinks span:nth-child(n + 3) {
          display: none;
        }

        .hero-copy {
          bottom: 48px;
        }

        .g-c {
          --x: -4vw;
          --y: 17vh;
        }

        .g-l {
          --x: 31vw;
          --y: 18vh;
        }

        .g-a {
          --x: 58vw;
          --y: 22vh;
        }

        .g-u {
          --x: -5vw;
          --y: 60vh;
        }

        .g-d {
          --x: 31vw;
          --y: 62vh;
        }

        .g-e {
          --x: 60vw;
          --y: 62vh;
        }

        .manifesto-grid {
          display: block;
        }

        .manifesto-copy {
          margin-top: 28px;
        }

      }

      @media (prefers-reduced-motion: reduce) {
        .particle,
        .hero-label.is-washing .invisible-word span {
          animation: none;
        }

        .word,
        .ghost .word {
          opacity: 1;
          transform: none;
        }

        .layer.ghost {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <section class="hero" aria-label="Zine inflated hero demo">
      <nav class="topbar" aria-label="Demo navigation">
        <span class="wordmark">ZINE</span>
        <span class="navlinks" aria-hidden="true">
          <span>How it works</span>
          <span>Features</span>
          <span>Who it's for</span>
          <span>Compare</span>
          <span>Pricing</span>
          <span>Docs</span>
          <span>Sign in</span>
        </span>
        <button class="nav-cta">Start free</button>
      </nav>

      <div class="hero-type" aria-hidden="true">
        <span class="glyph g-c">C</span>
        <span class="glyph g-l">L</span>
        <span class="glyph g-a">A</span>
        <span class="glyph g-u">U</span>
        <span class="glyph g-d">D</span>
        <span class="glyph g-e">E</span>
      </div>
      <div class="hero-confetti" aria-hidden="true"></div>
      <div class="hero-obstacle-masks" aria-hidden="true"></div>

      <p class="hero-label">
        Your site is <span class="invisible-word" data-word="invisible"></span> to
      </p>

      <div class="hero-copy">
        <p>
          Zine is your always-on growth marketing engine. Agents that write,
          optimize, and watch your competitors across every channel, so you show
          up where your customers are looking.
        </p>
        <div class="actions">
          <button class="btn primary">Start free -></button>
          <button class="btn">See how it works</button>
        </div>
      </div>
    </section>

    <section id="manifesto" class="manifesto" aria-labelledby="manifesto-copy">
      <div class="manifesto-inner">
        <div class="manifesto-grid">
          <span class="chip">Introducing Zine</span>
          <p id="manifesto-copy" class="sr-only">
            Your customers ask ChatGPT, Claude, Gemini, and Perplexity, then
            take whatever answer appears. If you're not in it, you've
            disappeared. Zine puts agents on your site, blog, newsletter, and
            social, so you get a little more findable every week.
          </p>
          <div class="manifesto-copy" aria-hidden="true">
            <div class="layer sharp"></div>
            <div class="layer ghost"></div>
          </div>
        </div>
      </div>
    </section>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dialkit@2.0.2/dist/vanilla/styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/dialkit@2.0.2/dist/vanilla/browser.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.23/dist/lenis.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
    <script>
      const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
      const root = document.documentElement;
      const sourceDocument = root.cloneNode(true);
      const hero = document.querySelector(".hero");
      const heroType = document.querySelector(".hero-type");
      const initialGlyphMarkup = heroType?.innerHTML || "";
      const confetti = document.querySelector(".hero-confetti");
      const label = document.querySelector(".hero-label");
      const names = ["CLAUDE", "CHATGPT", "GEMINI", "PERPLEXITY", "GROK"];
      const heroDefaults = {
        hoverPressure: 0.85,
        pointerRadius: 46,
        cycleSeconds: 4,
        popStagger: 60,
        invisibleBlur: 6,
        blue: "#0600ff",
      };
      const revealDefaults = { blur: 10, revealSpread: 6.2 };
      let heroSettings = { ...heroDefaults, ...JSON.parse(root.dataset.heroSettings || "{}") };
      let revealSettings = { ...revealDefaults, ...JSON.parse(root.dataset.revealSettings || "{}") };
      let restartHero = () => {};
      let setWordProgress = () => {};
      root.style.setProperty("--electric", heroSettings.blue);
      root.style.setProperty("--invisible-blur", heroSettings.invisibleBlur);
      root.style.setProperty("--blur", revealSettings.blur);
      root.style.setProperty("--scroll-spread", revealSettings.revealSpread);

      async function copyComponent(component) {
        const clone = sourceDocument.cloneNode(true);
        clone.removeAttribute("style");
        clone.dataset.heroSettings = JSON.stringify(heroSettings);
        clone.dataset.revealSettings = JSON.stringify(revealSettings);
        clone.dataset.dialkitId = `zine-${component}-${Date.now()}`;
        if (component === "hero") clone.querySelector(".manifesto")?.remove();
        else clone.querySelector(".hero")?.remove();
        clone.querySelectorAll("script[src]").forEach((script) => {
          const src = script.getAttribute("src");
          if (component === "hero" && /lenis|gsap/i.test(src)) script.remove();
          if (component === "reveal" && /matter-js/i.test(src)) script.remove();
        });
        clone.querySelector("title").textContent = component === "hero"
          ? "Inflated hero component" : "Scroll blur reveal component";
        await navigator.clipboard.writeText("<!doctype html>\n" + clone.outerHTML);
      }

      if (window.DialKit) {
        DialKit.createDialRoot({ position: "bottom-right", theme: "dark", defaultOpen: innerWidth >= 640 });
        if (hero) {
          const heroKit = DialKit.createDialKit("Hero", {
            hoverPressure: [heroSettings.hoverPressure, 0, 1.8, 0.05],
            pointerRadius: [heroSettings.pointerRadius, 20, 100, 1],
            cycleSeconds: [heroSettings.cycleSeconds, 2, 10, 0.1],
            popStagger: [heroSettings.popStagger, 20, 150, 5],
            invisibleBlur: [heroSettings.invisibleBlur, 0, 16, 1],
            blue: heroSettings.blue,
            replay: { type: "action" },
            "Copy component": { type: "action" },
          }, {
            id: root.dataset.dialkitId || "zine-demo-hero",
            persist: true,
            onAction: (path) => {
              if (path === "replay") restartHero();
              if (path === "Copy component") copyComponent("hero");
            },
          });
          heroKit.subscribe((values) => {
            heroSettings = values;
            root.style.setProperty("--electric", values.blue);
            root.style.setProperty("--invisible-blur", values.invisibleBlur);
          });
        }
        if (document.querySelector(".manifesto")) {
          const revealKit = DialKit.createDialKit("Section reveal", {
            blur: [revealSettings.blur, 0, 24, 1],
            revealSpread: [revealSettings.revealSpread, 2, 10, 0.1],
            "Copy component": { type: "action" },
          }, {
            id: root.dataset.dialkitId || "zine-demo-reveal",
            persist: true,
            onAction: (path) => { if (path === "Copy component") copyComponent("reveal"); },
          });
          revealKit.subscribe((values) => {
            revealSettings = values;
            root.style.setProperty("--blur", values.blur);
            root.style.setProperty("--scroll-spread", values.revealSpread);
            requestAnimationFrame(() => {
              setWordProgress(window.ScrollTrigger?.getAll()?.[0]?.progress || 0);
            });
          });
        }
      }

      document.querySelectorAll(".invisible-word").forEach((word) => {
        word.dataset.word.split("").forEach((letter, index) => {
          const span = document.createElement("span");
          span.style.setProperty("--i", index);
          span.textContent = letter;
          word.append(span);
        });
      });

      function placeHeroWord(index) {
        heroType.innerHTML = index === 0 ? initialGlyphMarkup : "";
        if (index !== 0) {
          [...names[index]].forEach((letter) => {
            const node = document.createElement("span");
            node.className = "glyph";
            node.textContent = letter;
            heroType.append(node);
          });
        }

        const nodes = [...heroType.querySelectorAll(".glyph")];
        nodes.forEach((node) => {
          node.style.left = "0px";
          node.style.top = "0px";
          node.style.fontSize = "100px";
          node.style.transform = "none";
        });
        const natural = nodes.map((node) => {
          const rect = node.getBoundingClientRect();
          return { width: rect.width, height: rect.height };
        });
        const heroRect = hero.getBoundingClientRect();
        const toBox = (element) => {
          const rect = element.getBoundingClientRect();
          return {
            left: rect.left - heroRect.left,
            top: rect.top - heroRect.top,
            right: rect.right - heroRect.left,
            bottom: rect.bottom - heroRect.top,
            width: rect.width,
            height: rect.height,
          };
        };
        const nav = toBox(hero.querySelector(".topbar"));
        const statement = toBox(label);
        const copy = toBox(hero.querySelector(".hero-copy"));
        const margin = Math.min(28, Math.max(16, heroRect.width * 0.025));
        const width = heroRect.width;
        const height = heroRect.height;
        const topY = nav.bottom + margin;
        const bottomY = statement.bottom + margin;
        let pockets;
        let counts;

        if (width < 1000) {
          const rowGap = margin * 0.5;
          const rowHeight = Math.max(1, (statement.top - margin - topY - rowGap) / 2);
          pockets = [
            { x: margin, y: topY, width: width - 2 * margin, height: rowHeight },
            { x: margin, y: topY + rowHeight + rowGap, width: width - 2 * margin, height: rowHeight },
          ];
          counts = [Math.ceil(nodes.length / 2), Math.floor(nodes.length / 2)];
        } else {
          pockets = [
            { x: margin, y: topY, width: statement.left - 2 * margin,
              height: statement.top - topY - margin },
            { x: statement.right + margin, y: topY,
              width: width - statement.right - 2 * margin,
              height: statement.top - topY - margin },
            { x: margin, y: bottomY, width: copy.left - 2 * margin,
              height: height - bottomY - margin },
            { x: copy.right + margin, y: bottomY,
              width: width - copy.right - 2 * margin,
              height: height - bottomY - margin },
          ];
          const upperLeft = Math.max(1, Math.round(nodes.length / 3));
          const upperRight = Math.max(1, Math.round(nodes.length / 6));
          const lowerLeft = Math.max(1, Math.round(nodes.length / 3));
          counts = [upperLeft, upperRight, lowerLeft,
            nodes.length - upperLeft - upperRight - lowerLeft];
        }

        let offset = 0;
        pockets.forEach((pocket, groupIndex) => {
          const group = nodes.slice(offset, offset + counts[groupIndex]);
          const metrics = natural.slice(offset, offset + counts[groupIndex]);
          offset += counts[groupIndex];
          if (!group.length) return;
          const naturalWidth = metrics.reduce((sum, item) => sum + item.width, 0);
          const maxHeight = Math.max(...metrics.map((item) => item.height));
          const gap = naturalWidth / group.length * 0.12;
          const scale = Math.max(0.05, Math.min(3.8,
            Math.max(1, pocket.width) / (naturalWidth + gap * (group.length - 1)),
            Math.max(1, pocket.height) / maxHeight) * 0.9);
          const total = (naturalWidth + gap * (group.length - 1)) * scale;
          let x = pocket.x + (pocket.width - total) / 2;
          group.forEach((node, i) => {
            node.style.fontSize = `${100 * scale}px`;
            node.style.left = `${x}px`;
            node.style.top = `${pocket.y + (pocket.height - metrics[i].height * scale) / 2}px`;
            x += (metrics[i].width + gap) * scale;
          });
        });

        const masks = hero.querySelector(".hero-obstacle-masks");
        masks.textContent = "";
        [nav, statement, copy].forEach((box) => {
          const mask = document.createElement("span");
          const inset = box === nav ? 4 : margin * 0.55;
          mask.style.left = `${box.left - inset}px`;
          mask.style.top = `${box.top - inset}px`;
          mask.style.width = `${box.width + 2 * inset}px`;
          mask.style.height = `${box.height + 2 * inset}px`;
          masks.append(mask);
        });
        return [nav, statement, copy];
      }

      if (hero && !reduced && window.Matter) {
        const { Engine, Bodies, Body, Composite, Constraint } = Matter;
        let engine;
        let pointerBody;
        let pointerRadius = heroSettings.pointerRadius;
        let glyphs = [];
        let wordIndex = 0;
        let phase = "inflate";
        let phaseAt = 0;
        let popAt = [];
        let washTimer;
        const pointer = { x: -1000, y: -1000 };

        hero.addEventListener("pointermove", (event) => {
          const rect = hero.getBoundingClientRect();
          pointer.x = event.clientX - rect.left;
          pointer.y = event.clientY - rect.top;
        });
        hero.addEventListener("pointerleave", () => {
          pointer.x = -1000;
          pointer.y = -1000;
        });

        function startWord(now) {
          if (engine) Composite.clear(engine.world, false);
          engine = Engine.create({ gravity: { x: 0, y: 0, scale: 0 } });
          pointerBody = Bodies.circle(-1000, -1000, heroSettings.pointerRadius, {
            isStatic: true,
            friction: 0,
            collisionFilter: { category: 2, mask: 1 },
          });
          pointerRadius = heroSettings.pointerRadius;
          const width = hero.clientWidth;
          const height = hero.clientHeight;
          const walls = [
            Bodies.rectangle(width / 2, -90, width + 200, 180, { isStatic: true }),
            Bodies.rectangle(width / 2, height + 90, width + 200, 180, { isStatic: true }),
            Bodies.rectangle(-90, height / 2, 180, height + 200, { isStatic: true }),
            Bodies.rectangle(width + 90, height / 2, 180, height + 200, { isStatic: true }),
          ];
          const boxes = placeHeroWord(wordIndex);
          const obstacles = boxes.map((box) => Bodies.rectangle(
            box.left + box.width / 2,
            box.top + box.height / 2,
            box.width + 32,
            box.height + 32,
            { isStatic: true },
          ));
          Composite.add(engine.world, [pointerBody, ...walls, ...obstacles]);
          const heroRect = hero.getBoundingClientRect();
          glyphs = [...heroType.querySelectorAll(".glyph")].map((node, i) => {
            const rect = node.getBoundingClientRect();
            const home = {
              x: rect.left - heroRect.left + rect.width / 2,
              y: rect.top - heroRect.top + rect.height / 2,
            };
            const body = Bodies.rectangle(home.x, home.y, rect.width * 0.68, rect.height * 0.72, {
              frictionAir: 0.16,
              restitution: 0.15,
              collisionFilter: { category: 1, mask: 3 },
            });
            const tether = Constraint.create({
              pointA: home,
              bodyB: body,
              stiffness: 0.035,
              damping: 0.2,
            });
            Composite.add(engine.world, [body, tether]);
            return { node, body, tether, home, popped: false };
          });
          phase = "inflate";
          phaseAt = now;
          popAt = [];
        }

        function popGlyph(glyph) {
          glyph.popped = true;
          glyph.node.classList.add("is-popping");
          Composite.remove(engine.world, [glyph.body, glyph.tether]);
          const { x, y } = glyph.body.position;
          for (let i = 0; i < 10; i++) {
            const particle = document.createElement("span");
            const angle = Math.random() * Math.PI * 2;
            const distance = 90 + Math.random() * 240;
            particle.className = "particle";
            particle.style.left = `${x + (Math.random() - 0.5) * 45}px`;
            particle.style.top = `${y + (Math.random() - 0.5) * 45}px`;
            particle.style.setProperty("--size", `${3 + Math.random() * 8}px`);
            particle.style.setProperty("--tx", `${Math.cos(angle) * distance}px`);
            particle.style.setProperty("--ty", `${Math.sin(angle) * distance + 250}px`);
            particle.style.setProperty("--rot", `${(Math.random() - 0.5) * 900}deg`);
            confetti.append(particle);
            particle.addEventListener("animationend", () => particle.remove(), { once: true });
          }
        }

        function tick(now) {
          if (phase === "inflate" && now - phaseAt >= 700 + glyphs.length * 40) {
            phase = "live";
            phaseAt = now;
          } else if (phase === "live" && now - phaseAt >= heroSettings.cycleSeconds * 1000) {
            phase = "explode";
            phaseAt = now;
            const order = glyphs.map((_, i) => i);
            for (let i = order.length - 1; i > 0; i--) {
              const j = Math.floor(Math.random() * (i + 1));
              [order[i], order[j]] = [order[j], order[i]];
            }
            order.forEach((index, rank) => { popAt[index] = now + 170 + rank * heroSettings.popStagger; });
            label.classList.remove("is-washing");
            void label.offsetWidth;
            label.classList.add("is-washing");
            clearTimeout(washTimer);
            washTimer = setTimeout(() => label.classList.remove("is-washing"), 2400);
          }

          if (pointerRadius !== heroSettings.pointerRadius) {
            Body.scale(pointerBody, heroSettings.pointerRadius / pointerRadius,
              heroSettings.pointerRadius / pointerRadius);
            pointerRadius = heroSettings.pointerRadius;
          }
          Body.setPosition(pointerBody, pointer);
          Engine.update(engine, 1000 / 60);
          glyphs.forEach((glyph, i) => {
            if (glyph.popped) return;
            if (phase === "explode" && now >= popAt[i]) {
              popGlyph(glyph);
              return;
            }
            const { body, home, node } = glyph;
            const dx = body.position.x - pointer.x;
            const dy = body.position.y - pointer.y;
            const proximity = Math.exp(-(dx * dx + dy * dy) / (2 * 140 * 140));
            const enter = Math.min(1, Math.max(0.06, (now - phaseAt - i * 40) / 700));
            const inflate = phase === "inflate" ? 1 - Math.pow(1 - enter, 3) : 1;
            const scale = inflate * (1 + heroSettings.hoverPressure * proximity);
            node.style.transform = `translate3d(${(body.position.x - home.x).toFixed(1)}px, ${(body.position.y - home.y).toFixed(1)}px, 0) scale(${scale.toFixed(3)})`;
          });
          if (phase === "explode" && glyphs.every((glyph) => glyph.popped) &&
              now >= Math.max(...popAt) + 950) {
            wordIndex = (wordIndex + 1) % names.length;
            startWord(now);
          }
          requestAnimationFrame(tick);
        }

        restartHero = () => {
          wordIndex = 0;
          confetti.textContent = "";
          label.classList.remove("is-washing");
          startWord(performance.now());
        };
        document.fonts.ready.then(() => {
          restartHero();
          requestAnimationFrame(tick);
        });
        if (window.ResizeObserver) {
          const observer = new ResizeObserver(() => {
            if (engine) startWord(performance.now());
          });
          [hero, hero.querySelector(".topbar"), label, hero.querySelector(".hero-copy")]
            .forEach((element) => observer.observe(element));
        } else {
          addEventListener("resize", () => startWord(performance.now()));
        }
      } else if (hero) {
        document.fonts.ready.then(() => placeHeroWord(0));
        addEventListener("resize", () => placeHeroWord(0));
      }

      if (document.querySelector(".manifesto")) {
      const manifestoText =
        "Your customers ask ChatGPT, Claude, Gemini, and Perplexity, then take whatever answer appears. If you're not in it, you've disappeared. Zine puts agents on your site, blog, newsletter, and social, so you get a little more findable every week.";
      const highlight = new Set([
        "ChatGPT",
        "Claude",
        "Gemini",
        "Perplexity",
        "site",
        "blog",
        "newsletter",
        "social",
      ]);
      const tokens = manifestoText.match(/\S+/g);
      const sharpLayer = document.querySelector(".layer.sharp");
      const ghostLayer = document.querySelector(".layer.ghost");

      tokens.forEach((token) => {
        const clean = token.replace(/[.,]/g, "");
        [sharpLayer, ghostLayer].forEach((layer) => {
          const span = document.createElement("span");
          span.className = "word";
          if (highlight.has(clean)) span.classList.add("pill");
          span.textContent = token;
          layer.append(span);
        });
      });

      if (!reduced && window.Lenis) {
        const lenis = new Lenis({
          duration: 1,
          easing: (t) => 1 - Math.pow(1 - t, 4),
          smoothWheel: true,
          touchMultiplier: 2,
          wheelMultiplier: 1.35,
        });
        function raf(time) {
          lenis.raf(time);
          requestAnimationFrame(raf);
        }
        requestAnimationFrame(raf);
      }

      const sharpWords = [...document.querySelectorAll(".sharp .word")];
      const ghostWords = [...document.querySelectorAll(".ghost .word")];

      function clamp(value, min, max) {
        return Math.max(min, Math.min(max, value));
      }

      setWordProgress = (progress) => {
        const spread = Number(getComputedStyle(root).getPropertyValue("--scroll-spread")) || 6.2;
        sharpWords.forEach((word, index) => {
          const start = (index / tokens.length) * 0.82;
          const local = clamp((progress - start) * spread, 0, 1);
          const ghost =
            local < 0.52 ? local / 0.52 : 1 - (local - 0.52) / 0.48;
          word.style.setProperty("--sharp", local.toFixed(3));
          ghostWords[index].style.setProperty("--ghost", clamp(ghost, 0, 1).toFixed(3));
        });
      };

      if (!reduced && window.gsap && window.ScrollTrigger) {
        gsap.registerPlugin(ScrollTrigger);
        ScrollTrigger.create({
          trigger: ".manifesto",
          start: "top top",
          end: "bottom bottom",
          scrub: true,
          onUpdate: (self) => setWordProgress(self.progress),
        });
      } else {
        const update = () => {
          const section = document.querySelector(".manifesto");
          const rect = section.getBoundingClientRect();
          setWordProgress(clamp(-rect.top / (rect.height - innerHeight), 0, 1));
        };
        update();
        addEventListener("scroll", update, { passive: true });
        addEventListener("resize", update);
      }

      setWordProgress(0);
      }
    </script>
  </body>
</html>