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
I designed CUTLINE. It is a custom Video.js v10 player skin featuring a bold editorial design inspired by city nightlife. The experience combines cinematic nighttime traffic footage, neon-inspired accents, clean geometric player controls, responsive layouts, keyboard accessibility, visible focus states, and reduced-motion support. Designed to deliver a distinctive, polished video-watching experience across desktop and mobile.
😊
The neon suits the player.
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!
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.
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.