1c:I[55681,["/_next/static/immutable/chunks/32wiwqr_dmsge.js","/_next/static/immutable/chunks/3_yicwx8vamj2.js","/_next/static/immutable/chunks/3rxrzhpiav1f7.js","/_next/static/immutable/chunks/3lmgm81vbm96h.js","/_next/static/immutable/chunks/3g2b2lx2y2nyb.js","/_next/static/immutable/chunks/3j0_m6y4s6or6.js","/_next/static/immutable/chunks/06blemz8y8rbs.js"],"default"] 1d:T112e,"use client"; import { useEffect, useRef, useState } from "react"; import { mountDeskComputer, type DeskEngine } from "./desk-computer-engine"; import "./desk-computer.css"; /** * Desk Computer — an isometric late-90s desk computer you can use. * * A beige CRT on a swivel base showing a browser with a search box, a * mid-tower with a CD-ROM and a floppy drive, a 104-key keyboard, a ball mouse * on its pad, a speaker and a CD-R in its jewel case, joined by cables. It is * one SVG, built in true isometric with the Anatomy kit, and every colour on * it is a token with a value for each theme. * * Focus it and type: the keys go down and the text lands in the search box; * Enter searches and the hard-drive LED flickers. Drag the mouse around its * pad — its cable follows and the cursor moves on the CRT. Click the jewel * case and the drive's tray slides out, the disc flies in and AutoPlay opens; * click the drive to eject it. Escape or the monitor's power button collapses * the picture to a line and a dot. It assembles itself on arrival and on every * theme change, and while nobody is touching it, it gives itself a tour. * * The drawing is ~480KB of SVG, so it is fetched at mount (from `src`) rather * than shipped in the bundle; desk-computer-engine.ts is everything it does. */ export type DeskComputerProps = { theme?: "light" | "dark"; /** Key clicks and the CRT's power-on hum and power-off zap, synthesised. Only your own input makes sound. */ sound?: boolean; /** Fill the container edge to edge; otherwise it keeps the drawing's own 1000:760 shape. */ fill?: boolean; /** Where the drawing is served from. */ src?: string; }; export default function DeskComputer({ theme = "light", sound = true, fill = false, src = "/library/desk-computer.svg" }: DeskComputerProps) { const stageRef = useRef(null); const artRef = useRef(null); const statusRef = useRef(null); const engineRef = useRef(null); const soundRef = useRef(sound); soundRef.current = sound; const [state, setState] = useState<"loading" | "ready" | "failed">("loading"); /* fetch the drawing, inline it, and start the engine on it */ useEffect(() => { const stage = stageRef.current; const art = artRef.current; const status = statusRef.current; if (!stage || !art || !status) return; const abort = new AbortController(); let engine: DeskEngine | null = null; setState("loading"); fetch(src, { signal: abort.signal }) .then((r) => { if (!r.ok) throw new Error(`${r.status} ${r.statusText}`); return r.text(); }) .then((markup) => { if (abort.signal.aborted) return; art.innerHTML = markup; const svg = art.querySelector("svg"); if (!svg) throw new Error("the drawing has no

{state === "failed" &&

The drawing couldn’t be loaded from {src}.

}

); } 1e:Tbf4e,/** * Desk Computer — the live engine. * * Everything the figure does after it is drawn: the keyboard types into the * search box on the CRT, the mouse drags on its pad with its cable following * and a cursor moving on the screen, the CD flies from its jewel case into the * drive and AutoPlay opens, the CRT warms up and collapses, the system * assembles itself, and — while nobody touches it — it gives itself a tour. * Every sound is synthesised with Web Audio, and only the visitor's own input * makes any. * * It runs on the SVG the figure was built as (public/library/desk-computer.svg), * scoped to one stage element, and it cleans up after itself: every listener * hangs off one AbortController, and the frame loop, timers, observer and * audio context all stop on destroy(). * * The isometric helpers below are adapted from the Anatomy skill's kit — * https://github.com/wheresryan22/anatomy, MIT, © 2026 Ryan — which the figure * itself was built with. */ type Vec2 = [number, number]; type Vec3 = [number, number, number]; type Projection = { origin: Vec2; scale: number; azimuth: number; elevation: number }; type Plan = { x: number; y: number; w: number; d: number; r: number }; type Paths = { fill: string; outline: string; crease: string; top: string; shades: string[]; bevel?: string }; /* the figure's own geometry, exported with its SVG (Port/figure/export-pinui.mjs) */ type DeskData = { P: Projection; keys: string[]; crtMid: number; queryX: number; queryMax: number; scale: number; window: { u0: number; u1: number; z0: number; z1: number }; search: { u0: number; u1: number; z0: number; z1: number }; cursor: { u: number; z: number }; mouse: { centre: Vec2; tip: Vec3; dir: Vec3; padTop: number; edge: Vec3; padY: Vec2; anchor: Vec3; tangent: Vec3; r: number; range: { x: Vec2; y: Vec2 }; }; tray: { front: number; y0: number; y1: number; body: { y0: number; y1: number; z: number; h: number }; plate: { z0: number; z1: number; t: number }; travel: number; bay: { u0: number; u1: number; z0: number; z1: number }; }; disc: { r: number; home: Vec3 }; }; const D = { "P": { "origin": [ 285.7585, 513.2772 ], "scale": 1.83, "azimuth": 41, "elevation": 30 }, "crtMid": 69, "queryX": -12.8, "queryMax": 25, "scale": 2.3147, "window": { "u0": -30.5, "u1": 28.5, "z0": 48, "z1": 94.5 }, "search": { "u0": -17, "u1": 17, "z0": 54, "z1": 61.5 }, "cursor": { "u": 6, "z": 70 }, "mouse": { "centre": [ 103, -164 ], "tip": [ 87.9941, -166.4216, 2.9 ], "dir": [ -0.9872, -0.1593, 0 ], "padTop": 1.4, "edge": [ 68.5, -157.5, 2.75 ], "padY": [ -188, -142 ], "anchor": [ 59.4708, -152.7058, 1.5694 ], "tangent": [ -0.6754, 0.7332, -0.0789 ], "r": 0.85, "range": { "x": [ -16, 11 ], "y": [ -18.8, 16.8 ] } }, "tray": { "front": 44, "y0": -171, "y1": -121, "body": { "y0": -167, "y1": -125, "z": 131, "h": 2.2 }, "plate": { "z0": 129.4, "z1": 137.4, "t": 1.6 }, "travel": 48, "bay": { "u0": 120, "u1": 172, "z0": 129.4, "z1": 137.6 } }, "disc": { "r": 19, "home": [ 127.5, 80, 3.6 ] }, "keys": ["Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace", "Tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\", "CapsLock", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter", "Shift", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "ShiftRight", "Control", "Meta", "Alt", " ", "AltRight", "MetaRight", "ContextMenu", "ControlRight", "Insert", "Home", "PageUp", "Delete", "End", "PageDown", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight", "NumLock", "NumpadDivide", "NumpadMultiply", "NumpadSubtract", "Numpad7", "Numpad8", "Numpad9", "NumpadAdd", "Numpad4", "Numpad5", "Numpad6", "Numpad1", "Numpad2", "Numpad3", "NumpadEnter", "Numpad0", "NumpadDecimal"] } as DeskData; /* ------------------------------------------------------------------------ */ /* isometric helpers (Anatomy kit, MIT) */ /* ------------------------------------------------------------------------ */ const RADIANS = Math.PI / 180; const UNIT = Math.sqrt(1.6); const SHADES = 4; function cameraOf({ scale, azimuth, elevation }: Projection) { const a = azimuth * RADIANS; const e = elevation * RADIANS; return { sinA: Math.sin(a), cosA: Math.cos(a), sinE: Math.sin(e), cosE: Math.cos(e), k: scale * UNIT }; } function iso([x, y, z]: Vec3, projection: Projection): Vec2 { const { origin } = projection; const { sinA, cosA, sinE, cosE, k } = cameraOf(projection); return [origin[0] + (x * sinA - y * cosA) * k, origin[1] + ((x * cosA + y * sinA) * sinE - z * cosE) * k]; } function towardViewer(projection: Projection): Vec2 { const { sinA, cosA } = cameraOf(projection); return [cosA, sinA]; } const tenth = (value: number) => { const text = (Math.round(value * 10) / 10).toFixed(1).replace(/\.0$/, ""); return text === "-0" ? "0" : text; }; function pathOf(points: Vec2[], closed = false) { if (!points.length) return ""; return points.map(([x, y], at) => `${at ? "L" : "M"}${tenth(x)} ${tenth(y)}`).join("") + (closed ? "Z" : ""); } function roundedPlan({ x, y, w, d, r }: Plan, steps = 8): Vec2[] { const radius = Math.max(0, Math.min(r, w / 2, d / 2)); const corners: Vec3[] = [ [x + w - radius, y + radius, -90], [x + w - radius, y + d - radius, 0], [x + radius, y + d - radius, 90], [x + radius, y + radius, 180], ]; const out: Vec2[] = []; for (const [cx, cy, start] of corners) { const count = radius > 0 ? steps : 0; for (let step = 0; step <= count; step++) { const angle = (start + (count ? (90 * step) / count : 45)) * RADIANS; out.push([cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]); } } return out; } function signedArea(points: Vec2[]) { let area = 0; for (let i = 0; i < points.length; i++) { const [ax, ay] = points[i]; const [bx, by] = points[(i + 1) % points.length]; area += ax * by - bx * ay; } return area / 2; } const oriented = (points: Vec2[]) => (signedArea(points) < 0 ? [...points].reverse() : points); function convexHull(points: Vec2[]): Vec2[] { const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]); if (sorted.length < 3) return sorted; const cross = (o: Vec2, a: Vec2, b: Vec2) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]); const lower: Vec2[] = []; for (const point of sorted) { while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], point) <= 0) lower.pop(); lower.push(point); } const upper: Vec2[] = []; for (let i = sorted.length - 1; i >= 0; i--) { const point = sorted[i]; while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], point) <= 0) upper.pop(); upper.push(point); } return [...lower.slice(0, -1), ...upper.slice(0, -1)]; } function runsOf(flags: boolean[], want: boolean): number[][] { const count = flags.length; const runs: number[][] = []; const start = flags.findIndex((flag, i) => flag !== flags[(i + count - 1) % count]); if (start < 0) return flags[0] === want ? [Array.from({ length: count + 1 }, (_, i) => i % count)] : []; let run: number[] | null = null; for (let step = 0; step < count; step++) { const i = (start + step) % count; if (flags[i] === want) { if (!run) run = [i]; run.push((i + 1) % count); } else if (run) { runs.push(run); run = null; } } if (run) runs.push(run); return runs; } /* a convex extrusion of a plan ring: its fill, outline, creases, top and four shade buckets */ function extrude(ringPts: Vec2[], z: number, height: number, projection: Projection, bevelBy = 0): Paths { const count = ringPts.length; const counter = signedArea(ringPts) > 0; const [vx, vy] = towardViewer(projection); const { sinA, cosA } = cameraOf(projection); const normals: Vec2[] = ringPts.map(([ax, ay], i) => { const [bx, by] = ringPts[(i + 1) % count]; const dx = bx - ax; const dy = by - ay; const length = Math.hypot(dx, dy) || 1; return counter ? [dy / length, -dx / length] : [-dy / length, dx / length]; }); const facing = normals.map(([nx, ny]) => nx * vx + ny * vy > 1e-9); const top = ringPts.map(([x, y]) => iso([x, y, z + height], projection)); const bottom = ringPts.map(([x, y]) => iso([x, y, z], projection)); const outline: string[] = []; const crease: string[] = []; for (const run of runsOf(facing, false)) outline.push(pathOf(run.map((i) => top[i]))); for (const run of runsOf(facing, true)) { crease.push(pathOf(run.map((i) => top[i]))); if (height > 0) outline.push(pathOf(run.map((i) => bottom[i]))); } if (height > 0) { for (let i = 0; i < count; i++) if (facing[(i + count - 1) % count] !== facing[i]) outline.push(pathOf([top[i], bottom[i]])); } const fill = pathOf(convexHull([...top, ...bottom]), true); const buckets: string[][] = Array.from({ length: SHADES }, () => []); if (height > 0) { const [lx, ly] = [-sinA, cosA]; for (let i = 0; i < count; i++) { if (!facing[i]) continue; const [nx, ny] = normals[i]; const lit = (nx * lx + ny * ly + 1) / 2; const shade = Math.min(SHADES - 1, Math.max(0, Math.floor(lit * SHADES))); const next = (i + 1) % count; buckets[shade].push(pathOf(oriented([top[i], top[next], bottom[next], bottom[i]]), true)); } } let bevel: string | undefined; if (bevelBy > 0) { const inset: Vec2[] = ringPts.map(([x, y], i) => { const [ax, ay] = normals[(i + count - 1) % count]; const [bx, by] = normals[i]; const mx = ax + bx; const my = ay + by; const length = Math.hypot(mx, my) || 1; return [x - (mx / length) * bevelBy, y - (my / length) * bevelBy]; }); const insetTop = inset.map(([x, y]) => iso([x, y, z + height], projection)); bevel = runsOf(facing, true) .map((run) => pathOf([top[run[0]], ...run.slice(1, -1).map((i) => insetTop[i]), top[run[run.length - 1]]])) .join(""); } return { fill, outline: outline.join(""), crease: crease.join(""), top: pathOf(oriented(top), true), shades: buckets.map((p) => p.join("")), bevel }; } const slabOf = (plan: Plan, z: number, height: number, projection: Projection, steps = 8, bevel = 0) => extrude(roundedPlan(plan, steps), z, height, projection, bevel); const circleRing = (cx: number, cy: number, radius: number, steps = 40): Vec2[] => Array.from({ length: steps }, (_, step) => { const angle = (step / steps) * Math.PI * 2; return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]; }); const onTop = (points: Vec2[], z: number, projection: Projection, closed = false) => pathOf(points.map(([x, y]) => iso([x, y, z], projection)), closed); const planOutline = (plan: Plan, z: number, projection: Projection, steps = 8) => onTop(roundedPlan(plan, steps), z, projection, true); const ring = (cx: number, cy: number, radius: number, z: number, projection: Projection, steps = 40) => onTop(circleRing(cx, cy, radius, steps), z, projection, true); function axisVector(projection: Projection, [dx, dy, dz]: Vec3): Vec2 { const origin = iso([0, 0, 0], projection); const moved = iso([dx, dy, dz], projection); return [moved[0] - origin[0], moved[1] - origin[1]]; } const fine = (value: number) => Math.round(value * 100) / 100; function translateAlong(projection: Projection, by: Vec3) { const [x, y] = axisVector(projection, by); return `translate(${fine(x)} ${fine(y)})`; } const thousandth = (value: number) => Math.round(value * 1000) / 1000; function axesAt(at: Vec2, z: number, projection: Projection) { const origin = iso([at[0], at[1], z], projection); const along = (point: Vec3): Vec2 => { const [px, py] = iso(point, projection); return [px - origin[0], py - origin[1]]; }; return { origin, x: along([at[0] + 1, at[1], z]), y: along([at[0], at[1] + 1, z]), z: along([at[0], at[1], z + 1]) }; } const matrixOf = (u: Vec2, v: Vec2, origin: Vec2) => `matrix(${thousandth(u[0])} ${thousandth(u[1])} ${thousandth(v[0])} ${thousandth(v[1])} ${thousandth(origin[0])} ${thousandth(origin[1])})`; function sideMatrix(at: Vec2, z: number, projection: Projection, face: "left" | "right") { const { origin, x, y, z: up } = axesAt(at, z, projection); const down: Vec2 = [-up[0], -up[1]]; return face === "left" ? matrixOf(x, down, origin) : matrixOf([-y[0], -y[1]], down, origin); } function solidSvg(paths: Paths, tone = "hi", crease = "faint") { const parts = [``]; paths.shades.forEach((d, shade) => { if (d) parts.push(``); }); parts.push(``); if (paths.crease) parts.push(``); if (paths.bevel) parts.push(``); parts.push(``); return `${parts.join("")}`; } const lineSvg = (d: string, tone: string) => (d ? `` : ""); /* ------------------------------------------------------------------------ */ /* sound */ /* ------------------------------------------------------------------------ */ type ToneOpts = { type?: OscillatorType; f0?: number; f1?: number; gain?: number; attack?: number; filter?: number }; type NoiseOpts = { type?: BiquadFilterType; freq?: number; q?: number; gain?: number; attack?: number }; const HEAVY = new Set([" ", "Enter", "NumpadEnter", "Backspace", "Shift", "ShiftRight", "Tab", "CapsLock", "NumpadAdd", "Numpad0"]); /* everything synthesised: no files. The context is made on the first gesture, as browsers require */ function makeSound(initiallyMuted: boolean) { let ctx: AudioContext | null = null; let master: GainNode | null = null; let noiseBuf: AudioBuffer | null = null; let muted = initiallyMuted; const ensure = () => { if (ctx) return ctx; const AC = window.AudioContext ?? (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (!AC) return null; ctx = new AC(); master = ctx.createGain(); master.gain.value = 0.8; const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -16; comp.ratio.value = 4; master.connect(comp).connect(ctx.destination); noiseBuf = ctx.createBuffer(1, ctx.sampleRate, ctx.sampleRate); const d = noiseBuf.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1; return ctx; }; const ready = () => !muted && ensure() !== null && ctx!.state === "running"; const jitter = (v: number, amount: number) => v * (1 - amount + Math.random() * amount * 2); /* a filtered noise burst with a fast attack and an exponential decay */ const noise = (t: number, dur: number, { type = "bandpass", freq = 3000, q = 1, gain = 0.2, attack = 0.001 }: NoiseOpts = {}) => { const c = ctx!; const src = c.createBufferSource(); src.buffer = noiseBuf; const f = c.createBiquadFilter(); f.type = type; f.frequency.value = freq; f.Q.value = q; const g = c.createGain(); g.gain.setValueAtTime(0.0001, t); g.gain.exponentialRampToValueAtTime(gain, t + attack); g.gain.exponentialRampToValueAtTime(0.0001, t + dur); src.connect(f).connect(g).connect(master!); src.start(t, Math.random() * 0.8, dur + 0.05); }; /* an oscillator gliding from f0 to f1, enveloped the same way */ const tone = (t: number, dur: number, { type = "sine", f0 = 200, f1 = f0, gain = 0.2, attack = 0.002, filter = 0 }: ToneOpts = {}) => { const c = ctx!; const o = c.createOscillator(); o.type = type; o.frequency.setValueAtTime(f0, t); if (f1 !== f0) o.frequency.exponentialRampToValueAtTime(f1, t + dur); const g = c.createGain(); g.gain.setValueAtTime(0.0001, t); g.gain.exponentialRampToValueAtTime(gain, t + attack); g.gain.exponentialRampToValueAtTime(0.0001, t + dur); let node: AudioNode = o; if (filter) { const lp = c.createBiquadFilter(); lp.type = "lowpass"; lp.frequency.value = filter; node = o.connect(lp); } node.connect(g).connect(master!); o.start(t); o.stop(t + dur + 0.05); }; return { unlock() { if (muted || !ensure()) return; if (ctx!.state === "suspended") void ctx!.resume(); }, setMuted(next: boolean) { muted = next; if (!next) this.unlock(); }, /* a key going down (bottom-out click and case thock), then its lighter return click */ key(code: string) { if (!ready()) return; const t = ctx!.currentTime + 0.002; const heavy = HEAVY.has(code); const v = jitter(1, 0.15); noise(t, heavy ? 0.03 : 0.02, { freq: jitter(heavy ? 2300 : 3500, 0.12), q: 1.3, gain: (heavy ? 0.42 : 0.34) * v }); tone(t, heavy ? 0.1 : 0.055, { f0: jitter(heavy ? 150 : 230, 0.08), f1: heavy ? 70 : 115, gain: (heavy ? 0.42 : 0.2) * v }); if (heavy) noise(t + 0.012, 0.05, { type: "highpass", freq: 5200, q: 0.7, gain: 0.05 * v }); noise(t + jitter(0.085, 0.15), 0.014, { freq: jitter(4300, 0.1), q: 1.6, gain: 0.12 * v }); }, /* relay, degauss hum, static as the picture blooms, a fading flyback whine */ powerOn() { if (!ready()) return; const c = ctx!; const t = c.currentTime + 0.01; noise(t, 0.012, { type: "highpass", freq: 1800, gain: 0.45 }); tone(t, 0.09, { f0: 95, f1: 50, gain: 0.32 }); const hum = c.createOscillator(); const hum2 = c.createOscillator(); const lp = c.createBiquadFilter(); const g = c.createGain(); hum.type = "sawtooth"; hum.frequency.value = 60; hum2.type = "sine"; hum2.frequency.value = 120; lp.type = "lowpass"; lp.frequency.setValueAtTime(380, t); lp.frequency.exponentialRampToValueAtTime(140, t + 1.2); g.gain.setValueAtTime(0.0001, t + 0.04); g.gain.exponentialRampToValueAtTime(0.26, t + 0.14); g.gain.exponentialRampToValueAtTime(0.0001, t + 1.25); hum.connect(lp); hum2.connect(lp); lp.connect(g).connect(master!); hum.start(t); hum2.start(t); hum.stop(t + 1.3); hum2.stop(t + 1.3); for (let i = 0; i < 9; i++) noise(t + 0.12 + Math.random() * 0.4, 0.02 + Math.random() * 0.03, { type: "highpass", freq: 2800, gain: 0.04 + Math.random() * 0.08 }); tone(t + 0.2, 2.2, { f0: 15734, gain: 0.008, attack: 0.4 }); }, /* relay, then a falling zap as the picture collapses to a line and a dot */ powerOff() { if (!ready()) return; const t = ctx!.currentTime + 0.005; noise(t, 0.012, { type: "highpass", freq: 1800, gain: 0.4 }); tone(t, 0.26, { type: "triangle", f0: 900, f1: 45, gain: 0.16, attack: 0.004 }); noise(t, 0.32, { freq: 1300, q: 0.8, gain: 0.1, attack: 0.004 }); tone(t + 0.02, 0.16, { f0: 75, f1: 40, gain: 0.22 }); }, close() { void ctx?.close(); ctx = null; }, }; } /* ------------------------------------------------------------------------ */ /* the engine */ /* ------------------------------------------------------------------------ */ export type DeskEngine = { /** The system assembles itself again — the figure does this on every theme change. */ replayIntro: () => void; setMuted: (muted: boolean) => void; destroy: () => void; }; const PHRASES = ["anatomy isometric", "windows 98 themes", "how does a crt work"]; const SHIFTED: Record = { "~": "`", "!": "1", "@": "2", "#": "3", $: "4", "%": "5", "^": "6", "&": "7", "*": "8", "(": "9", ")": "0", _: "-", "+": "=", "{": "[", "}": "]", "|": "\\", ":": ";", '"': "'", "<": ",", ">": ".", "?": "/" }; const DOWN = 1.6; type Vec = Vec3; const add = (a: Vec, b: Vec): Vec => [a[0] + b[0], a[1] + b[1], a[2] + b[2]]; const mul = (a: Vec, s: number): Vec => [a[0] * s, a[1] * s, a[2] * s]; const sub = (a: Vec, b: Vec): Vec => [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; const unit = (a: Vec): Vec => { const l = Math.hypot(a[0], a[1], a[2]) || 1; return [a[0] / l, a[1] / l, a[2] / l]; }; const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const ease = (t: number) => 1 - Math.pow(1 - clamp(t, 0, 1), 3); const easeInOut = (t: number) => { t = clamp(t, 0, 1); return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }; export function mountDeskComputer({ stage, svg, readout, status, muted: initiallyMuted, }: { /** The focusable element the figure sits in: it takes the keys and the pointer. */ stage: HTMLElement; svg: SVGSVGElement; /** Where a running "on · 12 chars · key a" line is written, if you want one. */ readout?: HTMLElement | null; /** A polite live region for what just happened. */ status: HTMLElement; muted: boolean; }): DeskEngine { const P = D.P; const KEYS = D.keys; const ac = new AbortController(); const signal = ac.signal; const timers = new Set(); const later = (fn: () => void, ms: number) => { const t = window.setTimeout(() => { timers.delete(t); fn(); }, ms); timers.add(t); return t; }; const cancel = (t: number) => { clearTimeout(t); timers.delete(t); }; const need = (el: T | null, what: string): T => { if (!el) throw new Error(`DeskComputer: the figure has no ${what}`); return el; }; const $ = (part: string) => need(svg.querySelector(`[data-part="${part}"]`), part); const keyEls = KEYS.map((_, i) => need(svg.querySelector(`[data-key="${i}"]`), `key ${i}`)); const query = $("query"); const caret = $("caret"); const crt = $("crt"); const beam = $("beam"); const dot = $("dot"); const glass = need(svg.querySelector(".pc-glass"), "glass"); const monLed = $("mon-led"); const hddLed = $("hdd-led"); const cdLed = $("cd-led"); const kbLeds = [0, 1, 2].map((i) => $("kb-led" + i)); const mouseEl = $("mouse"); const mouseHalo = $("mouse-halo"); const mousePress = $("mouse-press"); const cablePaths = Array.from($("mouse-cable").querySelectorAll("path")); const cursorEl = $("cursor"); const arrowEl = $("arrow"); const ibeamEl = $("ibeam"); const autoplayEl = $("autoplay"); const trayEl = $("cd-tray"); const flyEl = $("fly"); const caseDisc = $("case-disc"); const still = matchMedia("(prefers-reduced-motion: reduce)"); const down = axisVector(P, [0, 0, -1]); const follow = (v: number, to: number, dt: number, tau: number) => (still.matches ? to : v + (to - v) * (1 - Math.exp(-dt / tau))); const pt = (p: Vec) => { const s = iso(p, P); return s[0].toFixed(2) + " " + s[1].toFixed(2); }; /* ── state ── */ const keyState = KEYS.map(() => ({ at: 0, held: 0 })); const active = new Set(); let line = ""; let lastKey = ""; let power = 0; let powerClock = 9; let searches = 0; let hdd = 0; let caps = false; let frame = 0; let previous = 0; let visible = false; let touring = false; let idleTimer = 0; let booted = false; let alive = true; let tour = { phrase: 0, step: "aim", index: 0, wait: 0.4 }; const waiters: { test: () => boolean; done: () => void }[] = []; /* the mouse: its centre's offset on the pad (world units), its target, and what the cursor is over */ const mouse = { x: 0, y: 0, tx: 0, ty: 0, tau: 0.32, press: 0, dragging: false, drawn: "" }; let cursorOver = ""; /* the CD: where the disc is, the tray's travel (0 shut, 1 out), the disc's flight, AutoPlay */ const cd = { at: "case" as "case" | "drive", tray: 0, trayTo: 0, flight: null as null | { t: number; toDrive: boolean }, spin: 0, busy: false, read: 0, autoplay: 0, autoplayTo: 0, autoplayTimer: 0, drawnTray: -1, }; const until = (test: () => boolean) => new Promise((done) => { waiters.push({ test, done }); run(); }); const sleep = (ms: number) => new Promise((done) => later(done, still.matches ? 0 : ms)); const sfx = makeSound(initiallyMuted); /* true while handling the visitor's own input, so the idle tour stays silent */ let byUser = false; const asUser = (fn: () => void) => { byUser = true; try { fn(); } finally { byUser = false; } }; for (const type of ["pointerdown", "keydown"] as const) stage.addEventListener(type, () => sfx.unlock(), { capture: true, signal }); /* ── keyboard and screen ── */ const indexOf = (code: string) => KEYS.indexOf(code); let repeating = false; function press(code: string, hold = 0.09) { const i = indexOf(code); if (i < 0) return; keyState[i].held = hold; active.add(i); if (byUser && !repeating && code !== "Shift" && code !== "ShiftRight") sfx.key(code); else if (byUser && !repeating && keyState[i].at === 0) sfx.key(code); run(); } function type(char: string) { if (!power) return; const lower = char.toLowerCase(); const code = SHIFTED[char] || lower; if (indexOf(code) < 0) return; if (SHIFTED[char] || char !== lower) press("Shift", 0.14); press(code); lastKey = char === " " ? "space" : char; if (line.length < 60) line += char; write(); } function erase() { if (!power) return; press("Backspace"); lastKey = "backspace"; line = line.slice(0, -1); write(); } function enter() { if (!power) return; press("Enter"); lastKey = "return"; if (line.trim()) { searches++; hdd = 0.9; status.textContent = "Searching for " + line + "."; } line = ""; write(); run(); } function write() { query.textContent = line; let shown = line; while (shown.length && query.getComputedTextLength() > D.queryMax) { shown = shown.slice(1); query.textContent = shown; } caret.setAttribute("x", String(D.queryX + (shown ? query.getComputedTextLength() + 0.3 : 0))); const parts = power ? ["on", line.length + " chars"] : ["off"]; if (power && searches) parts.push(searches + (searches === 1 ? " search" : " searches")); if (cd.at === "drive") parts.push("CD in drive"); if (power && lastKey) parts.push("key " + lastKey); const text = parts.join(" · "); if (readout && readout.textContent !== text) readout.textContent = text; } function setPower(next: number) { if (next === power) return; power = next; if (byUser) { if (power) sfx.powerOn(); else sfx.powerOff(); } powerClock = still.matches ? 9 : 0; monLed.style.opacity = power ? "" : "0.15"; status.textContent = power ? "Screen on." : "Screen off."; write(); run(); } function crtFrame() { const t = powerClock; let sx = 1; let sy = 1; let beamAt = 0; let dotAt = 0; if (power) { if (t < 0.14) { sx = ease(t / 0.14); sy = 0.012; beamAt = 1; } else if (t < 0.36) { sy = 0.012 + 0.988 * ease((t - 0.14) / 0.22); beamAt = 1 - ease((t - 0.14) / 0.22); } } else if (t < 0.1) { sy = 1 - 0.988 * ease(t / 0.1); beamAt = ease(t / 0.1); } else if (t < 0.26) { sy = 0.012; sx = 1 - ease((t - 0.1) / 0.16); beamAt = 1; } else { sx = 0; sy = 0; dotAt = Math.max(0, 1 - (t - 0.26) / 0.5); } crt.setAttribute("transform", `translate(0 ${-D.crtMid}) scale(${Math.max(sx, 0.0001).toFixed(3)} ${Math.max(sy, 0.0001).toFixed(3)}) translate(0 ${D.crtMid})`); beam.setAttribute("transform", `translate(0 ${-D.crtMid}) scale(${Math.max(sx, 0.001).toFixed(3)} 1) translate(0 ${D.crtMid})`); beam.style.opacity = beamAt.toFixed(2); dot.style.opacity = dotAt.toFixed(2); glass.style.fill = power || t < 0.26 ? "" : "var(--pc-glass-off)"; return t > 0.8; } /* ── the mouse, its cable and the cursor ── */ const M = D.mouse; const ax = axisVector(P, [1, 0, 0]); const ay = axisVector(P, [0, 1, 0]); const det = ax[0] * ay[1] - ay[0] * ax[1]; const toWorld = (dx: number, dy: number): Vec2 => [(dx * ay[1] - ay[0] * dy) / det, (ax[0] * dy - dx * ax[1]) / det]; const svgPoint = (event: PointerEvent) => { const p = svg.createSVGPoint(); p.x = event.clientX; p.y = event.clientY; const m = svg.getScreenCTM(); return m ? p.matrixTransform(m.inverse()) : p; }; function aimMouse(x: number, y: number, tau = 0.32) { mouse.tx = clamp(x, M.range.x[0], M.range.x[1]); mouse.ty = clamp(y, M.range.y[0], M.range.y[1]); mouse.tau = tau; run(); } /* the cursor on the CRT moves with the mouse: forward (−x) is up, right (−y) is right */ const cursorAt = (x: number, y: number): Vec2 => [clamp(D.cursor.u - y * 1.55, D.window.u0, D.window.u1), clamp(D.cursor.z - x * 1.4, D.window.z0, D.window.z1)]; const mouseFor = (u: number, z: number): Vec2 => [(D.cursor.z - z) / 1.4, (D.cursor.u - u) / 1.55]; function overOf(u: number, z: number) { const S = D.search; if (cd.autoplay > 0.5 && u > 6 && u < 18 && z > 52.4 && z < 57) return "open"; if (u > S.u0 && u < S.u1 && z > S.z0 && z < S.z1) return "search"; return ""; } function drawMouse() { const shift = translateAlong(P, [mouse.x, mouse.y, 0]); mouseEl.setAttribute("transform", shift); mouseHalo.setAttribute("transform", shift); mousePress.setAttribute("transform", mouse.press > 0 ? translateAlong(P, [0, 0, -0.45 * Math.sin(Math.PI * clamp(mouse.press / 0.16, 0, 1))]) : ""); /* the cable: from the strain relief over the pad, down its edge, into the static run on the floor */ const tip: Vec = [M.tip[0] + mouse.x, M.tip[1] + mouse.y, M.tip[2]]; const edge: Vec = [M.edge[0], clamp(lerp(M.edge[1], tip[1], 0.55), M.padY[0], M.padY[1]), M.edge[2]]; const drop = unit([M.anchor[0] - edge[0], M.anchor[1] - edge[1], 0]); const reach = Math.max(4, 0.42 * Math.hypot(edge[0] - tip[0], edge[1] - tip[1])); const d = "M" + pt(tip) + "C" + pt(add(tip, mul(M.dir, reach))) + " " + pt(sub(edge, mul(drop, 4))) + " " + pt(edge) + "C" + pt(add(edge, mul(drop, 2.4))) + " " + pt(sub(M.anchor, mul(M.tangent, 2.4))) + " " + pt(M.anchor); if (d !== mouse.drawn) { mouse.drawn = d; const w = 2 * M.r * D.scale; cablePaths.forEach((path, i) => { path.setAttribute("d", d); path.style.strokeWidth = [w + 0.95, w - 0.95, w * 0.28][i].toFixed(2); }); cablePaths[2]?.setAttribute("transform", `translate(${(-0.16 * w).toFixed(2)} ${(-0.22 * w).toFixed(2)})`); } const [u, z] = cursorAt(mouse.x, mouse.y); cursorEl.setAttribute("transform", `translate(${u.toFixed(2)} ${(-z).toFixed(2)})`); const over = overOf(u, z); if (over !== cursorOver) { cursorOver = over; arrowEl.style.display = over === "search" ? "none" : ""; ibeamEl.style.display = over === "search" ? "" : "none"; } } function mouseClick() { mouse.press = 0.16; run(); if (!power) return; if (cursorOver === "search") { status.textContent = "Search box focused."; caret.style.animation = "none"; void caret.getBBox(); caret.style.animation = ""; } if (cursorOver === "open") { cd.autoplayTo = 0; status.textContent = "AutoPlay closed."; } } /* ── the CD-ROM: tray, disc and AutoPlay ── */ const T = D.tray; const discAtTray = (ext: number): Vec => [T.front + ext - T.plate.t - 21.5, (T.body.y0 + T.body.y1) / 2, T.body.z + T.body.h + 0.05]; const frontPlane = (x: number) => sideMatrix([x, 0], 0, P, "right"); const faceRect = (u0: number, z0: number, u1: number, z1: number, r: number) => pathOf(roundedPlan({ x: u0, y: z0, w: u1 - u0, d: z1 - z0, r }, 3).map(([u, z]): Vec2 => [u, -z]), true); function discMarkup(c: Vec, spin: number) { const R = D.disc.r; const [x, y, z] = c; const circle = (r: number, n: number) => planOutline({ x: x - r, y: y - r, w: 2 * r, d: 2 * r, r }, z, P, n); const sheen: Vec[] = [[x, y, z]]; for (let i = 0; i <= 12; i++) { const a = spin - 0.3 + (i / 12) * 0.9; sheen.push([x + 18.4 * Math.cos(a), y + 18.4 * Math.sin(a), z]); } return ( `` + `` + lineSvg(ring(x, y, R, z, P, 96), "hi") + lineSvg(ring(x, y, 7.6, z, P, 48), "mid") + lineSvg(ring(x, y, 4.4, z, P, 32), "lo") + lineSvg(ring(x, y, 2, z, P, 20), "hi") ); } function plateMarkup(ext: number) { const x = T.front + ext; const plate = { x: x - T.plate.t, y: T.y0, w: T.plate.t, d: T.y1 - T.y0, r: 0.4 }; const u0 = -T.y1; const u1 = -T.y0; const reading = cd.read > 0 && Math.sin(performance.now() / 45) > 0; const face = `` + `` + `` + ``; return solidSvg(slabOf(plate, T.plate.z0, T.plate.z1 - T.plate.z0, P, 2, 0.3)) + face; } function trayMarkup() { const ext = cd.tray * T.travel; if (ext < 0.02) return ""; const out: string[] = []; /* the bay behind the tray is a dark opening while the tray is out */ out.push(``); const bodyW = ext - T.plate.t; if (bodyW > 0.2) { const body = { x: T.front, y: T.body.y0, w: bodyW, d: T.body.y1 - T.body.y0, r: 0.5 }; const top = T.body.z + T.body.h; out.push(solidSvg(slabOf(body, T.body.z, T.body.h, P, 2, 0.3))); const c = discAtTray(ext); const well = planOutline({ x: c[0] - 20.2, y: c[1] - 20.2, w: 40.4, d: 40.4, r: 20.2 }, top, P, 24); out.push(``); out.push(``); if (cd.at === "drive" && !cd.flight) out.push(discMarkup(c, cd.spin)); out.push(""); } out.push(plateMarkup(ext)); return out.join(""); } const clipId = `pdesk-tray-${Math.random().toString(36).slice(2, 8)}`; function flightPoint(t: number, toDrive: boolean): Vec { const home = D.disc.home; const end = discAtTray(T.travel); const [a, b] = toDrive ? [home, end] : [end, home]; const c1 = add(a, [0, 0, toDrive ? 85 : 70]); const c2 = add(b, [0, 0, toDrive ? 70 : 85]); const u = 1 - t; return [0, 1, 2].map((i) => u * u * u * a[i] + 3 * u * u * t * c1[i] + 3 * u * t * t * c2[i] + t * t * t * b[i]) as Vec; } function drawCd(now: number) { if (cd.drawnTray !== cd.tray || cd.flight || cd.read > 0) { cd.drawnTray = cd.tray; trayEl.innerHTML = trayMarkup(); } if (cd.flight) { const t = easeInOut(cd.flight.t); const p = flightPoint(t, cd.flight.toDrive); /* near the tray the disc passes behind the tray's front plate: draw the plate over it there */ const nearTray = cd.flight.toDrive ? t > 0.82 : t < 0.18; flyEl.innerHTML = discMarkup(p, cd.spin) + (nearTray ? plateMarkup(cd.tray * T.travel) : ""); } else if (flyEl.firstChild) flyEl.innerHTML = ""; if (cd.read > 0) cdLed.toggleAttribute("data-on", Math.sin(now / 45) > 0); else cdLed.removeAttribute("data-on"); const a = cd.autoplay; autoplayEl.style.opacity = a.toFixed(3); autoplayEl.setAttribute("transform", `translate(0 -66.5) scale(${(0.92 + 0.08 * ease(a)).toFixed(3)}) translate(0 66.5)`); } const trayTo = (to: number) => { cd.trayTo = to; run(); return until(() => cd.tray === to); }; const fly = (toDrive: boolean) => { cd.flight = { t: 0, toDrive }; run(); return until(() => !cd.flight); }; async function loadCd() { if (cd.busy || cd.at !== "case") return; cd.busy = true; status.textContent = "Loading the CD."; cd.read = 0.6; await trayTo(1); caseDisc.style.display = "none"; await fly(true); cd.at = "drive"; write(); await sleep(250); await trayTo(0); cd.read = 2.2; await sleep(700); if (power) { cd.autoplayTo = 1; status.textContent = "AutoPlay: CD-R in drive D."; cancel(cd.autoplayTimer); cd.autoplayTimer = later(() => { cd.autoplayTo = 0; run(); }, 5200); } run(); cd.busy = false; } async function ejectCd() { if (cd.busy) return; cd.busy = true; cd.autoplayTo = 0; cancel(cd.autoplayTimer); if (cd.at === "drive") { status.textContent = "Ejecting the CD."; cd.read = 0.5; await trayTo(1); await sleep(200); await fly(false); cd.at = "case"; caseDisc.style.display = ""; write(); await sleep(200); await trayTo(0); } else { /* an empty drive just opens and shuts */ await trayTo(cd.trayTo ? 0 : 1); } cd.busy = false; } /* ── the idle tour ── */ function tourStep(dt: number) { tour.wait -= dt; if (tour.wait > 0) return; const phrase = PHRASES[tour.phrase]; const S = D.search; switch (tour.step) { case "aim": { const [x, y] = mouseFor(S.u0 + 6 + Math.random() * 6, (S.z0 + S.z1) / 2); aimMouse(x, y); tour.step = "click"; tour.wait = 1.1; break; } case "click": mouseClick(); tour.step = "type"; tour.index = 0; tour.wait = 0.45; break; case "type": if (tour.index < phrase.length) { type(phrase[tour.index++]); tour.wait = 0.08 + Math.random() * 0.12 + (phrase[tour.index - 1] === " " ? 0.08 : 0); } else { tour.step = "enter"; tour.wait = 0.8; } break; case "enter": enter(); tour.step = "drift"; tour.wait = 0.9; break; case "drift": aimMouse(lerp(M.range.x[0], M.range.x[1], Math.random()), lerp(M.range.y[0], M.range.y[1], Math.random()), 0.5); if (tour.phrase === PHRASES.length - 1) { tour.step = "cd"; tour.wait = 1.6; } else { tour.phrase++; tour.step = "aim"; tour.wait = 1.4; } break; case "cd": void loadCd(); tour.step = "eject"; tour.wait = 8.5; break; case "eject": void ejectCd(); tour.step = "off"; tour.wait = 5.5; break; case "off": setPower(0); tour.step = "on"; tour.wait = 1.8; break; case "on": setPower(1); tour = { phrase: 0, step: "aim", index: 0, wait: 1.4 }; break; } } /* ── the frame loop: it runs only while something is moving and the figure can be seen ── */ function tick(now: number) { if (!alive) return; const dt = previous ? Math.min((now - previous) / 1000, 0.1) : 1 / 60; previous = now; const calm = still.matches; if (touring) tourStep(dt); powerClock += dt; const settledCrt = crtFrame(); if (hdd > 0) { hdd = Math.max(0, hdd - dt); hddLed.toggleAttribute("data-on", hdd > 0 && Math.sin(now / 37) + Math.sin(now / 23) > 0.2); } else hddLed.removeAttribute("data-on"); for (const i of active) { const s = keyState[i]; s.held = Math.max(0, s.held - dt); const want = s.held > 0 ? DOWN : 0; s.at = calm ? want : s.at + (want - s.at) * (1 - Math.exp(-dt / (want ? 0.022 : 0.06))); if (Math.abs(want - s.at) < 0.01) s.at = want; keyEls[i].setAttribute("transform", `translate(${(down[0] * s.at).toFixed(2)} ${(down[1] * s.at).toFixed(2)})`); keyEls[i].toggleAttribute("data-down", s.at > 0.5); if (!s.held && s.at === 0) active.delete(i); } mouse.x = follow(mouse.x, mouse.tx, dt, mouse.tau); mouse.y = follow(mouse.y, mouse.ty, dt, mouse.tau); if (Math.abs(mouse.x - mouse.tx) < 0.005) mouse.x = mouse.tx; if (Math.abs(mouse.y - mouse.ty) < 0.005) mouse.y = mouse.ty; mouse.press = Math.max(0, mouse.press - dt); drawMouse(); /* the tray runs on a motor (eased toward its stop); the disc flies on a timed arc */ if (cd.tray !== cd.trayTo) { cd.tray = calm ? cd.trayTo : follow(cd.tray, cd.trayTo, dt, 0.17); if (Math.abs(cd.tray - cd.trayTo) < 0.004) cd.tray = cd.trayTo; } if (cd.flight) { cd.flight.t = calm ? 1 : cd.flight.t + dt / 1.15; cd.spin += dt * 9; if (cd.flight.t >= 1) cd.flight = null; } cd.read = Math.max(0, cd.read - dt); cd.autoplay = follow(cd.autoplay, cd.autoplayTo, dt, 0.12); if (Math.abs(cd.autoplay - cd.autoplayTo) < 0.004) cd.autoplay = cd.autoplayTo; drawCd(now); for (let i = waiters.length - 1; i >= 0; i--) { if (waiters[i].test()) { waiters[i].done(); waiters.splice(i, 1); } } const busy = touring || active.size > 0 || hdd > 0 || !settledCrt || mouse.x !== mouse.tx || mouse.y !== mouse.ty || mouse.press > 0 || mouse.dragging || cd.tray !== cd.trayTo || cd.flight !== null || cd.read > 0 || cd.autoplay !== cd.autoplayTo || waiters.length > 0; frame = visible && busy ? requestAnimationFrame(tick) : 0; } function run() { if (!frame && visible && alive) { previous = 0; frame = requestAnimationFrame(tick); } } /* the visitor takes over from the tour; it resumes after nine quiet seconds */ function takeOver() { if (touring) { touring = false; tour = { phrase: 0, step: "aim", index: 0, wait: 0.4 }; line = ""; if (booted) setPower(1); write(); } cancel(idleTimer); idleTimer = later(() => { if (still.matches) return; touring = true; line = ""; setPower(1); write(); run(); }, 9000); } const io = new IntersectionObserver( (entries) => { visible = entries[entries.length - 1].isIntersecting; if (visible) run(); }, { rootMargin: "120px 0px" }, ); io.observe(stage); /* ── input ── */ function onKey(event: KeyboardEvent) { if (event.metaKey || event.ctrlKey || event.altKey) return; const key = event.key; if (key === "Tab") return; takeOver(); if (key === "Escape") { event.preventDefault(); setPower(power ? 0 : 1); return; } if (key === "Backspace") { event.preventDefault(); erase(); return; } if (key === "Enter") { event.preventDefault(); enter(); return; } if (key === "CapsLock") { caps = !caps; kbLeds[1].style.opacity = caps ? "" : "0.25"; press("CapsLock"); return; } if (key === "Shift") { press(event.code === "ShiftRight" ? "ShiftRight" : "Shift", 0.14); return; } if (key.length === 1) { event.preventDefault(); type(key); return; } if (indexOf(key) >= 0) press(key); } stage.addEventListener( "keydown", (event) => { repeating = event.repeat; asUser(() => onKey(event)); repeating = false; }, { signal }, ); let drag: null | { id: number; sx: number; sy: number; mx: number; my: number; moved: number } = null; mouseEl.addEventListener( "pointerdown", (event) => { if (event.button > 0) return; event.preventDefault(); takeOver(); const p = svgPoint(event); drag = { id: event.pointerId, sx: p.x, sy: p.y, mx: mouse.tx, my: mouse.ty, moved: 0 }; mouse.dragging = true; stage.setAttribute("data-dragging", ""); stage.setPointerCapture(event.pointerId); run(); }, { signal }, ); stage.addEventListener( "pointermove", (event) => { if (!drag || event.pointerId !== drag.id) return; const p = svgPoint(event); drag.moved = Math.max(drag.moved, Math.hypot(p.x - drag.sx, p.y - drag.sy)); const [wx, wy] = toWorld(p.x - drag.sx, p.y - drag.sy); aimMouse(drag.mx + wx, drag.my + wy, 0.05); }, { signal }, ); const endDrag = (event: PointerEvent) => { if (!drag || event.pointerId !== drag.id) return; const click = drag.moved < 2.5; drag = null; mouse.dragging = false; stage.removeAttribute("data-dragging"); if (stage.hasPointerCapture(event.pointerId)) stage.releasePointerCapture(event.pointerId); if (click) mouseClick(); run(); }; stage.addEventListener("pointerup", endDrag, { signal }); stage.addEventListener("pointercancel", endDrag, { signal }); function onClick(event: MouseEvent) { stage.focus({ preventScroll: true }); const target = event.target as Element | null; if (!target || target.closest('[data-part="mouse"]')) return; const key = target.closest("[data-key]"); if (key) { takeOver(); const code = KEYS[Number(key.dataset.key)]; if (code.length === 1) type(code); else if (code === "Backspace") erase(); else if (code === "Enter" || code === "NumpadEnter") enter(); else press(code); return; } if (target.closest('[data-part="cd-case"]')) { takeOver(); if (cd.at === "case") void loadCd(); return; } if (target.closest('[data-part="cd-bay"]') || target.closest('[data-part="cd-tray"]')) { takeOver(); void ejectCd(); return; } if (target.closest('[data-part="mon-power"]')) { takeOver(); setPower(power ? 0 : 1); } } svg.addEventListener("click", (event) => asUser(() => onClick(event)), { signal }); /* the focus ring is for keyboard users: hide it once the figure has been used with a pointer */ stage.addEventListener("pointerdown", () => stage.setAttribute("data-pointer", ""), { signal }); stage.addEventListener("blur", () => stage.removeAttribute("data-pointer"), { signal }); /* double-clicks and drags never select the drawing's text */ stage.addEventListener("selectstart", (event) => event.preventDefault(), { signal }); /* ── the assembly: shadows first, then each piece drops in, a wave across the keys, the cables last ── */ let introTimer = 0; function playIntro() { stage.classList.remove("pdesk--intro"); if (still.matches) return 0; void stage.getBoundingClientRect(); stage.classList.add("pdesk--intro"); let last = 0; stage.querySelectorAll(".it").forEach((el) => { last = Math.max(last, parseFloat(el.style.getPropertyValue("--d")) || 0); }); cancel(introTimer); introTimer = later(() => stage.classList.remove("pdesk--intro"), last + 800); return last; } /* ── boot: assemble, then the CRT warms up and the tour begins ── */ kbLeds[1].style.opacity = "0.25"; kbLeds[2].style.opacity = "0.25"; write(); crtFrame(); drawMouse(); const assembled = playIntro(); later( () => { booted = true; setPower(1); if (!still.matches) { touring = true; tour.wait = 1.4; } run(); }, still.matches ? 0 : assembled + 450, ); return { replayIntro: () => void playIntro(), setMuted: (next) => sfx.setMuted(next), destroy() { alive = false; ac.abort(); io.disconnect(); if (frame) cancelAnimationFrame(frame); frame = 0; timers.forEach((t) => clearTimeout(t)); timers.clear(); waiters.length = 0; stage.classList.remove("pdesk--intro"); sfx.close(); }, }; } 1f:T3f3e,/* =========================================================================== Desk Computer. An isometric late-90s desk computer drawn as one SVG, fitted to its box by width and height. The component's own layout comes first; after it, the figure's rules — the Anatomy kit's isometric styles (MIT, © 2026 Ryan) and the figure's materials, live parts and assembly — every one scoped to .pdesk. Every colour is a token with a value for each theme, set on data-theme. =========================================================================== */ .pdesk { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 1000 / 760; max-height: 80vh; overflow: hidden; /* the figure sizes itself to the largest box of its own shape that fits */ container-type: size; background: var(--anatomy-page); color: var(--anatomy-text); -webkit-tap-highlight-color: transparent; transition: background-color 0.35s ease; } /* filling its container: the field is the whole box and the figure centres in it */ .pdesk[data-fill] { height: 100%; aspect-ratio: auto; max-height: none; } .pdesk__stage { position: relative; width: min(1120px, 100cqw - 32px, (100cqh - 88px) * 1000 / 760); aspect-ratio: 1000 / 760; outline: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; opacity: 0; transition: opacity 0.3s ease; } .pdesk[data-ready] .pdesk__stage { opacity: 1; } .pdesk__error { margin: 0; padding: 24px; max-width: 34em; color: var(--anatomy-text); font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; } .pdesk__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .pdesk, .pdesk__stage { transition: none; } } /* ---------- the figure: the kit's isometric styles, then this figure's own ---------- */ .pdesk{--anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e; --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c; --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818; --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d; --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff; --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6; --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff; --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1); --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;} .pdesk[data-theme="light"]{--anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90; --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff; --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1; --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb; --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000; --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e; --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd; --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;} .pdesk .iso-svg{display:block;width:100%;height:auto;overflow:visible} .pdesk .iso-svg path,.pdesk .iso-svg circle{vector-effect:non-scaling-stroke} .pdesk .iso-fill{fill:var(--anatomy-paper);stroke:none} .pdesk .iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)} .pdesk .iso-shade,.pdesk .iso-top{stroke:none} .pdesk .iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)} .pdesk .iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)} .pdesk .iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)} .pdesk .iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)} .pdesk .iso-top{fill:var(--anatomy-top)} .pdesk .iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)} .pdesk .iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)} .pdesk .iso-solid[data-seamless]>.iso-shade,.pdesk .iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round} .pdesk .iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)} .pdesk .iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)} .pdesk .iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)} .pdesk .iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)} .pdesk .iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)} .pdesk .iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)} .pdesk .iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)} .pdesk .iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)} .pdesk .iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)} .pdesk .iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round} .pdesk .iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)} .pdesk .iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)} .pdesk .iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)} .pdesk .iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)} .pdesk .iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)} .pdesk .iso-line[data-tone="red"]{stroke:var(--anatomy-red)} .pdesk .iso-line[data-tone="green"]{stroke:var(--anatomy-green)} .pdesk .iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)} .pdesk .iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1} .pdesk .iso-line[data-dashed]{stroke-dasharray:3 3} .pdesk .iso-line[data-flow]{stroke-dasharray:2 6} .pdesk .tb-body{fill:var(--anatomy-shade-2);stroke:none} .pdesk .tb-shine{fill:var(--anatomy-top);stroke:none} .pdesk .tb-shade{fill:var(--anatomy-shade-0);stroke:none} .pdesk .tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round} .pdesk .tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)} .pdesk .tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)} .pdesk .tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)} @keyframes pdesk-flow{to{stroke-dashoffset:-32}} @keyframes pdesk-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}} .pdesk .iso-line[data-flow]{animation:pdesk-flow 1600ms linear infinite} @media (prefers-reduced-motion:reduce){.pdesk .iso-line[data-flow]{animation:none}} .pdesk[data-theme="light"]{--anatomy-page:#ffffff;--anatomy-card:#ffffff;--anatomy-paper:#ffffff;--anatomy-face:#ffffff;--anatomy-top:#fbfbfd; --anatomy-shade-0:#c9cbd7;--anatomy-shade-1:#d6d8e2;--anatomy-shade-2:#e3e5ec;--anatomy-shade-3:#eff0f4; --anatomy-hi:#3b3e4b;--anatomy-mid:#717484;--anatomy-lo:#9fa2b0;--anatomy-faint:#cdcfd8;--anatomy-lit:#111; --anatomy-halo:#8f92a3;--anatomy-halo-opacity:.38;--anatomy-dot:#3b3e4b;--anatomy-red:#d9473f; --anatomy-text:#57575a;--anatomy-muted:#8c8c90; --pc-pad:#8f86f2;--pc-pad-top:#9a92f6;--pc-pad-0:#6c62d4;--pc-pad-1:#776ddd;--pc-pad-2:#8278e6;--pc-pad-3:#8c83ee;--pc-pad-badge:#a59ef8; --pc-dark:#5d6070;--pc-dark-top:#6a6d7d;--pc-dark-0:#3f4252;--pc-dark-1:#474a5a;--pc-dark-2:#505364;--pc-dark-3:#585b6b; --pc-disk:#d4d6df;--pc-disk-top:#dcdee6;--pc-disk-0:#a9acba;--pc-disk-1:#b4b7c4;--pc-disk-2:#bfc2ce;--pc-disk-3:#c9cbd6; --pc-shell:#e9eaf0;--pc-shell-top:#eff0f4;--pc-shell-0:#bfc1cd;--pc-shell-1:#cbcdd8;--pc-shell-2:#d6d8e1;--pc-shell-3:#e0e2e9; --pc-glass:#5f6272;--pc-glass-off:#4d505f;--pc-desk:#7a7d8e;--pc-window:#f4f5f8;--pc-titlebar:#4a6cf0;--pc-cap:#e6e7ee; --pc-search:#d9dbe4;--pc-input:#ffffff;--pc-ink:#3b3e4b;--pc-glare:rgba(255,255,255,.35); --pc-button:#f6f7fa;--pc-sticker:#f4f5f8;--pc-label:#ffffff;--pc-metal:#eceef3;--pc-hole:#9ea1b0; --pc-grille:#6d6b84;--pc-driver:#5c5a73;--pc-cone:#77758f;--pc-dust:#8c8aa4; --pc-disc:#eceef3;--pc-disc-sheen:#ffffff;--pc-hub:#f8f9fb;--pc-print:#9fa2b0;--pc-led-off:#d9d4c8; --pc-toggle-track:rgba(59,62,75,.07);--pc-toggle-ring:rgba(59,62,75,.16);--pc-toggle-knob:#ffffff;--pc-toggle-icon:#c47a1c; color-scheme:light;} .pdesk[data-theme="dark"]{--anatomy-page:#0f1013;--anatomy-card:#0f1013;--anatomy-paper:#17181d;--anatomy-face:#1c1d23;--anatomy-top:#24262d; --anatomy-shade-0:#0e0f13;--anatomy-shade-1:#121318;--anatomy-shade-2:#16171d;--anatomy-shade-3:#1b1c22; --anatomy-hi:#c9ccd8;--anatomy-mid:#80838f;--anatomy-lo:#4f525e;--anatomy-faint:#30323b;--anatomy-lit:#fff; --anatomy-halo:#000000;--anatomy-halo-opacity:.8;--anatomy-dot:#c9ccd8;--anatomy-red:#f0675f; --anatomy-text:#a3a3a8;--anatomy-muted:#6e6f76; --pc-pad:#5a52c2;--pc-pad-top:#665ecf;--pc-pad-0:#3a3388;--pc-pad-1:#423b96;--pc-pad-2:#4a43a4;--pc-pad-3:#524bb2;--pc-pad-badge:#7a72e0; --pc-dark:#2a2c34;--pc-dark-top:#32343d;--pc-dark-0:#1b1c22;--pc-dark-1:#1f2027;--pc-dark-2:#23252c;--pc-dark-3:#272930; --pc-disk:#3a3c46;--pc-disk-top:#42444f;--pc-disk-0:#26272e;--pc-disk-1:#2b2c34;--pc-disk-2:#30323a;--pc-disk-3:#353741; --pc-shell:#20222a;--pc-shell-top:#262830;--pc-shell-0:#111217;--pc-shell-1:#15161c;--pc-shell-2:#191a20;--pc-shell-3:#1d1f25; --pc-glass:#0b0c10;--pc-glass-off:#08090c;--pc-desk:#1a1c23;--pc-window:#e9ebf2;--pc-titlebar:#3d5ee8;--pc-cap:#d7d9e2; --pc-search:#c9ccd6;--pc-input:#fbfbfd;--pc-ink:#2b2d36;--pc-glare:rgba(255,255,255,.18); --pc-button:#22242b;--pc-sticker:#e6e7ec;--pc-label:#e6e7ec;--pc-metal:#8a8d99;--pc-hole:#4d505c; --pc-grille:#2c2b38;--pc-driver:#24232f;--pc-cone:#33323f;--pc-dust:#403f4e; --pc-disc:#9a9da9;--pc-disc-sheen:#c3c6d0;--pc-hub:#b4b7c2;--pc-print:#5e616d;--pc-led-off:#3a3a3e; --pc-toggle-track:rgba(201,204,216,.08);--pc-toggle-ring:rgba(201,204,216,.16);--pc-toggle-knob:#24262d;--pc-toggle-icon:#e2e4ee; color-scheme:dark;} .pdesk{--anatomy-weight:1.05px} .pdesk .pdesk__stage svg text{pointer-events:none} .pdesk .pdesk__stage:focus-visible:not([data-pointer]){outline:1px dashed var(--anatomy-lo);outline-offset:6px;border-radius:4px} .pdesk .iso-line.iso-crease,.pdesk .iso-line.iso-bevel{stroke-width:.7px} .pdesk .iso-line[data-tone="faint"],.pdesk .iso-line[data-tone="lo"]{stroke-width:.8px} .pdesk .iso-halo{filter:blur(7px);transform:translate(6px,7px)} .pdesk .m-pad{--anatomy-paper:var(--pc-pad);--anatomy-face:var(--pc-pad);--anatomy-top:var(--pc-pad-top);--anatomy-shade-0:var(--pc-pad-0);--anatomy-shade-1:var(--pc-pad-1);--anatomy-shade-2:var(--pc-pad-2);--anatomy-shade-3:var(--pc-pad-3)} .pdesk .m-dark{--anatomy-paper:var(--pc-dark);--anatomy-face:var(--pc-dark);--anatomy-top:var(--pc-dark-top);--anatomy-shade-0:var(--pc-dark-0);--anatomy-shade-1:var(--pc-dark-1);--anatomy-shade-2:var(--pc-dark-2);--anatomy-shade-3:var(--pc-dark-3)} .pdesk .m-disk{--anatomy-paper:var(--pc-disk);--anatomy-face:var(--pc-disk);--anatomy-top:var(--pc-disk-top);--anatomy-shade-0:var(--pc-disk-0);--anatomy-shade-1:var(--pc-disk-1);--anatomy-shade-2:var(--pc-disk-2);--anatomy-shade-3:var(--pc-disk-3)} .pdesk .m-shell{--anatomy-paper:var(--pc-shell);--anatomy-face:var(--pc-shell);--anatomy-top:var(--pc-shell-top);--anatomy-shade-0:var(--pc-shell-0);--anatomy-shade-1:var(--pc-shell-1);--anatomy-shade-2:var(--pc-shell-2);--anatomy-shade-3:var(--pc-shell-3)} .pdesk .pc-glass{fill:var(--pc-glass)} .pdesk .pc-desk{fill:var(--pc-desk)} .pdesk .pc-window{fill:var(--pc-window)} .pdesk .pc-titlebar{fill:var(--pc-titlebar)} .pdesk .pc-titlebar-fade{fill:url(#pc-title-grad)} .pdesk .pc-cap{fill:var(--pc-cap)} .pdesk .pc-icon{stroke-width:.9px} .pdesk .pc-logo{font:600 12.5px/1 "Product Sans","Google Sans",Arial,Helvetica,sans-serif;letter-spacing:-.02em} .pdesk .pc-search{fill:var(--pc-search)} .pdesk .pc-input{fill:var(--pc-input)} .pdesk .pc-query{fill:var(--pc-ink);font-family:Arial,Helvetica,sans-serif} .pdesk .pc-caret{fill:var(--pc-ink);animation:pdesk-blink 1.06s steps(1,end) infinite} .pdesk .pc-glare{fill:none;stroke:var(--pc-glare);stroke-width:1px;stroke-linecap:round} .pdesk .pc-beam{fill:none;stroke:#e9ecff;stroke-width:1.6px;stroke-linecap:round} .pdesk .pc-dot{fill:#f2f4ff} .pdesk .pc-led-blue{fill:#4a6cf0} .pdesk .pc-led-green{fill:#3ec46d} .pdesk .pc-led-amber{fill:var(--pc-led-off);transition:fill .08s} .pdesk .pc-led-amber[data-on]{fill:#f2a33a} .pdesk .pc-button{fill:var(--pc-button)} .pdesk .pc-power,.pdesk .pc-key{cursor:pointer} .pdesk .pc-intel{fill:#2f6fe0} .pdesk .pc-intel-swoosh{fill:none;stroke:#fff;stroke-width:.5px} .pdesk .pc-intel-text{fill:#fff;font:700 2.6px/1 Arial,Helvetica,sans-serif} .pdesk .pc-badge{fill:var(--pc-sticker)} .pdesk .pc-badge-text{fill:#3b3e4b;font:700 2.2px/1 Arial,Helvetica,sans-serif} .pdesk .pc-flag-r{fill:#e5483f} .pdesk .pc-flag-g{fill:#3ab05b} .pdesk .pc-flag-b{fill:#3a74e8} .pdesk .pc-flag-y{fill:#f2b928} .pdesk .pc-grille{fill:var(--pc-grille)} .pdesk .pc-driver{fill:var(--pc-driver)} .pdesk .pc-cone{fill:var(--pc-cone)} .pdesk .pc-cap-dust{fill:var(--pc-dust)} .pdesk .pc-metal{fill:var(--pc-metal)} .pdesk .pc-disk-hole{fill:var(--pc-hole)} .pdesk .pc-label{fill:var(--pc-label)} .pdesk .pc-pad-badge{fill:var(--pc-pad-badge)} .pdesk .pc-disc{fill:var(--pc-disc)} .pdesk .pc-disc-sheen{fill:var(--pc-disc-sheen);opacity:.85} .pdesk .pc-hub{fill:var(--pc-hub)} .pdesk .pc-cd-text,.pdesk .pc-cd-small{fill:var(--pc-print);font-family:Arial,Helvetica,sans-serif;letter-spacing:.04em} .pdesk .pc-key[data-down] .iso-top{fill:var(--anatomy-shade-3)} @keyframes pdesk-blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.pdesk .pc-caret{animation:none}} .pdesk .pc-hit{fill:transparent;cursor:pointer} .pdesk [data-part="cd-case"],.pdesk [data-part="cd-tray"]{cursor:pointer} .pdesk [data-part="mouse"]{cursor:grab} .pdesk .pdesk__stage[data-dragging],.pdesk .pdesk__stage[data-dragging] [data-part="mouse"]{cursor:grabbing} .pdesk .pc-livecable path{fill:none;vector-effect:none;stroke-linecap:butt;stroke-linejoin:round} .pdesk .pc-cable-o{stroke:var(--anatomy-hi)} .pdesk .pc-cable-i{stroke:var(--anatomy-shade-2)} .pdesk .pc-cable-s{stroke:var(--anatomy-top)} .pdesk .pc-arrow{fill:#fff;stroke:#1d1f27;stroke-width:.35px;vector-effect:none;stroke-linejoin:round} .pdesk .pc-ibeam{fill:none;stroke:#1d1f27;stroke-width:.45px;vector-effect:none} .pdesk .pc-slot{fill:var(--pc-glass-off)} .pdesk .pc-ap-shadow{fill:rgba(20,22,30,.18)} .pdesk .pc-ap-title{fill:#fff;font:700 2.6px/1 Arial,Helvetica,sans-serif} .pdesk .pc-ap-head{fill:var(--pc-ink);font:700 3.3px/1 Arial,Helvetica,sans-serif} .pdesk .pc-ap-body{fill:#5d6070;font:400 2.3px/1 Arial,Helvetica,sans-serif} .pdesk .pc-ap-disc{fill:#e3e5ec;stroke:#5d6070;stroke-width:.3px;vector-effect:none} .pdesk .pc-ap-ring{fill:#f6f7fa;stroke:#8a8d99;stroke-width:.25px;vector-effect:none} .pdesk .pc-ap-hole{fill:#5d6070} .pdesk .pc-ap-shine{fill:none;stroke:#fff;stroke-width:.8px;vector-effect:none;stroke-linecap:round} .pdesk .pc-led-cd{fill:var(--pc-led-off);transition:fill .08s} .pdesk .pc-led-cd[data-on]{fill:#3ec46d} @keyframes pdesk-in{0%{opacity:0;transform:translateY(-18px)}22%{opacity:1}100%{opacity:1;transform:none}} @keyframes pdesk-fade{from{opacity:0}} .pdesk .pdesk--intro .it{animation:pdesk-in .72s cubic-bezier(.2,.9,.28,1.12) backwards;animation-delay:var(--d)} .pdesk .pdesk--intro .it[data-obj="key"]{animation-duration:.5s} .pdesk .pdesk--intro .it[data-obj="cable"]{animation:pdesk-fade .32s ease-out backwards;animation-delay:var(--d)} .pdesk .pdesk--intro .pc-halos{animation:pdesk-fade .9s ease-out backwards .15s} @media (prefers-reduced-motion:reduce){.pdesk .pdesk--intro .it,.pdesk .pdesk--intro .it[data-obj="cable"],.pdesk .pdesk--intro .pc-halos{animation:none}} 14:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Desk Computer — Pin UI\",\"description\":\"A late-90s desk computer in true isometric that you can actually use. A beige CRT, a mid-tower, a 104-key keyboard, a ball mouse and a CD-R, drawn as one isometric SVG. Type and the keys go down while the text lands in the search box on the screen; drag the mouse and its cable follows while the curs\",\"url\":\"https://www.pinui.xyz/components/desk-computer\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desk Computer\",\"item\":\"https://www.pinui.xyz/components/desk-computer\"}]}"}}]],["$","$L1c",null,{"entry":{"slug":"desk-computer","category":"controls","name":"Desk Computer","isNew":true,"tagline":"A late-90s desk computer in true isometric that you can actually use.","blurb":"A beige CRT, a mid-tower, a 104-key keyboard, a ball mouse and a CD-R, drawn as one isometric SVG. Type and the keys go down while the text lands in the search box on the screen; drag the mouse and its cable follows while the cursor moves on the CRT; click the jewel case and the disc flies into the drive and AutoPlay opens. It assembles itself piece by piece, and when nobody is touching it, it uses itself.","highlights":["Type on a real keyboard","Drag the mouse, the cable follows","CD flies into the drive","Assembles itself"],"clip":"/clips/loop/desk-computer.mp4","poster":"/clips/loop/desk-computer.jpg","sound":true,"zoom":1,"stage":"#ffffff","clipStage":"#ffffff","stageDark":"#0f1013","fill":true,"usage":"import DeskComputer from \"@/components/library/DeskComputer\";\n\n","props":[{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"Beige plastic on white, or the same machine in a dark room. Every colour is a token with a value for each; changing it assembles the system again."},{"name":"sound","type":"boolean","fallback":"true","note":"Key clicks and thocks, the CRT's power-on hum and power-off zap — synthesised, and only ever for your own input."},{"name":"fill","type":"boolean","fallback":"false","note":"Take the container's whole box, fitting the drawing to it. Without it the component keeps the drawing's own 1000:760 shape."},{"name":"src","type":"string","fallback":"\"/library/desk-computer.svg\"","note":"Where the ~480KB drawing is served from; it is fetched at mount rather than bundled."}],"files":[{"name":"DeskComputer.tsx","lang":"tsx"},{"name":"desk-computer-engine.ts","lang":"tsx"},{"name":"desk-computer.css","lang":"css"}],"info":{"paragraphs":["The whole machine is one SVG in true isometric — monitor, tower, keyboard, mouse and pad, speaker, CD-R and floppy disks, and the cables between them — built and audited with the Anatomy skill's kit, so every part is a solid with its own faces, shading and depth order. The drawing is fetched when the component mounts and the engine runs on it in place: keys and the mouse move along the projection's own axes, and the CD's tray and disc are redrawn as true isometric solids frame by frame.","Focus it and type: each key goes down on a spring and the text lands in the search box on the CRT, scrolling when it overflows; Enter searches and the tower's hard-drive LED flickers. Drag the mouse around its pad and its cable re-routes over the pad's edge while an arrow moves on the screen — an I-beam over the search box — and a click on the mouse clicks the screen. Click the jewel case: the tray slides out, the disc flies over on an arc and drops in, the tray shuts, the drive LED reads and AutoPlay opens. Click the drive to eject it and the disc flies home.","Escape or the monitor's power button collapses the picture to a line and then a dot, and turns it back on. On arrival and on every theme change the system assembles itself — shadows first, then each piece drops in, a wave runs across the keys and the cables come last — and the CRT warms up. Every sound is synthesised with Web Audio and answers only your own input; left alone, it aims the mouse, types, searches and loads the CD by itself, and gives way the moment you touch it."],"credit":{"label":"built with Anatomy","href":"https://github.com/wheresryan22/anatomy"}},"origin":{"label":"Port · desk computer"}},"panes":[{"name":"DeskComputer.tsx","lang":"tsx","code":"$1d"},{"name":"desk-computer-engine.ts","lang":"tsx","code":"$1e"},{"name":"desk-computer.css","lang":"css","code":"$1f"}],"registryUrl":"https://www.pinui.xyz/r/desk-computer.json"}]]

Desk Computer — Pin UI Component