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
AFTERGLOW — A Cinematic Video.js v10 Skin
I designed AFTERGLOW. It is a premium cinematic player skin designed to make video playback feel immersive and elegant. Featuring a deep-black interface, electric violet accents, atmospheric gradients, and refined glass-inspired styling, it brings a distinctive streaming-platform aesthetic to Video.js.
The responsive design supports desktop and mobile layouts, with keyboard focus visibility, reduced-motion support, and caption integration. It retains Video.js playback functionality while introducing a unique visual identity. Through creativity and production,😍 a video was made.
Design philosophy: Stay for the feeling.
Deep black with electric violet, very cinematic. Nice work.
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
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.
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!
Nice cinematic direction for MUXSCAPE.