Die Bewegung ist das Produkt
Tier-List-Editoren behandeln die Rangliste als Dokument: ziehen, herunterladen, vergessen. Im Stream ist der Vorgang die Show, und dort versagen die üblichen Werkzeuge: Karten springen statt zu wandern, und das Publikum sieht bis zum finalen Screenshot gar nichts.
Rung ist um die zwei Dinge gebaut, auf die es live ankommt. Das erste ist echtes FLIP: die Nachbarn machen Platz, statt sich zu teleportieren. Das zweite ist der Zuschauer: über einen offenen Link sieht er dieselbe Tafel im selben Moment, während der Streamer sie noch baut.
Was drinsteckt
Echtes FLIP
Die Kartenpositionen werden vor und nach der Änderung gemessen, die Differenz per Transform ausgeglichen und über die Web Animations API freigegeben. Bewegt wird nur die composited-Ebene, deshalb ordnen sich dreißig Karten ohne Bildratenverlust neu.
Ziehen von Hand geschrieben
Ein Hook auf Pointer Events: funktioniert mit Maus und Finger, denn HTML5-Drag-and-drop gibt es auf Touchscreens nicht. Die aufgenommene Karte kippt und wirft einen Schatten — sie ist in der Hand, nicht «markiert».
Präsentationsmodus
Die Tafel wird groß, Karten werden einzeln mit der Leertaste aufgedeckt, jede steigt versetzt aus sechs Pixeln Unschärfe hervor. Das ist ein Rhythmus für die Kamera, keine Verzierung.
Ein Live-Link für den Chat
Eine offene Seite ohne Anmeldung aktualisiert sich per Server-Sent Events noch während des Ziehens und taugt als Browser Source in OBS. Im Editor steht, wie viele zusehen.
Rückgängig statt Dialoge
Das Dokument lebt in einem Reducer, frühere Zustände auf einem Stapel — Strg+Z gilt für jede Änderung. Sich vor Publikum zu irren darf einen Tastendruck kosten.
Selbst geschrieben statt Bibliotheken
FLIP, Ziehen, Router und PNG-Export sind von Hand geschrieben: ein Canvas statt html2canvas, siebzig Zeilen statt einer Animationsbibliothek. Laufzeitabhängigkeiten: React und React DOM.
Screenshots
