Guide · Site 10 of 25
How the poster machine was built
FUNKHAUS 1923 is a fictional Bauhaus internet-radio station streaming imaginary broadcasts from the Dessau workshops. The audience is anyone who loves constructed things; the page’s single job is to make you feel a 1923 exhibition poster running like clockwork — then let you read the day’s programme off it.
Palette
Strict Bauhaus primaries on warm paper. Nothing decorative: every colour is a signal. Red is the transmitter, yellow is the moving part, blue is the instrument, black is structure.
#E4E0D4
Warm paper — aged poster stock, not gallery white.
#D22B1F
Red — the dial, the live bar, the on-air lamp. Kandinsky’s square.
#E8A800
Yellow — the sliding square, never used for small text.
#1E56A0
Blue — metronome, focus rings, broadcast waves. The circle.
#16130E
Warm near-black — rules, rails, type. Pure #000 read too cold on this paper.
Type
One family, used hard. Archivo Black carries every display moment — stacked, negative-tracked, with “HAUS” set as a hollow outline between solid ink and solid red: the typographic bravery lives in the hero. Archivo (400–800) does labels and body, with wide-tracked uppercase eyebrows doing the 1920s programme-card work.
Funk / Haus / 1923
Archivo Black — display, uppercase, letter-spacing −0.02em
Jetzt im Äther · Now broadcasting
Archivo 700 — eyebrows and programme labels, tracked +0.16em
Techniques
The signature element is the kinetic poster machine: a single inline SVG whose shapes behave like meshed clockwork, choreographed with GSAP. Every rotating part spins about an exact svgOrigin; the two dashed gears turn at a 50:26 ratio (durations 20s and 10.4s) so their teeth genuinely stay meshed; the needle steps once per second on a steps(60) ease like a station clock; the rail stops flip the yellow square a quarter turn at each end of its run. A key build lesson: intro tweens and infinite spins must live on separate wrapper groups, or GSAP’s smooth-origin compensation captures the translated position and the gears orbit instead of spinning — found and fixed by reading the live transform matrices.
- SVG + GSAP
The machine: dial, tick ring (24 marks generated in JS), meshed gears, metronome, rail slider, broadcast rings. Loops pause when the poster leaves the viewport and when the tab is hidden.
- Live schedule
Twelve programmes keyed to real local time. The card computes what is on air right now, ticks its elapsed counter, and rolls over automatically — with a needle-spin flourish — when the next programme begins.
- Tempo mapping
Second-read detail: the metronome keeps the tempo of the broadcast. Triangle programmes swing allegro (0.8s), squares moderato (1.1s), circles adagio (1.7s) — Kandinsky’s form-colour questionnaire, set in motion.
- Morse lamp
The On Air lamp doesn’t just blink: it keys the letter F (··—·) in CSS steps, on a 2.4-second cycle.
- No rasters
Everything is SVG, CSS and type. Fonts from Google Fonts; GSAP + ScrollTrigger from cdnjs; no other resources.
Iteration log
- Marquee had a single span with a −50% loop — visible gap every cycle. Duplicated the content in JS so the loop is seamless.
- The retune flourish tweened the needle’s rotation directly, fighting its infinite tween. Replaced with a timeScale burst (needle ×22, gears ×5) — the machine now accelerates instead of glitching.
- Hover-to-spin on the gears had the same conflict; gears now accelerate together so they stay meshed.
- Copy said “the dial below” while the machine sits beside the copy on desktop — reworded. Filled the card’s empty pre-JS host line. Removed a dead background declaration.
- Found the real bug of the build: gears orbited their origins because intro and loop tweens shared one transform cache (yOrigin drifted 132→162). Wrapped each gear so intro animates the wrapper, loop animates the gear. Verified centres pixel-exact over time.
- Added the tempo mapping — tuning to a different programme changes the metronome’s pace, so the machine audibly (visually) retunes.
- Gave the rail stops a job: they flip the yellow square 90° with a
back.out(2.5)snap at each end. - Anchored the empty bottom-left of the poster with a blue quarter-disc, balancing the composition’s weight.
- Verified 375px end-to-end in a real browser: no horizontal scroll, schedule collapses to three columns, card stacks above the list.
aria-livewrapped the whole card — screen readers would have announced the elapsed counter every second. Scoped it to the title block.- Machine loops now pause via ScrollTrigger when the poster is off-screen, and via
visibilitychangewhen the tab hides. - Reduced-motion verified: CSS kills all animation, JS never builds the loops, every shape stays visible in its composed state. Focus ring confirmed 3px blue on schedule rows.
- Chanel rule: removed the redundant “Live schedule” chip — the lamp and the card already say it. Final copy read: no filler survived.