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
Press Proof — a Video.js v10 skin that prints its controls
Press Proof treats the player as a sheet on a proofing table. Most skins float translucent controls over the picture and hope the footage cooperates; this one prints them, in solid ink on an off-white paper strip, so they read the same over a night sky or a snowfield (ink on paper is about 16:1).
Every mark comes from the print shop and has a job. The timeline is a printer's colour bar with ruler ticks and a hatched buffer, the scrubber is a registration target, fullscreen is a pair of crop marks, volume is a ten-step densitometer scale, and the big play button is a registration target whose cyan and magenta plates sit slightly off register. The one piece of motion with a personality is misregistration: hover a control and its plates slip and snap back into register. With reduced motion on, nothing travels.
It stays usable for everyone: all controls in visual order on the keyboard with a single magenta-on-paper focus mark, menus that close with Escape and return focus, touch targets of 40 px or more, a full-bleed strip on phones, RTL support, and a clean fallback to system colours in Windows High Contrast. Icons were drawn for the skin; type is IBM Plex Mono. The demo page switches between bright footage (our Mux asset) and dark footage so legibility can be judged over both, and links to the skin workbench for sizes, ratios, languages and RTL.
Built with an AI coding assistant (Claude Code) from the Video.js CLI Scaffold starting point, under human art direction and review.
Footage: Big Buck Bunny (excerpt), © Blender Foundation, CC BY 3.0, hosted on Mux; NASA Cosmic Dawn trailer (Video.js demo asset). Typeface: IBM Plex Mono (OFL). Skin licensed under Apache-2.0. Design and build: Rui Codex, Belgium.
Printing the controls in solid ink so they read the same over a night sky or a snowfield is such a smart answer to the contrast problem. The plates slipping out of register on hover is a perfect bit of personality.
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
Darkroom, a Video.js v10 skin that develops your video like 35 mm film.
Darkroom turns the Video.js v10 player into a roll of 35 mm film. The scrubber is the strip itself: four perforations to a frame, chapters spliced on frame lines, and every frame you have watched develops into an orange negative printed from the video's own storyboard. Hover a frame and it flips to a positive, with a contact print above it naming the frame and time. The readout is a darkroom timer instead of a timestamp: a camera counter that starts at S, ticks through 36 exposures and ends at 36 END, where a Roll complete card rewinds the strip in steps.
Safelight red is kept for focus rings, the exposure lamp and active states. Everything else is paper on a grain textured panel that holds 11:1 contrast over white footage, so the controls stay readable over any video. The icons are a custom family drawn for the concept: a viewfinder for fullscreen, an aperture for settings, a rewind crank for restart.
It is fully keyboard operable with visible focus everywhere, 44 px touch targets, reduced motion support, forced colors support, and a responsive layout tested from 240 px to fullscreen in Chrome, Safari and Firefox. The showcase page lets you switch between dark and bright footage and between 16:9 and 9:16.
That film-strip scrubber is clever.
Spectrum Reel is a Video.js 10 skin built from a scan of the film it plays. The seek bar borrows the old movie-barcode idea and makes it the timeline: not one colour per scene but every frame, eight a second, squeezed into a column and cut into scenes at the hard cuts, so you can see the aurora or the desert and jump straight there (click, [ and ], or the Scenes menu). Instead of one gradient over every frame, each row of controls gets its own backing for the picture behind it: a thin shade over a dark horizon, a paper chip over cloud or a lit city. That map is made once per video by a small script, so nothing reads the video during playback, and without it the skin falls back to a plain scrim. Footage: NASA ISS time-lapses (public domain in the US), streamed from Mux.
Aura — a Video.js 10 skin where the player takes its colour from the video itself in real time. An ambient accent and soft glow are sampled live from the frame, so the chrome feels alive and part of the film. A glass control bar and a cinema mode keep all focus on the film. Built for anyone who wants a video player that feels part of the film, not a frame around it.