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
low key I still mix variants with components, and sometimes I keep naming my layers the same way or just forget about actually give them a name, so probably you will see my files with frame 123, frame 567 and so on.
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
Added a new free component to the Framer Marketplace! ✨
Scroll Card, it's a simple way to present your visuals and the story behind them in one interactive layout.
Use it for portfolios, case studies, project showcases, photography, products, or pretty much anything you want to put in the spotlight.
Add your own images or videos, change the text, customize the styling, and make it fit your website. No need to build the whole thing from scratch.
Copy it, customize it in edit panel, and make it yours!
link to use: https://framer.link/0lbzAy0
Here’s my Video.js skin submission: KON — a pocket-sized edit deck for Video.js v10.
What if watching a film felt less like using a video player and more like operating a beautifully crafted piece of hardware?
That’s the idea behind KON.
Turn the jog dial to scrub through a film. Find moments using a filmstrip built from the video’s own frames. Drag the coloured latches to rearrange your controls. Every interaction is designed to feel tactile, intentional, and satisfying.
But KON isn’t just about how it feels. Its layout adapts to the player: controls sit alongside the picture when there’s room, re-dock beneath it in portrait layouts, and collapse into a compact overlay in smaller players. Choose between Off-white and Graphite editions, each carrying the same carefully considered material details across light and dark environments.
And beneath the hardware-inspired design is a fully functional, accessible player skin: keyboard alternatives for tactile interactions, visible focus states, screen-reader announcements, and reduced-motion support.
Built on Video.js v10, KON is a working, reusable skin — not just a visual concept.
One of the most enjoyable parts of this project was bringing the whole concept to life — generating the visual design, creating the video, and seeing all those little details come together into something that feels like a real piece of hardware.
Give it a try: Play the film. Turn the dial. Rearrange the controls. Then resize the player and watch the whole interface adapt.
Explore the full experience:
https://lab.behzad.me/kon-videojs-skin/workbench/
Atelier Reference Deck for Video.js v10 — a broadcast reference monitor skin inspired by hardware mastering decks. Paired a machined 16px bezel with frosted obsidian glass docks (88% opacity, 18px blur) and Signal Amber (#F59E0B) tally/playhead telemetry so timecodes, storyboard previews, and captions stay AAA-readable over bright and dark calibration footage. Supports @container mobile layouts, RTL, 50+ locales, and reduced-motion / high-contrast / forced-colors.
