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
Run is a Video.js 10 skin for AI tools and the sites that sell them. A demo video of an AI product already shows a run, so Run plays it as one.
The film's chapters become the plan, each step ticking from waiting to running to done. The captions become the log, typed into the bar a word at a time. Press Run and the prompt's words turn into a small network whose outputs reach the plan. The track is drawn from the captions' words, and they rise under your pointer.
I wanted the AI to live in how the player behaves, so it has no glow and no chat box. The Reasoning key shows the player's own decisions, measured as it plays: which source it opened and why, the picture it chose, every wait. Nothing pretends a model is running. The look is ink and brass, with a mono for the log and a serif for the outcomes, so it sits calmly on a product page.
It's my second entry, after Flipbook, a player for film.
The Reasoning key is a brilliant idea — a player that shows its own decisions, which source it opened and why, turns the AI from a decoration into something you can actually follow. And the chapters becoming a plan, each step ticking from waiting to running to done, makes a...
Chapters ticking from waiting to running to done, perfect for AI product demos. Smart concept.
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-CAM: the on-set monitor skin
I direct films with AI as a camera, not a generator, so I designed A-CAM as the monitor in video village: the screen you watch a take on while it rolls.
Everything comes from a cinema camera's monitor. The REC light moves from STBY to REC, HOLD and CUT as you play and pause. The timecode is frame-accurate SMPTE, and tapping it shows the time remaining.
The seek bar is marked like film edge code and has a playhead flag, and the volume control is an LED meter. A slate opens the film and "That's a wrap" closes it, and the take number goes up each time you replay.
The monitor menu has working tools: 2.39, 1.85, 4:5 and 9:16 frame lines, plus Log, Mono and ARRI-style false-color views.
Accessibility was part of the design from the start. Solid status bars keep text readable over any footage, the amber focus ring has a black halo, touch targets are 44 px, and the layout adapts to the player's own width.
Every control works from the keyboard, and G and V switch frame lines and views. With reduced motion turned on, nothing blinks, slides or claps.
Built from scratch on Video.js v10 (@videojs/html 10.3) UI components, with my own markup, CSS and icons, plus one small custom element for the monitor behavior.
The film playing is PARIS, my own AI film, hosted on Mux.
A-CAM as the monitor in video village is a great angle. Very authentic to set life.
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?
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?
Well done.