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
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? 👀
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
Hey there, no idea if my submission yesterday went through, therefore to be on the safe side, here we go:
Farbspur is my entry for the Video.js Skins Design Challenge: a custom skin for the Video.js v10 player that gets out of the way of what you’re watching.
The player has no colour of its own. Its seek bar is built from the video: it finds the strongest picture changes and turns them into blocks of colour, so every film gets its own player and you can jump straight to a scene.
→ Glass appears only where your hand is: a single drop moving on spring physics → Skips count up as you press: +5s, +10s, +15s → Quality, speed, casting and theatre mode share one visual language → Full keyboard control, and reduced motion for anyone who asks for it
The film and sound in the video were generated for this project.
I love this concept!
Millennium MC-2000 is a see-through Y2K flip phone that plays video. The keypad isn't decoration: every key is a real Video.js shortcut. 1–9 jump to 10–90%, OK plays, the D-pad seeks and sets volume, ✱ is captions, # is fullscreen.
The status bar is live player data: signal bars show the buffer, the battery shows volume, the clock shows time, and a ✉ arrives with each new chapter. Under 480px the lid closes and flips open on demand.
Every key is 44px and keyboard-reachable, and with reduced motion or transparency the shell turns solid and still.
It works with any video: millennium-mc2000.netlify.app/?media=plain
More explorations: two more skins I designed, switchable live on the same film, at zazzy-skins.netlify.app (House, built from videojs.org's own brand, and Darkroom, a film-developing player).
Film: "Caminandes 3: Llamigos" by Blender Foundation, CC BY 3.0.
Lovely work Zazzy
Aura — a Video.js 10 skin where the player takes its colour from the video itself in real time. An ambient accent and soft glow are sampled live from the frame, so the chrome feels alive and part of the film. A glass control bar and a cinema mode keep all focus on the film. Built for anyone who wants a video player that feels part of the film, not a frame around it.