Generative Assets · site 192 · build notes
A chalk lecture in three registers, where the same curve is drawn by a wheel, wins a race it looks like it should lose, and lands four falling beads on a single tick — all of it integrated live, none of it staged.
Cycloid is a fictional single-lecture chalkboard for the curve a rolling wheel writes with a point on its rim — pitched at anyone who half-remembers the claim that a straight ramp is not the fastest way down. The page has one job: let gravity make the argument. Three stacked registers run as one continuous board — the wheel tracing its arches, Bernoulli’s 1696 brachistochrone race on repeat, and Huygens’ 1659 tautochrone landing four beads from four heights on the same instant.
At rest the board is already mid-heat, cycloid leading — the seven-second thumbnail reads as a live lecture, not an empty slate.
Small canvas annotations are chalk at measured opacities (.58–.72) — bright enough to pass contrast on the slate, quiet enough to stay marginalia. Red is never used for small text, only for lines, beads and marks.
Sorts Mill Goudy (italic display) — a revival of Goudy’s book faces with true old-style figures and a lecture-hall warmth. The italic carries the masthead and the A/B posts: the voice of a patient lecturer from the century of Bernoulli and Huygens.
Cousine (race clocks & labels) — a metrically tabular monospace, so three clocks ticking at 60 fps never shuffle sideways. Uppercase with generous tracking gives the register labels their museum-placard discipline.
Everything is canvas 2D, no libraries. The board (slate mottle, eraser smudges,
band rules, ramps, bowl) is prerendered once to an offscreen canvas; a second offscreen layer holds the
wheel’s accumulating trace; the animated frame composites both and draws only the moving parts.
Chalk texture is a double stroke — the true polyline, then a jittered half-width ghost at 22% — with a
destination-out grain pass eating pinholes out of every line.
The signature is the physics being real. Every ramp is an arc-length-parameterised polyline (700
samples), and each ball is a bead on a wire: state (s, v) along the curve,
accelerated by the tangential component of gravity, v̇ = g · dy/ds, integrated at
2 ms substeps. Numerical drift is killed by renormalising speed against the exact invariant
v = √(2g Δy) from the drop height, so total energy is conserved to the pixel. The
brachistochrone is built by bisection on (1−cosθ)/(θ−sinθ) = H/W so the
curve lands exactly on B; the circular arc and straight line share the same endpoints, the same
g, the same integrator. The cycloid’s finish times match the closed form
t = θB√(R/g) to under half a percent — and the clocks print whatever the
integrator produces. Nothing is scripted to win.
The tautochrone bowl is a full inverted arch. Beads dropped at four random heights are timestamped
(with sub-step interpolation) each time they cross the lowest point, and the board prints the measured
arrival spread — consistently a few milliseconds, because for a cycloid the descent time
t = π√(r/g) genuinely does not depend on where you let go. A verification probe
(window.__cycloid) exposes heat times and crossing spreads so the QA pass asserts on
physics output, not on screenshots alone.
The masthead collision: on wide screens band II’s label, caption and
race top were pinned by a fixed fraction of the viewport and could ride up into the masthead promise.
Fixed by measuring the rendered masthead and forcing register II to start below it
(max(0.27 · usable, masthead + 14px)). The same sweep found the residual horizontal
cousins and fixed those too: the caption line ran into the race’s A post at 1440 (the post cut
through “challenge”), and at 880–1100 px the register-I road and wheel grazed the masthead
column. Captions now choose the longest of three measured tiers that clears the geometry; the road
start is clamped past the masthead’s right edge. Caption ink lifted from .5 to .58 alpha for
contrast.
Second-read details: a chalk tally of cycloid wins in five-bar gates (the straight line never scores), cusp ticks where the rim point kisses the road, dust puffs on release, finish and re-drop, and a pulse ring when the tautochrone beads meet. Where a short viewport squeezes band II, the tally and verdict line now yield rather than sit on the dashed ramp. The re-drop control re-rolls four fresh heights — deliberately uneven — and the spread readout re-proves the theorem on demand.
375 px stacks the registers under the masthead with shortened captions and a centred re-drop control; scrollWidth stays exactly 375. Reduced motion renders a settled analytic frame — 1.55 arches traced, race frozen mid-heat with the cycloid ahead, beads spread on the bowl — and the loop never starts. DPR capped at 2, rAF paused on hidden tabs, debounced resize rebuild, guarded pre-layout clicks, and the footer’s guide link no longer wraps mid-phrase. Verified headless at 1920, 1440, 1000×740, 880×1300, 768 and 375 with zero console errors and one h1 per page.