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
I took part on Video.js Skins Design Challenge on
Introducing Frame
- An editorial skin for Video.js 10, and the small publication that presents it.
- FRAME treats the player like a page in a well-made journal: the picture comes first and the controls stay quiet until you need them. Inside the picture everything is white on ink; the page's one accent color is kept for its buttons.
GitHub Link - https://github.com/olivebishop/frame
Live Link - https://frame-one-psi.vercel.app
Really like the editorial feel.
thank you 🙌
So is it starting or can we submit now ?
A skin plus a small publication that presents it, great way to frame it. Very well-made journal feel.
sure thanks
Treating the player like a page in a well-made journal, picture first and controls staying quiet, is such a refined take. Building a small publication around it to present the skin is a lovely idea too. Would really value your eye on Slate 🎬
thanks
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
Some details from my latest redesigns project
🔗 codex.io
The dark screens look sharp, and the product data stays easy to read. The redesign feels focused on the people using it, not just on a new look.
Here’s a little piece from my current project. As I watch the Swiss design concept become a part of my creative DNA, I find myself constantly gravitating towards this direction in web design.
What’s really interesting is that Volume 3 studio and I are experimenting here, mixing things that seem completely unmixable at first glance.
Since Volume 3 is a CGI and VFX studio, it was crucial to incorporate a 3D dimension into their brand communication. On top of that, a Terminal UI is exactly what keeps that technical vibe going.
So, the final mix is International (Swiss) style, a Terminal UI, and a 3D feel brought to life by neumorphism. Crazy, right???
It looks simple and clean, but behind the scenes, there’s a massive amount of work on the details. We focused on all those little things that push the UX/UI into the premium segment — the things you don't necessarily see right away, but you definitely feel when you're on the page.
The work is still ongoing, so I can't dive into reflecting on the whole process just yet, but I'm gonna keep revealing small parts here.
Swiss grids on the web never get old when they're this clean. What are you and Volume 3 mixing it with?
Hey there!
Farbspur is my entry for the Video.js Skins Design Challenge: a custom skin for the Video.js v10 player that gets out of the way of what you’re watching.
The player has no colour of its own. Its seek bar is built from the video: it finds the strongest picture changes and turns them into blocks of colour, so every film gets its own player and you can jump straight to a scene.
→ Glass appears only where your hand is: a single drop moving on spring physics
→ Skips count up as you press: +5s, +10s, +15s
→ Quality, speed, casting and theatre mode share one visual language
→ Full keyboard control, and reduced motion for anyone who asks for it
The film and sound in the video were generated for this project.
Live demo: https://farbspur.pages.dev
Code (open source): https://github.com/moonz35345/farbspur
A player with no colour of its own, letting the film lead. Great idea.