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
Atelier — a Video.js player built as a tailor's workbench
I art-direct portraits and brand visuals, and I wanted a player that feels made by hand rather than drawn. Atelier turns the player into a couture tailor's workbench, and every tool on it is a working control. The seek bar is a measuring tape, one mark per second. You drag a glass-headed pin along it, the buffered part is a stroke of tailor's chalk, and when you cut into the tape a pair of shears snips. Hover it and a pattern-paper swatch shows the frame and the time. Volume is a spool: the thread thins as you turn it down. Speed, picture-in-picture and fullscreen sit together on a felt pincushion, and keyboard focus is a dashed stitch. Under the craft it stays plain: 44 px targets, full keyboard control, and no motion on request.
Running live on my studio site, darkhoneyartdirected.lovable.app. Built on Video.js v10 with HTML custom elements and CSS.
A tailor's workbench player, made by hand rather than drawn. Lovely concept.
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
Plate is an HTML skin for Video.js 10. It draws the player the way quickflow.dev draws everything else: a numbered head with a status word, the picture framed by corner marks, a chapter index beside it, a ruler for a timeline and text keys underneath. A player is a diagram of a video's time, so I drew it like one.
What it does
Every chapter cue gets a button in the index, with its own frame from Mux's storyboard. Video.js has no chapter navigation control yet, so a small custom element reads the cues from the player store. Below 760px the index turns into a strip that scrolls with the video.
The time slider is a ruler, with a numbered mark where each chapter starts.
The keys are words you can read. Speed, Quality, Captions and Audio open Video.js menus. Space, K, M, the arrows, J and L, 0 to 9, < and >, F, C and I all work from the keyboard, and every control shows a focus ring.
In fullscreen the picture goes edge to edge, the controls fade while it plays, and an Index key opens the chapters as a side panel.
It comes in three themes (Night, Blueprint, Signal), takes your colours, fonts and corners through public custom properties, and speaks seven languages: English, German, French, Spanish, Romanian, Russian and Arabic, right to left included. It follows reduced motion, higher contrast, reduced transparency and forced colors.
The workbench at plate.quickflow.dev lets you try it on your own video, change every property, watch contrast and control names in a live accessibility readout, and download the CSS for your theme.
Plate plays the showreel on quickflow.dev. The code is open source under Apache 2.0.
does the chapter index stay visible in fullscreen or does it tuck away?
What if your video player felt more like an audio amp knob and less like clicking a spreadsheet?
Threw my hat into the #videojsskinschallenge with Detent.
Built it to work natively across everything—flick it with your thumb on mobile, drag it with a mouse, or scrub second-by-second using keyboard hotkeys.
Test drive the dial:
Be honest: would you swap the old flat timeline bar for a jog wheel?
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.
