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
LINE 10: every control is a sign.
The first films were phantom rides. Someone bolted a camera to the front of a streetcar and let it roll. So I built a Video.js v10 skin like the line they rode.
The seek bar is the line diagram and chapters are stations. Hover it and you get a station sign with a preview frame. The clock is a split-flap board where only the changed digits flip. An LED strip tells you what the player is doing: Ready to depart, In service, Holding at platform, Quiet carriage when muted. The destination blind reads "towards Ferry Building" from the last chapter, so you know where the video ends before you press play. [ and ] jump between stops.
Why transit signs? They're read at a glance by everyone, in any light, while things move behind them. That's the job of player controls too, so accessibility is the idea, not an afterthought: one focus ring that shows over any frame, solid plates with strong contrast, full keyboard use, calmer motion on request, and six languages including Arabic with mirrored controls.
The demo is A Trip Down Market Street (1906) with an original piano score, hosted on Mux. Source: https://github.com/haruu99/line-10
Great work
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
Proof — a press-proof skin for Video.js v10
Proof treats the player like a sheet coming off the press. Crop and registration marks frame the picture, and the controls sit on an opaque paper margin with a K·C·M·Y colour bar, so they stay readable over bright and dark footage alike. The seek bar is a tint ruler with a registration-target thumb, volume is printed as ink density (yellow, magenta, cyan, then key), and when the video ends the sheet is stamped "OK to print."
It's built on the Scaffold skin's accessible components: every control is reachable by keyboard with a registration-magenta focus ring, touch targets are 44 px, the plate compacts on phones, motion switches off under reduced-motion, and decoration steps aside in forced-colours mode. The demo plays our own studio film from Mux, with chapters and captions. Designed and built by Sidepath Studio.
Lightline. A video player drawn around one line of of light.
I entered the Video.js skins challenge with a player called Lightline.
One line of light runs it. The line shows where you are in the film. Its color shows what the film is doing.
Two layouts. Cinema leaves the film alone on the screen. Suite sets the tools beside it. An audio lab. Guides over the picture. A timeline you can read. More than 50 languages.
The video is the player playing its own opening.
Go break it: https://frederickdesign.studio/lightline
Then tell me what broke.
Love the single line of light.
SIDE A - Press Play Like It's 1985.
What if a video player felt like something you could actually touch?
SIDE A is my take on a Video.js v10 skin, inspired by vintage tape decks and the tactile experience of analog technology.
I wanted to move away from the usual minimal video interfaces and create something with personality. Mechanical-style playback buttons, a rotary volume knob, aged brass details, retro typography, and subtle CRT effects all come together to make the player feel like a physical object rather than just another interface.
But the idea wasn't simply to make something nostalgic. I wanted to show that an unconventional design can still be intuitive and accessible. SIDE A is built with responsive controls, keyboard navigation, visible focus states, touch-friendly interactions, and reduced-motion support. In fullscreen, the tape deck transforms into a minimal control tray, keeping the focus on the content.
The result is a balance between old-school character and modern functionality.
Because sometimes pressing play should feel as good as watching what's playing.
Built with Video.js v10 and released under Apache License 2.0.