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
I made a video player whose timeline listens to the film. 🎧
VESPER is my Video.js v10 skin: one pane of glass, and a seek bar drawn from the recording's own sound. Quiet scenes rest flat, dialogue breathes, and the loud moments rise. No fake equaliser bars — that's Pulse, built from the real audio energy of every film.
Everything else waits inside the same glass and opens only when you ask:
→ Jog: hold Play and turn. The farther you turn, the finer it seeks, with the real frame under your finger.
→ Explore: search a word in the transcript and land on that exact line. Scenes and private Moments live here too.
→ Repeat: loop one sentence, or any A–B range.
→ Sound: tap for volume, hold for a five-band glass EQ with four presets.
→ Dock: hold the grip and move the whole panel to any edge. Pin it and it stays.
It's built to work for everyone: full keyboard control with visible focus, 44 px touch targets, captions you can size and place, higher contrast and calm motion when your device asks for it.
The Sintel film is streamed by Mux, and four more demos (a NASA lesson, a scripted meeting, a product concept and an Icelandic waterfall) show the same controls on very different content.
Try it: https://vesper-player.pages.dev
#videojsskinschallenge
Two things I’m proud of: the timeline is drawn from the film’s real audio energy (try the waterfall demo — the line follows the roar), and VESPER is already put to work on my own portfolio: https://nostalog.pages.dev/vesper-video-oynatici
nostalog.pages.dev
VESPER Video Oynatıcı Tasarımı | Nosta Log
Video.js 10 için özel oynatıcı arayüzü: filmin sesini dinleyen bir zaman çizgisi ve tek parça cam panel. Canlı dene.
• 3h
Hmm this is so professional design and tools i like this.
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
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
• 1d
Well done.
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?
Turn Four: Every Frame on the Racing Line
Turn Four turns the replay timeline into a circuit. Drag around the oval to seek, choose one of four sectors, loop a detail, slow it down, or mark a moment to revisit. Warm paper, graphite control surfaces, condensed typography, and signal orange give the interface its motorsports character. Video.js 10 handles the player, with keyboard controls, visible focus, descriptive captions, responsive layouts, and reduced-motion styling. The fictional automotive concept film moves through dusk, daylight, night, and an overhead composition so the controls can be judged against changing images.
racing line replays are weirdly satisfying to watch. is this running on real telemetry?