The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
FLAGFALL — broadcast graphics for bullet chess, running on the live Lichess feed.
Here is the thing about bullet. Both players drop under fifteen seconds, the moves start landing faster than you can read them, and it turns into the only sport where the clock kills you more often than the opponent does.
Every broadcast package I have watched gets louder at that moment. Bigger numbers, more chrome, a graphic for the tension.
This one starts to break.
The move list slides off its own edge and leaves. The modules lift off their registration marks and drift, each at its own rate, until the whole rack is out of true. By the end there is a board, two clocks, and not much else.
The board never moves. Not once. The instrument is failing; the game is completely fine. That contrast is the whole piece, and it is why it is called FLAGFALL.
None of it is staged. Open /live.html and it draws whatever game Lichess TV is showing right now: real players, real ratings, a real clock draining. A Stockfish sits inside the graphics chain and evaluates every position as it arrives, which buys three things a television feed cannot give you: how often the move played was the engine's own first choice, a premove detector read off the feed's own timing floor, and the move that wasn't played, drawn across the board as a ghost.
Then the same .riv replays a Formula 1 race. Same artboards, same view models, same Luau, same state machines. 02 / MOVES re-captions itself to 02 / LAP GAPS out of the same bound text, and a DRS gap inside one second trips the same failure state a flag scramble does. Only the adapter changed.
Live: flagfall-eta.vercel.app · /live.html (Lichess TV) · /f1.html (F1 replay)
don't forget to share your Rive invite link!
Here you go Isabel, and thanks for the nudge: https://editor.rive.app/file/flagfall/2464544?linkId=alZ-kA8_DkuYlDz3bcT4sA
The .riv is public too, no Rive login needed, if that is ever quicker for anyone who wants to poke at the file directly: flagfall-eta.vercel.app/flagfall.riv
Brilliant challenge. Thanks for running it.
Interesting! I still have no idea how to do this
Same here a few weeks ago. I only picked Rive up for this challenge, read a bit of the documentation and then mostly poked at it until things started moving.
The animation side turned out to be the easy part. What took me longest was working out which things you can actually...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Can a hummingbird be stitched, dithered and broadcast all at once?
Relic Signal is a brand where old craft never stopped transmitting. 1-bit Bayer dither, difference blend, five colors, one grainy sky.
Made by hand. Received by signal.
Turn Four: Every Frame on the Racing Line
Turn Four turns the replay timeline into a circuit. Drag around the oval to seek, choose one of four sectors, loop a detail, slow it down, or mark a moment to revisit. Warm paper, graphite control surfaces, condensed typography, and signal orange give the interface its motorsports character. Video.js 10 handles the player, with keyboard controls, visible focus, descriptive captions, responsive layouts, and reduced-motion styling. The fictional automotive concept film moves through dusk, daylight, night, and an overhead composition so the controls can be judged against changing images.
racing line replays are weirdly satisfying to watch. is this running on real telemetry?
Title
Arcade: a Video.js 10 skin that turns the player into an arcade cabinet
Live URL
https://arcade-skin.vercel.app/
Mux public playback ID
fNEeWPY4UUEkfCFd9617w8gvYFEsFOv72rPQj3qKG700
Description
Arcade turns the Video.js 10 player into a photoreal arcade cabinet. A neon VJS × MUX marquee sits above a glowing CRT tube, with a control deck and front panel of real arcade buttons below it. My aim was a player that's fun to play with but still works as a player. Behind the art, every control is a Video.js component with its own role, translated label and keyboard support.
Joysticks: both are real ARIA sliders. The left stick scrubs the film, going faster the further you push it. The right stick sets the volume and shows it on a 10-LED meter. They work with mouse, touch and keyboard, and spring back when released.
Screen and status: the time is shown on a 7-segment readout and the chapters on an LED seek strip. When the film ends, the CRT collapses to a dot.
Arcade options card: opens on the screen itself. It turns on a WebGL curved-CRT shader, a typewriter dialogue box for captions, sound effects and vibration.
Arcade extras:
Level select shows the film's chapters as game levels.
TURBO speeds playback up.
A how-to-play card lists the controls.
Typing ↑↑↓↓←→←→BA turns on a secret 8-bit mode.
Four "cartridges" recolour the whole cabinet from one public token.
Accessibility:
One visible focus ring covers every control.
Touch targets are 44px or larger.
A compact layout is built for phones.
All animation stops when reduced motion is on.
High-contrast and forced-colours modes are supported.
Mux: the film is Sintel, streamed from Mux, with Mux Data enabled.