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
Violet Glass treats the controls as objects floating over the film: frosted violet glass, soft rim light, custom icons and a neon magenta timeline. On desktop, the full-width timeline sits above a centered play bar. On tablets and phones, the three main controls become large glass orbs over the picture for easy thumb reach, with a slim dock below and a compact settings menu. Settings covers speed, quality, subtitle language, loop and picture-in-picture. Every control works by keyboard with visible focus, tap targets are about 44px, the glass stays readable over bright footage, and motion calms down with reduced-motion settings. On Android, fullscreen rotates to landscape. The first film is an original reel made for the skin, hosted on Mux, with subtitles in English, Azerbaijani and Japanese.
Glass orbs for thumbs on mobile is a smart switch. Violet glass looks great.
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.🙌
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?
Halo is a matte glass player: frosted, lightly grained panes that float over the film and are shaped only by light, so the controls feel like part of one object and not stickers on a video. The panes blur the footage behind them, which keeps the controls readable on bright and dark scenes with no gradient over the picture. Light falls from the top left: raised controls catch it, hovering lifts and brightens one, and pressing sinks it into the glass, where a switched-on control stays. Charcoal is the only accent, used for icons, text and progress, and its icons keep at least 4.5:1 against the glass even over black frames. Focus is a solid charcoal ring, every control has a 42px or larger target, reduced-motion users get no transitions, and a higher-contrast or reduced-transparency preference turns the glass solid, with higher contrast also adding a real outline to every control.