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
Geiger ☢ The world ended. The show didn't.
Most video players try to disappear. Geiger does the opposite: it turns the Video.js v10 player into a survivor's wrist terminal, a green-phosphor CRT in a rusted gunmetal housing, inspired by the Pip-Boy from Fallout. And the device isn't decoration. Every part of it is a working control.
📟 It boots. The poster greets you with "Welcome back, Survivor." Press play and the tube powers on from a single bright line, runs a self-check, and hands over to the picture with a little power-up chirp.
🎛 Real knobs. The VOLUME knob turns through 270°, from silent to full. The TUNING knob is an endless dial that winds the tape 5 seconds per click. Drag them, scroll over them, or focus them and use the arrow keys. To screen readers they're proper sliders.
🟧 The amber side plate. PLAY, AUDIO, CAPTIONS, SETTINGS, EJECT (picture-in-picture) and SCREEN (fullscreen) are the device's main keys, with a lit marker beside whichever is on.
📼 Holotapes are chapters. Pause and the chapters appear as a holotape list of real buttons. Pick one to wind there and play. The header always names the chapter you're in, and PREV / NEXT skip between them.
📈 Vitals you can use. VOL is the volume slider. SPD steps the speed. SIG shows how much tape is buffered ahead. A heartbeat runs while the tape plays: it races at 2×, slows at 0.5× and flatlines on pause. The rad gauge reads the volume.
💬 It talks back. "Sit back. The world can wait." At 1.5× it asks "In a hurry, Survivor?". Outrun the buffer and it reads SEARCHING with a radar sweep, seeking crackles like a Geiger counter, and the end of the tape reads "Signal lost".
Made for everyone: every control works from the keyboard in visual order, with an amber focus ring. Panels are dark and near-opaque so the glow stays readable. On small players the grip and side column fold away and the panel's own buttons take over, down to 340px phones. Reduced motion skips the boot, heartbeat and needle tremble. Sounds are quiet, and silent when muted. Forced-colours mode falls back to system colours.
It streams from Mux. The demo plays "Selected Works", a film of the Framer templates I designed, with a chapter for each one, so the skin is shown doing a real job.
Built with the Video.js skin CLI as HTML + CSS, plus small custom elements that read the player store (knobs, meters, status, chapters, sounds). All artwork and code are original. It's a fan tribute, not affiliated with Bethesda. Open source under Apache-2.0.
It's also live on my real site: my Framer portfolio opens with the film playing in Geiger, and I rethemed the whole site to match the device (green-phosphor colours, condensed uppercase headings and a terminal monospace for labels), so the player and the page feel like one product.
A Pip-Boy wrist terminal as a player, what a pick. The world ended, the show didn't, great line.
Denis Really appreciated!!
thank you eros! the heartbeat was the detail i obsessed over most, so glad it landed. and making the knobs real sliders for screen readers was a must for me 🙌
Its looking awesome
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
Plate is an HTML skin for Video.js 10. It draws the player the way quickflow.dev draws everything else: a numbered head with a status word, the picture framed by corner marks, a chapter index beside it, a ruler for a timeline and text keys underneath. A player is a diagram of a video's time, so I drew it like one.
What it does
Every chapter cue gets a button in the index, with its own frame from Mux's storyboard. Video.js has no chapter navigation control yet, so a small custom element reads the cues from the player store. Below 760px the index turns into a strip that scrolls with the video.
The time slider is a ruler, with a numbered mark where each chapter starts.
The keys are words you can read. Speed, Quality, Captions and Audio open Video.js menus. Space, K, M, the arrows, J and L, 0 to 9, < and >, F, C and I all work from the keyboard, and every control shows a focus ring.
In fullscreen the picture goes edge to edge, the controls fade while it plays, and an Index key opens the chapters as a side panel.
It comes in three themes (Night, Blueprint, Signal), takes your colours, fonts and corners through public custom properties, and speaks seven languages: English, German, French, Spanish, Romanian, Russian and Arabic, right to left included. It follows reduced motion, higher contrast, reduced transparency and forced colors.
The workbench at plate.quickflow.dev lets you try it on your own video, change every property, watch contrast and control names in a live accessibility readout, and download the CSS for your theme.
Plate plays the showreel on quickflow.dev. The code is open source under Apache 2.0.
does the chapter index stay visible in fullscreen or does it tuck away?
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.
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
Well done.
