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
Ascent, a Mission Control skin for Video.js 10
There's something special about watching a launch. A whole room goes quiet and everyone watches one big screen. We wanted watching any film to feel a little like that.
The bar along the bottom is a flight path, and we marked the big moments of the film along it, like moments in a mission. You press Launch to start, and a small bright light travels along the path as the film plays. Volume and speed are two engine dials that glow brighter as you turn them up, and when the credits roll the craft goes into orbit.
We also made sure it never gets in the way. The film matters more than the controls. A few seconds after you stop touching it, the controls slide away and you just see the film. It works with a keyboard, on a phone, and for people who prefer less motion.
Please turn the sound up and give it a try: https://ascent-skin.vercel.app
The code is free for anyone to use: https://github.com/Boreallabstudio/ascent
The film is Charge by Blender Studio, shared under CC BY 4.0.
We would love to hear what you think.
#videojsskinschallenge
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
Kerf is a Video.js 10 skin built on one idea: cut the picture instead of covering it.
Most players float their controls over the video, then fight the footage for contrast with gradients and blur. Kerf cuts a notch into the player’s own frame and puts the controls there, on a solid surface in your product’s colour. They read the same over a white sky or a black night. Previews, menus and volume rise out of that frame from the control that opened them, and sink back when the film plays.
It’s built for modern SaaS and minimal products: one accent and one radius to set, plus light, dark or auto surfaces. It folds the controls away before the first play, and adds chapters, storyboard previews and captions as a notch. Every control works by keyboard, focus rings are visible, it honours reduced motion and forced colours, and it supports right-to-left layouts. axe-core reports 0 violations.
Plain HTML and CSS on @videojs/html with the official icons. Open source under Apache 2.0.
Love how the controls sit in the frame.
Luminary — Multi-Style Video.js Skin
(**Please respect the original work and do not copy this multi-theme skin concept.**)
An elegant, constraint-free UI built to elevate any production.
**13 expertly crafted styles to suit your taste
**Fully responsive across all screen sizes
**Ready to use right out of the box
**When designing the core frame, my goal was to create a versatile, eye-catching player that fits any project seamlessly. Across all 13 variations, I focused on blending popular, in-demand aesthetics with timeless themes so every creator can find their ideal match.**
Let me know which style is your favorite in the comments. Thank you!
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
