The browser becomes a booth
The Nickelodeon is not a history page wearing period colors. It is a small 1907 picture house with the visitor cast as its operator. Darkness, oxblood velvet, hot brass, and uncertain silver light establish the room; the hand crank makes its central idea physical. Turn slowly and Monsieur Bellini drifts. Find sixteen frames per second and the mechanism settles. Rush it and both illusionist and pianist tumble into comedy.
Time lives in the wrist
In main.js, pointAngle() converts the pointer’s position around the crank center into radians. move() unwraps the ±π seam and derives speed from clockwise angular velocity, while setHandle() moves the visible grip around the same orbit. Keyboard nudges provide an equivalent control. One smoothed frames-per-second value drives the dial, pace language, picture artifacts, and music.
An upright, not a beep
The first deliberate gesture creates a Web Audio context. pianoVoice() layers a fundamental with slightly detuned upper partials, then closes a low-pass filter as the note decays. playRagBeat() adds alternating bass and occasional clipped chords beneath a sixteen-step melody. Faster cranking contracts the interval between strikes; stopping lets the little piano fall silent.
Silver nitrate has weather
The screen is a stack, not a filter preset. .gate varies exposure, .scratches drags vertical damage through the image, .film-perfs reveals the transport edges, and .film-seam flashes a passing splice. render() adds gate weave, slight frame tilt, crop changes, dream-speed blur, a leader countdown, and playback-rate control for the supplied flicker texture.
The theatre is made of rules
The proscenium, fluted columns, bulbs, ticket, projector beam, piano keys, and printed ornaments are CSS gradients, borders, shadows, and clipped shapes in styles.css. No decorative image library breaks the fiction. Motion is similarly disciplined: the shutter performs one entrance, scroll reveals use a single easing family, reduced-motion removes jitter, and the animation loop cancels whenever the document is hidden.
A still is taught to move
The central frame began as a 4:3 silent-film still made with GPT Image 2, then became a five-second hand-cranked loop with Kling 3.0 through Higgsfield. Both files live locally as /assets/gen/nickelodeon/film.jpg and flicker.mp4: the still is the poster and reduced-motion fallback; the loop becomes the projected performance. syncVideo() pauses it offscreen, while crank velocity controls playback rate. Hold a true cadence and updateSteadyCadence() calls discoverHandTint(), blooming code-generated color washes over the frame. Everything around that authored film—the theatre, gate weave, scratches, curtains, brass, tickets, and light—remains code-generated.
Ink, metal & type
DM Serif Display carries the theatrical voice: compressed titles, intertitles, and flourished quotations. Zilla Slab handles programs, controls, captions, and tiny job-print facts. Both families are self-hosted. Small capitals use deliberate tracking; body copy stays generously led so the aged-paper sections remain readable.
Reproduce this
Prompt an AI agent to build a historically specific single-page environment, not a themed landing page. Give it one physical interaction that controls the entire metaphor; an exact dark, metal, and paper palette; self-hosted period-aware typography; and substantial invented ephemera. Require the same velocity to govern interface state, image damage, and synthesized sound. Ask for code-built architecture, touch and keyboard parity, reduced-motion behavior, hidden-tab pausing, and critical screenshot review at phone, tablet, and desktop widths.