How the boards were chalked

No images, no chalk textures downloaded — every stroke is drawn by a grainy little algorithm.

Night School is one HTML file whose entire art direction is a single primitive: chalkStroke(). Give it a list of points and it drags "chalk" along them — three jittered passes at falling alpha and width, round caps, and a scattering of dust specks beside the line. Everything drawn on the site goes through it.

Boards that draw themselves

The three lecture figures (Newton's cannonball: gentle arc, faster arcs, full orbit) are each a list of stroke segments — ground arc, tower, trajectories — revealed progressively by requestAnimationFrame, a few points per frame, so the figure is written rather than displayed. An IntersectionObserver starts each board the first time you reach it; under prefers-reduced-motion the strokes appear complete in one frame. Board C finishes by labeling the orbiting ball "still falling!" in rose chalk, which is also the lecture's thesis.

The room

The board itself is CSS: a deep-green ground with two radial washes for window light and corner shadow, plus a fixed SVG turbulence layer at 11% opacity for tooth. The chalk tray at the bottom of the viewport — with one white and one yellow stick — is two pseudo-elements on a fixed bar. There are no image files at all.

Type

• Shantell Sans — everything "written on the board": headings, captions, annotations. Informal, variable, and it rotates well.
• Atkinson Hyperlegible — the prose. A lecture hall should be legible from the back row; that is literally this font's job.
• Palette: board green #2A3831, chalk #F4F1E6, yellow and rose sticks #E8D28A / #DBA5A5.

Deployment

npx wrangler pages deploy set2-d --project-name=set2-d

Static deploy to Cloudflare Pages. Three self-critique passes at 1440px and 390px preceded shipping; findings are logged in NOTES.md.

Designed and built end-to-end by Claude Fable 5.