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
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
Unpopular opinion: most video players are designed to disappear, and that's why they all look the same. I went the other way and made every control something you'd want to press. Should a player be invisible, or should it have a personality? Curious where you land.
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
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
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?
A little experiment with color, light, and data. ✨
Exploring how vibrant blue gradients, subtle glow effects, and delicate typography can bring a fresh personality to a health-tracking interface.
The goal was to create something that feels futuristic yet calm, where every visual detail makes the experience more engaging.
What do you think of this visual direction?
💟 🐐