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
Cue — a quiet Video.js 10 skin that speaks five languages
A cue is one line of subtitles, and the signal to begin. I built a skin around that idea.
• Quiet until you reach for it. One row of controls that rises as your pointer comes near the bar, and subtitles that always step above it.
• Five languages, one Mux asset. English plus Spanish, French, German and Italian voice-overs and subtitles, right in the Video.js menus.
• Clip any sentence. The seek bar turns into a range that snaps to subtitle lines. Share a link that keeps the language and the look, or save a short video with the subtitles burned in. Mild looks (B&W, Warm) and a soft fade in and out.
• The film's own light. The skin is monochrome; around the player, the page glows with the colours of the scene.
Two rules guided every choice: don't make me think, and less is more.
44 px targets, visible focus, full keyboard use, calm with reduced motion.
Built on Video.js 10 · streamed by Mux · voice-overs made with ElevenLabs.
A cue as both a subtitle line and a signal to begin, nice concept. Quiet until you reach for it is the right call.
building a whole skin around a single subtitle cue is such a thoughtful idea, quiet until you reach for it is exactly right
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
A dark, glassmorphic Video.js v10 skin. The control bar is a frosted-glass strip that floats over the footage, so it stays legible over both bright and dark video. A violet-to-magenta gradient fills the progress bar and the scrubber glows, giving the seek line a "live" feel. The big play button is a deep violet circle. All five essential controls are present and keyboard-reachable with visible focus outlines, and the bar reflows cleanly from desktop down to a phone-width player. The video is hosted on Mux.🙌
Ghost Peek — Preview any moment without pausing
I built Ghost Peek because I kept rewinding videos to check one detail and then having to find my place again.
Most players show a still image when I hover over the timeline. That helps me find a shot, but I need to see it in motion to catch an actor’s reaction or understand how one car passed another. I wanted to check those moments while I kept watching and listening.
When I’m following a Blender walkthrough, I can see what the mesh looks like a few steps ahead while I listen to the explanation. When I’m reviewing one of my films, I can check an earlier shot for continuity while the current cut plays. And when I miss a pass in a race recording, I can replay that corner while the race carries on.
Ghost Peek is my custom Video.js v10 skin for those moments. Hover over the timeline to play a second moment in a small, silent window while the main video and its sound keep going. On a phone, tap the eye to peek, then drag the preview out of the way or pinch to resize it. Click or tap the hollow marker to jump to that moment.
Instagram reel: https://www.instagram.com/reel/Dfm_j9WILCw/
Footage: Tears of Steel (Blender Foundation), Creating Meshes (Dillon Gu / Blender Foundation), and a SuperTuxKart race recording (kimden STK). I edited the excerpts for the demo. Full source and license credits are on the live site. The instrumental score was generated with Gemini.
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?