Conception Calculator 2000
Give it your birthday and how spicy you like it, and it tells you the song that
was playing at your moment of conception — then flies you into the bedroom where
it happened.
SvelteKit + three.js.
nvm use # Node 22 — see .nvmrc
yarn install # yarn.lock is what's tracked, and what Vercel installs from
npm run dev # http://localhost:3000
Node 22 or 24, not 23 (ESLint 10 and vite-plugin-svelte skip 23; Vercel
builds on nodejs22.x, pinned in vite.config.js).
Two sites
One repo builds two sites (vite.config.js, src/lib/site.js). main —
the main branch's deploy, the site — is THE RUN ALONE: the sketch
(src/lib/lab/flow-strand-sketch.js, runs/Next.svelte) at /, every
other path a 404, nothing in the corner but a small build label. dev —
dev's preview, and any local build — is everything below: the runs, the
next run with all its variants at /next, the lab and the archive. Decided
at build time from SITE=main|dev, or Vercel's environment (Production is
main, Preview is dev). SITE=main npm run build and
node scripts/verify-main.mjs check the main site locally; CLAUDE.md has
the detail.
Two runs (dev)
The dev site keeps two versions of the run, side by side. The switch in the top
left corner of every page moves between them, next to the build it is (the
package's version and the commit, components/Version.svelte).
| where | what it is | entry |
|---|
| v3 | / and /v3 | the run as it is: approach → kaleido → descent → room, on one WebGPU renderer (WebGL 2 behind it; ?gl=1 forces it) | src/lib/runs/V3.svelte |
| v2 | /v2 | the WebGL run v3 replaced: the fly-in down the tunnel, the ovum, the conception, the computation, the room | src/lib/runs/V2.svelte |
/v3 is the address v3 keeps when the next run takes /. Both runs share the
title card, the two mid-flight questions, the room and the director
(scenes/director.js, switched to v2's scene names by setRun('v2')).
The workshop is beside them: /lab?sketch=… puts one sketch on a bare canvas,
and /v4 chains the rebuild's sketches end to end (docs/v4-plan.md is the
plan v3 was built from — the "v4" in those names is the rebuild's, not a run).
The next rebuild is being looked for at /log: the run as maths on a
blackboard — the golden-spiral swimmer, the golden-angle tunnel, the Möbius
turn, the fall into the rooms — every variant of every beat, and a reel of one
of each (docs/explore-03.md), and the second round on the same board —
beginnings, the way into spacetime, space closing up round the sphere, the
rooms appearing, and some play with the clopen geometry
(docs/explore-04.md); and the third round, Einstein meets Gödel — his
rotating universe where time closes up, the closed universes from inside,
coordinate charts, more rooms out of the dot, and moving through rooms in
other geometries (docs/explore-05.md); and the fourth, the v4 flows — whole
runs on the board, each a different answer to the same brief, at /flows
— with one-offs on tame geometry, abelian varieties and the Kummer surface,
more rooms out of the geometry, the other spherical space forms from inside
and maps on the torus (docs/explore-06.md). /log lists every experiment there has been, /cut
plays every variant of every beat end to end in the run's order (fifteen
minutes; ← and → step between beats, and /v4?chain=one is the short cut,
one of each), and a small bar in the corner of any of them steps to the next.
v3
title card ┌──────────┐ ┌─────────┐ ┌─────────┐ splosh ┌──────┐
(lifts itself) │ Approach │ ───▶ │ Kaleido │ ───▶ │ Descent │ ─────────▶ │ Room │
└──────────┘ └─────────┘ └─────────┘ └──────┘
▲ asks: birthday · spice │ no answer │
│ ▼ │
├───── calculate again ── verdict │
└─────────────────────────── go again ─────────────────────┘
Space, and the swimmer ahead of the lens asked your two questions; the 60s
television coming up dead ahead, gently turning; through its glass and down a
tunnel of the archive — the drawings looped in rings round a wall of grooves —
into a record's funnel whose hole is a monitor; rooms through rooms, decade by
decade, to the answer's room and the splosh on its screen; the readout in that
glass; and home through it to the next flight. A birthday the archive cannot
answer for goes down a tunnel of its verdict's gif instead, stops in it, and the
verdict is typed over it.
The three 3D scenes are one shot: each ends on the frame the next opens on,
on one lens and one slow hand on the camera, and the pace only gathers until the
fall lands. The grooves are the critical line of ζ as the primes write it,
Σ cos(t log p)/p, wound round the record in colour. CLAUDE.md has the
details and the traps; docs/v4-flow.md is the run as a contact sheet.
src/lib/three/Stage.svelte one canvas, one WebGPU renderer, the clock
src/lib/three/world/
approach.js kaleido.js descent.js the three scenes
kaleidoscope.js the set, the tunnel, the camera down it
nest.js the record and the rooms, pose(ζ)
wobble.js the hand on the camera
src/lib/three/tsl/ TSL materials and nodes (zeta.js: the grooves)
v2
three/StageV2.svelte on a WebGL renderer, with components/Background.svelte
behind it; the scenes are scenes/{FlyIn,Conception,Computation}.svelte over
three/world/{tunnel,egg,lattice}.js and three/shaders/. How it was built,
and why, is in docs/design-notes.md.
Where everything is
src/lib/
runs/ V2.svelte, V3.svelte — each run, whole
config/ every tunable number: timing.js (durations, windows), space.js
(distances, the nest, the kaleidoscope), layout.js, palette.js,
ease.js, dev.js; one barrel, $lib/config
scenes/ the director, the title card, the room, v2's scenes
store/ every store, its writer named beside it
components/ the questions (Prompt), the verdict (error/), the raster (Glass),
the corner switch (Version), the dev keys (Dev)
three/ both Stages, world/ (the scenes), tsl/, shaders/ (v2), geometry/
data/ the room drawings' layout; gifs.js, generated by scripts/gifs.mjs
lab/ the workshop sketches
Looking at it
Every 3D scene is a pure function of its progress, so any frame can be pinned:
| query | |
|---|
?at=0.42 | pins the running scene at that fraction of its duration |
?seed=1 | the same rooms, panes and motes on every load |
?speed=6 | the whole run six times faster (or 0.3, slower) |
?edge=past | a birthday the archive cannot answer for (future, unknown) — the verdict's gif tunnel |
?sperm=0 | no swimmer (its roll is the one thing two loads never agree on) |
With the dev keys on (config/dev.js): 1 restarts from the title card, 2
approach, 4 kaleido, 3 descent, 5 room.
npm run dev vite dev server
npm run build production build
npm run lint prettier --check + eslint
npm run verify drive the real site in a browser (needs dev running)
scripts/verify.mjs walks the whole thing in Chromium — BASE=…,
ROUTE=/v2 for v2, LANE=webgpu for a real WebGPU device.scripts/shots.mjs makes a contact sheet of any beat:
PLAN='[["4",[0.5,1]],["3",[0]]]' BASE=… OUT=… node scripts/shots.mjs.scripts/gifs.mjs bakes every gif in static/gifs into a sheet of frames.
Things that will bite you
main is pointer-events: none so the 3D shows through the UI layer;
every screen that wants clicks sets pointer-events: auto on its own root.- A seek is not a run. A pinned frame runs
reset() first, so anything a
scene inherits from the one before it is absent in a seeked frame and present
in a real run — check a claim on both.
- A GL warning is not an error. A texture wider than the GPU allows uploads
nothing and the frame goes flat with only a warning in the console; the
contact sheets report errors only.
- Threshold latches.
if (progress < 0.02) is not a one-shot at a normal
frame rate; use an explicit boolean.
- Custom shaders must premultiply — the canvas is premultiplied, so a
material that hands back straight colour paints at full strength.
