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
Voyage — every video is a voyage 🗺️🦅
A custom skin for the Video.js v10 player, designed as a hand-painted antique sea map.
The idea
Watching a video is a journey, so I turned the player into one. The progress bar is a sea route, and the playhead is a falcon that flaps its wings while the video plays and glides when it's paused. The chapters are six islands along the route: they stay faded until the falcon reaches them, then bloom into full colour, so you can see your journey at a glance. Hover an island to see its name, click it to sail straight there.
Every control belongs to the map's world:
• Red wax seal: play / pause
• Conch shell: mute
• Brass compass: volume (the needle turns with the sound)
• Message in a bottle: captions
• Spyglass: fullscreen
Accessibility
• Controls sit on an opaque parchment strip, so they stay readable over bright and dark footage
• Every button is at least 48px, comfortable for thumbs
• Fully usable with a keyboard, with a clearly visible focus outline, and menus close with Escape
• With reduced motion on, the falcon stops flapping and the islands change colour instantly
• Responsive: on phones the route straightens and every control stays
Process
All the artwork (map, islands, falcon and icons) is my own, created with AI image tools, then built into a working Video.js v10 skin with Claude Code.
Video: Sintel trailer © Blender Foundation | durian.blender.org (CC BY), hosted on Mux.
The falcon playhead is so fun.
Thanks! Glad you enjoyed the voyage 🦅
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
Indigo: A Video.js v10 Skin
I built Indigo around one simple idea. Most video players spread their controls across bars, rows and corners. I wanted to see what happens when everything lives in one floating pill.
Play, volume, the seek bar, time and settings all sit inside a single glass capsule that floats over the picture. The seek bar lives inside the pill. At rest it is a thin 3px line. When you reach for it, it grows to 6px, a thumb fades in, and the part you have already watched glows in indigo. Time is shown in JetBrains Mono, the way a real timecode should look. The pill uses a soft blur, a gentle shadow and a fine light edge on top. In the light scheme the pill turns to pale glass and the indigo line stays.
It is built on the Video.js v10 scaffold, written as markup and CSS, with no legacy videojs() API. Every control works from the keyboard, focus is always visible, and it respects reduced motion, forced colours and reduced transparency. It works in light and dark, on desktop and on mobile, with proper 44px touch targets.
I did not stop at one design. I built five more directions alongside it and judged them against each other: Aurora Glass, a merged glass capsule, Ember, a cinematic layout with no bar at all, Duo, two detached control islands, Cinema Noir, an editorial film direction, and Pixel Play, a modernised arcade HUD. Indigo is the one that earned its place, so Indigo is my entry.
Live demo: https://indigo-orcin.vercel.app/preview.html
Code: https://github.com/haseebpir/indigo
Figma design file: https://www.figma.com/design/sNC6EfwTYauoRLs92zVwbi
Walkthrough video: https://player.mux.com/UAxu3eRTUwX2Rw4LIKo2IJ01RyFCUI6j7LCZpFDRA2Ko
Live site: https://thehitekagency.com/indigo
Designed and built by Haseeb P., CEO, The Hitek Agency, Houston, Texas, USA.
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.