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
Studio Cut: a Video.js v10 skin that turns the player into an edit bay
Studio Cut borrows the language of a non-linear editor. I work on video tooling, and the part of an editor I trust most is the timeline, so I asked what a player would look like if it treated every viewer like an editor.
The seek bar is a timeline, not a progress line. It has a time ruler across the top, chapters cut into separate clips, a waveform texture, and a playhead needle with a cap you can grab. Hover it and you get the frame plus the name of the clip you are over.
The top HUD is a slate. On the left, a record-style status dot, the clip name as a filename, and a frame-rate badge. On the right, frame-accurate timecode in monospace (00:01:02:12), ticking every frame while it plays.
The controls are tactile transport keys on frosted dark-glass plates, with a single orange accent for play, progress and focus. The plates keep every label readable over bright snow or dark forest alike.
It is built to be used, not just looked at:
• Keyboard: every control is reachable in visual order with a visible orange focus ring, plus editor-style shortcuts (J and L to nudge, K or Space to play, M to mute, F for fullscreen).
• Responsive: from 240px to full width the bar stays on one row. Narrow players get smaller keys and a slimmer timeline, and drop secondary controls before anything overlaps.
• Touch: keys keep a 44px-tall tap area even when they draw smaller.
• Reduced motion: the status pulse stops and the timecode calms down.
• 50+ languages and right-to-left layouts through the built-in Video.js translations.
Built with Video.js v10 (React), Tailwind and Claude Code.
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.
Meniscus is a liquid glass skin for Video.js v10. A meniscus is the curved surface of a liquid, and the whole player is designed as one.
The ripple. When you press play, one soft ripple runs through the video picture itself.
The glass. The controls are frosted glass tiles. They pick up colour from the film, so the player changes with every scene.
The drops. Back 10 s, Play and Forward 10 s are three glass drops joined by liquid. The playhead is a drop too, and it squashes as you drag it.
The sound. Each control makes a soft glass sound, created in the browser. It follows the player’s volume, goes quiet on mute, and can be turned off in Settings.
For everyone. Every button works with the keyboard and shows a clear focus ring. On a phone, the controls move into two rows and the menus use the whole screen. If your device asks for reduced motion or reduced transparency, the ripple stops and the glass becomes solid.
The film streams from Mux in every size from 360p to 4K. The demo clip and its music are only there to show the player. They are not part of the skin and are not covered by its licence.
I made a skin that treats the video player like an instrument.
It's a Teenage Engineering pocket sampler, a pale plastic deck bolted over the video with one orange key for the transport, like RECORD. One short row, hard shadow instead of glass or glow.