How it's
made

Konzept

Site sixteen of twenty-five is a Bauhaus Vorkurs exercise made clickable: the 1923 Weimar poster — circle, square, triangle, three primaries plus black — as the entire material. Nothing photographic, nothing borrowed. Every mark on this page is a <div>, an SVG path, or a line of hand-rolled arithmetic, dragged into balance and left to argue its way back.

Die Technik

• Physics, no engine. Every shape is a plain object carrying x/y/vx/vy. Each requestAnimationFrame tick raises a friction constant to the power of the frame's real duration (so 60Hz and 144Hz screens settle identically), integrates position, and reflects the shape off the stage edges with a restitution coefficient. A short pointer-history buffer means a released drag inherits real velocity — a flick, not a snap-to-cursor.
• One shadow, one declaration. Instead of a duplicate offset element behind every shape, each fill carries filter: drop-shadow(var(--lift) var(--lift) 0 #141414) — a zero-blur CSS filter silhouetting whatever alpha shape sits inside it. --lift itself grows on hover, shrinks while dragging: the shadow doubles as the touch affordance.
• currentColor as the palette switch. Shapes carry only a data-color attribute; CSS maps that to color, and every fill — background, border-color, or an SVG stroke="currentColor" — inherits it. Four rules cover all thirteen shapes and three poster generators; not one inline hex value.
• Spring stagger without a spring library. Reset Komposition and Zufall never touch the physics loop's velocities — they hand each shape a {from, to, start, duration} tween, with a per-shape start delay from a shuffled order, run through a hand-written easeOutBack cubic (the standard overshoot-then-settle curve). The shuffle is what makes the whole stage arrive like it's breathing, not marching.
• A poster press in about sixty lines. Die Plakate builds an SVG string on demand from small data pools — fictional Weimar venues, months, ticket numbers — plus three or four freshly placed shapes drawn from the same five-type vocabulary as the hero. Every click is a new plate, not a swap between fixed options.
• Choreographed, not just animated. First paint runs an entranceAssemble() pass — every shape starts flung out past the stage edge and springs home through a shuffled cascade, reusing the same tween system Reset and Zufall already run on. A single requestAnimationFrame-gated scroll listener ties the manifesto band's rotation to its position in the viewport: real scroll-linked motion, not a fade triggered once by IntersectionObserver.

Der Prozess