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
Two skins, one rule: the metaphor has to be the remote.
☢ Geiger: the knobs are real sliders. VOLUME turns 270°, TUNING winds the tape 5s per click, and the heartbeat flatlines when you pause.
🎬 Slate: the clapperboard plays and pauses, SCENE cuts chapters, and FPS shows the speed in camera terms (0.5× = 48 fps, overcrank).
Both keyboard-first, both stream from Mux, both open source.
Which one would you actually put on your site? 👇
Geiger → https://geiger-one.vercel.app
Slate → https://slate-nine-hazel.vercel.app
Just checked out the Demo, Awesome work mate, love the attention to detail! 👏
🙌ö
Sorry, that last one sent early! Thanks so much Gökhan, really glad you tried the demo. Farbspur building its seek bar from the picture itself is still one of my favourite ideas in the challenge 🙌
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
Behind the scenes of Slate 🎬 How I turned a clapperboard into a video player
Pick an object everyone already knows
I wanted a player people would get in one glance. Every film starts with the same object: the clapperboard. Prod, Roll, Scene, Take, and the sticks that clap to start a take. That became the whole design language.
First version: it looked right, but it was just decoration
The sticks clapped when you pressed play, and the timecode counted frames, but you couldn't do anything with the board. Then I scrolled through this challenge and noticed the entries I loved most share one rule: every part of the object actually does something.
So I rebuilt it: the board is the remote
🎬 The clapsticks are the play button. Clap them shut to roll, lift them to cut.
🎞 SCENE is the chapter. It shows the scene you're in and cuts to the next one.
⏱ FPS is the speed. Slow motion is shot "overcranked", so at 0.5× the slate reads 48 fps · Overcrank.
🔇 SOUND reads MOS when muted, the real on-set mark for a take with no sound.
Every one of these is real film-set language, so the jokes also work as labels.
Make it readable over any footage
No see-through gradient bar. The controls sit on a solid ink board with chalk type and one accent colour, production yellow, so they stay readable over bright skies and dark scenes.
Make it work for everyone
Every control works from the keyboard in visual order, with a visible focus ring. The board's cells are real labelled buttons, so a screen reader says "Scene 4 of 10: Unformed. Next scene". It scales down to 340px phones, and reduced motion switches off the clap and flash.
Give it something real to play
Instead of stock footage, I made a short film of eight Framer templates I designed, streamed it from Mux, and gave it a chapter for each template, so every template becomes a scene on the slate.
Built with the Video.js v10 skin CLI: HTML + CSS, plus four tiny custom elements that read the player's state.
What film-set detail should the board steal next? 👀
Love the behind-the-scenes breakdown. A clapperboard is an object everyone gets instantly.
Mux's Creative Director, Rob, had been keeping AI at arm’s length. All he could picture was Will Smith eating spaghetti. Surely it couldn’t be useful in the world of design.
Then he used Claude Code to design and ship a custom skin for Video.js v10. Learn how he went from skeptical to building a live player, with Figma and his design instincts at the center — plus, what he learned along the way.
Give it a read: https://www.mux.com/blog/how-a-designer-learned-to-unsee-will-smith-eating-spaghetti
I'm ready to turn creativity into innovation! 🚀 My goal is to build a next-level Video.js skin that combines premium design, smooth performance, modern UI, and an outstanding user experience. I don't just want to participate in this challenge — I want to create something businesses would love to use. Let's turn this challenge into an opportunity! 💻🔥