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
Storytime bonus details
Mux playback ID: ZSUOCjrKreum5zcJKHZSLCtHV0201SzN601eVLhqK46QC4
Live site using the skin: https://renter-friendly-decor.netlify.app/storytime
Nice to see it running on a real site. Great work on Storytime.
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
The secret to this console is dangerously simple:
You’re watching Chapter 5 and want Chapter 2? Just hit 2.
Want the ending? Hit 10.
One tap on any numbered key and you're instantly there—no menus, no loading bars, just a heavy mechanical clack and a cut to the scene.
And then there's the lever. A 360° spring-loaded shuttle that spins freely under your fingers, clicks with every degree, and snaps back the second you let go. It's so tactile it becomes an addiction—you’ll find yourself playing with it long after the scene ends.
The numbered chapter keys are clever.
I’m picky about video players. Give me controls I can find without thinking, a timeline that’s easy to scrub, and enough room for the picture. That’s where All Terrain, my entry for the Video.js Skins Design Challenge, started.
The woods came later. I wanted to see how a minimal player would feel in a setting with a strong character of its own. Smoked glass and muted brass felt right against the woodland footage, and the controls stayed simple enough that I could imagine using the same skin on a portfolio or a film journal.
Both films stream through Mux, and I made a little rookie showcase video to give you a closer look at the desktop and mobile layouts, theater mode, and playback settings.
Public Mux playback IDs
The beauty of still frames by Pepijn Janssen — kDA2CntengmWSO2lKDMb01ZNj2FyyApJwCaE00WR6nWeg
Green by GawxArt — xHdOULPcXIZZaLIaLONfjOWigMq2wdP7thAbgw3EEjQ If you give it a spin, I’d love to hear what feels intuitive and what takes a second to find.
#VideoJSSkinsChallenge #VideoJS #Mux #Contra
Picky about players is the right starting point. Woodland vibe on top of solid basics, nice.
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.