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
Brasswater Gauge is a Video.js 10 skin built from my indie game Brasswater: No Rain Tomorrow, where the rain stopped a hundred years ago and every liter of water matters.
The player is a brass water purifier from the game's convoy, and nothing on the machine is decoration:
The brass hand-wheel is the play button: "open the valve" to start the film.
The timeline is a glass tube. Water with bubbles fills it as the film plays, and you drag the brass collar to seek.
The steam regulator sets the volume, and the pressure gauge needle reads the level.
The counters turn like an odometer.
The TANK lever slides out a water tank: it fills as the film loads and shows the buffer in percent. Its red lamp stops the film, and its tap rewinds 10 seconds.
The REELS lever opens a cabinet: REELS jumps to a part of the film, SETUP holds speed, captions and loop.
Under the brass it is a real player: Video.js 10 HTML elements, the video streamed from Mux (HLS with an HD quality menu), captions, playback speed, picture-in-picture and fullscreen. It works with the keyboard (Space, arrows, F, C, M), every control has a label for screen readers, and the focus ring is visible. On phones the console grows into two rows and the cabinet moves under the player, so nothing is lost, and fullscreen turns the film sideways.
Live demo: https://brasswater-gauge.netlify.app
The game: https://sansfin.itch.io/brasswater
Building it from your own game's world is a great move. A brass water purifier where nothing is decoration, love that.
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
Who wants to come to a picnic with an outdoor movie? I'll bring the video player 🧺🎬
Picnic Cinema is my new Video.js skin: a 3D garden cinema where the controls hang as tags from festoon bulbs. The lights glow when you pause and dim when the film starts.
Too comfy to reach the bulbs? Grab the remote on the picnic table.
You can still use the keyboard like a normal player: Space to play, arrows to seek and change the volume, F for fullscreen.
this is such a fun concept!
Kerf is a Video.js 10 skin built on one idea: cut the picture instead of covering it.
Most players float their controls over the video, then fight the footage for contrast with gradients and blur. Kerf cuts a notch into the player’s own frame and puts the controls there, on a solid surface in your product’s colour. They read the same over a white sky or a black night. Previews, menus and volume rise out of that frame from the control that opened them, and sink back when the film plays.
It’s built for modern SaaS and minimal products: one accent and one radius to set, plus light, dark or auto surfaces. It folds the controls away before the first play, and adds chapters, storyboard previews and captions as a notch. Every control works by keyboard, focus rings are visible, it honours reduced motion and forced colours, and it supports right-to-left layouts. axe-core reports 0 violations.
Plain HTML and CSS on @videojs/html with the official icons. Open source under Apache 2.0.
Love how the controls sit in the frame.
SIDE A - Press Play Like It's 1985.
What if a video player felt like something you could actually touch?
SIDE A is my take on a Video.js v10 skin, inspired by vintage tape decks and the tactile experience of analog technology.
I wanted to move away from the usual minimal video interfaces and create something with personality. Mechanical-style playback buttons, a rotary volume knob, aged brass details, retro typography, and subtle CRT effects all come together to make the player feel like a physical object rather than just another interface.
But the idea wasn't simply to make something nostalgic. I wanted to show that an unconventional design can still be intuitive and accessible. SIDE A is built with responsive controls, keyboard navigation, visible focus states, touch-friendly interactions, and reduced-motion support. In fullscreen, the tape deck transforms into a minimal control tray, keeping the focus on the content.
The result is a balance between old-school character and modern functionality.
Because sometimes pressing play should feel as good as watching what's playing.
Built with Video.js v10 and released under Apache License 2.0.
Press play like it's 1985, love the tape deck feel.