The motion is the product
Tier list makers treat the ranking as a document: drag, download, forget. On a stream the process is the show, and there the usual tools fall apart: cards jump instead of moving, and the audience sees nothing until the final screenshot.
Rung is built around the two things that matter on air. The first is real FLIP: neighbours make room instead of teleporting. The second is the viewer: an open link shows them the same board at the same moment, while the streamer is still building it.
What is inside
Real FLIP
Card positions are measured before and after the change, the difference is inverted with a transform and released on the Web Animations API. Only the composited layer moves, so thirty cards reorder without dropping frames.
Drag written by hand
A hook on Pointer Events: works with a mouse and with a finger, because HTML5 drag-and-drop does not exist on touch screens. The lifted card tilts and casts a shadow: it is in your hand rather than «selected».
Reveal mode
The board goes large and cards are uncovered one at a time with the space bar, each rising out of a six-pixel blur with a stagger. That is a rhythm for the camera, not decoration.
A live link for chat
An open page with no login updates over Server-Sent Events while you drag, and works as an OBS browser source. The editor shows how many people are watching.
Undo instead of dialogs
The document lives in a reducer and past states in a stack, so Ctrl+Z covers every change. Being wrong in front of an audience should cost one keystroke.
Hand-written instead of libraries
FLIP, drag, the router and the PNG export are all written by hand: a canvas instead of html2canvas, seventy lines instead of an animation library. Runtime dependencies: React and React DOM.
Screenshots
