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 is a Video.js v10 skin that turns a video into a transit map. Chapters are stations, the progress bar is a metro route, and a small train is the playhead. It docks and opens its doors at each station, and a tick marks every stop you’ve reached.
I built it because a chapter list is the one part of a player people rarely use. A route makes the structure of a video visible at a glance and makes jumping around feel like travelling.
It’s made to be used by everyone: a real ARIA slider, full keyboard control (arrows, Home/End, PageUp/PageDown for chapters), spoken announcements at each station, reduced-motion support and 44px touch targets. It has three line colours (Sunset Express, Metro Blue, Forest Green) and works on desktop, tablet and phone. Built with @videojs/react and Mux. Apache 2.0.
The train docking and opening its doors at each station is such a cute detail.
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
FIELDNOTE
An original Video.js v10 skin for slow observation. FIELDNOTE treats video as a field journal rather than a distraction engine: warm paper, forest-green controls and an instrument-like timeline frame an original procedural landscape. A solid control surface keeps contrast independent of the footage; responsive controls, visible keyboard focus and a night palette support quieter viewing.
Built with @videojs/html 10.3.0. AI-assisted design and implementation. Original generated demo footage and a quiet generated test tone; no borrowed footage, external fonts or analytics. Original code and generated assets released under Apache License 2.0.
Try the working player: https://velvety-fairy-3d7335.netlify.app/
this is so nice and calming!
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.
