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
Ashlode is an architectural Video.js v10 skin and studio showcase designed as a tactile Japanese ceramic monograph.
Instead of building a generic tech player, I reimagined the UI as a contextual storytelling tool for a wood-fired pottery studio.
The core innovation is the interactive timeline, reimagined as a "pyrometer ruler" that dynamically syncs the 1,300°C firing log telemetry with exact Mux video timestamps.
Designed with a rigorous 4-column layout and fully accessible keyboard navigation, the interface uses a bespoke Smoked Kiln Oak and Fired Terracotta palette to merge high-performance product design with Japanese-inspired art direction.
A pyrometer ruler synced to a 1,300°C firing log as the timeline, what a specific idea. Beautiful.
thank you
Reimagining the UI as a contextual storytelling tool for a wood-fired pottery studio, rather than a generic tech player, is a strong choice — the Smoked Kiln Oak and Fired Terracotta palette makes the player feel like part of the studio. The rigorous 4-column layout keeping it...
A pyrometer synced to the firing log as the timeline is such a specific idea, it makes the video feel like part of the kiln itself. I went the ceramic route too (kintsugi) and found that the hardest part was keeping the clay texture from fighting the controls. How did you keep it readable over darker footage?
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
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.
Tactile — Paper Key: a Video.js v10 skin you can press.
Tactile treats the player as a desk object, not a screen overlay. Before drawing any UI, we modelled a small keypad in Blender: paper-white keys with an ink rim, a ribbed fader cap and a black status display. We pressed it, lit it, and flattened it piece by piece into CSS. Keys latch (1 px down, with a 2 px accent rim), faders scrub, and one display pill always says what the player is doing: PLAY 1.0×, PAUSED, LOADING or END. Play is the only orange key and everything else stays matte, so the dock reads the same over bright snow and a night street. Three glazes and one accent token let it fit someone else's site.
Keyboard-first with a visible ink focus ring, 44 px targets, Esc closes every menu, forced colors and reduced motion supported. Source (Apache 2.0): github.com/promoparkllc/tactile-paper-key
