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
Projector: a Video.js v10 skin built like a 35 mm film gate.
Most players hide the machine. Projector shows it. The picture sits between two strips of sprocket holes that jerk down while the film plays. The timeline is a strip of film cut into reels, one per chapter, with previous and next reel buttons. Play is a countdown leader, time is a frame timecode at 24 fps and speed is shown in fps. Pause too long and the frame burns in front of the lamp. Press T for cinema view: the film on a real cinema screen, with the controls as a console at the bottom.
The character lives in the frame; the controls sit on a solid plate, so they stay readable over any picture. Every control is a real Video.js component: keyboard, visible focus, 44 px touch targets, reduced motion, forced colours.
Film: A Trip to the Moon (Méliès, 1902), public domain, streamed from Mux.
Sprocket holes jerking down while it plays and a countdown leader for play, great film gate details.
Thanks!
Pausing too long so the frame burns in front of the lamp is a brilliant, honest detail — it's a consequence, not just a state. Pressing T for cinema view, with the film on a real cinema screen and the controls as a console below, is a lovely second stage for the same machine. If...
Thank you, glad the burn landed.
Mahlin has a real character: the eye as play button is the kind of idea you remember after closing the tab, and holding the eye to scrub is a lovely way to teach it. The gold on deep navy suits it, and the chapter dots on the track read clearly....
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
Cinematic custom Video.js 8 skin built on CDN + Mux HLS, 90% custom CSS.
✅ Custom Design: AI theme with cyan #00f5d4 glow, glassmorphism, CURATOR-ON toggle
✅ Controls: Play, volume, progress scrub, 1.0x speed, CC, fullscreen, bookmark
✅ Accessibility: Keyboard (Space, arrows, M, C, F), ARIA, focus states
✅ Playlist: Now Playing SYNTHSCAPES / Up Next Neural Dreams
✅ Innovation: CURATOR metadata overlay, adaptive HLS streaming
Instructions: Open link > Go to App Preview tab > Play
The cyan glow and curator toggle are a fun touch. Nice work.
Meet MUXSCAPE, my entry for the Video.js Skins Design Challenge.
I wanted to explore a different approach to video playback, something that feels more like a cinematic experience than a traditional video player.
Built on the Video.js v10 Scaffold skin, MUXSCAPE features adaptive ambient lighting inspired by movie posters, floating frosted glass controls, contextual menus, and a responsive layout.
It supports both YouTube trailers and Mux hosted movies, with accessibility and performance being an important part of the experience.
This was a fun opportunity to experiment with spatial UI, glassmorphism, and cinematic interactions while pushing the possibilities of Video.js.
Hope you enjoy exploring it!
MUXSCAPE has a nice cinematic feel. Good luck Shantanu!
My eyes were exhausted of modern video players: flat, sterile glass, cluttered with digital gimmicks and translucent bars. I didn’t want another web widget. I wanted weight, friction, and genuine tactile pleasure.
So I built a machine.
Designed to feel as if it weighed ten kilograms of solid walnut and milled graphite on your desk, this skin transforms Video.js 10 into a physical, skeuomorphic Director’s Console inspired by 1970s Steenbeck and KEM film-editing decks. It was engineered specifically to play "Cold Blood, Warm Glass", a 10-act speculative neo-noir series.
Key features:
• Ten independent sunken chalk keys with 7% physical mechanical stroke and latching states.
• Procedural acoustic feedback (Web Audio API) delivering walnut wood resonance and micro-switch clicks.
• A free-spinning 360° spring-loaded shuttle lever for rotational scrubbing with automatic elastic return.
• A gold-phosphor preview monitor that only reveals timecode when scrubbing, preserving pure cinema on the main screen.
• Analog volume buttons driving a 7-stage amber LED VU meter.
• Full responsive cinematic cover zoom for mobile landscape viewing.
A physical instrument for cinema. Once your fingers touch this console, the rest of the web feels flat.
Directed & Designed by Vanesa Martínez.
Built on Video.js 10, React 19, Tailwind CSS v4, Web Audio API, and Mux HLS Streaming.
Weight and friction instead of flat glass, I feel this. Great machine.