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
NOIR PLAYER — A Cinematic Video Experience
Every frame deserves attention.
NOIR PLAYER is a cinematic video player concept built with Video.js v10, designed to make watching feel immersive, elegant, and effortless.
The visual direction combines deep graphite backgrounds, warm copper accents, restrained typography, and an editorial layout inspired by the atmosphere of cinema.
The goal was to create a distinctive viewing experience without overwhelming the content. The interface emphasizes familiar playback controls, responsive presentation, and visual clarity.
Rather than competing with the video, NOIR PLAYER creates a refined environment around it.
Design philosophy: Less interface. More immersion.
Technology: Video.js v10, HTML, and CSS.
Live demo: https://noirplayerv10corrigido.vercel.app
Looking beautiful 😍
noir player has such a calm, elegant mood, the cinematic styling really lets every frame breathe 🎬
Graphite with warm copper accents, elegant combo.
The editorial layout inspired by the atmosphere of cinema is what I love most — NOIR PLAYER doesn't compete with the video, it builds a refined environment around it, so the frame itself gets the attention. And keeping familiar playback controls on purpose is a smart call: 'less...
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
I turned a DJ deck into a video player. Every control does a real player job: the jog wheel scrubs, the tempo fader sets playback speed, eight hot-cue pads jump between chapters and light the current one, and the waveform strip is the seek bar, built from the film's real audio peaks.
The deck sits below the video, never on it, and anyone finds play, volume and fullscreen in a second.
I built it on Video.js v10 in plain CSS and 4 KB of TypeScript, with no images or web fonts. It's keyboard-operable, respects reduced motion, contrast and forced colors, and re-brands through a few tokens.
The look is my own Baltic palette: deep green deck, cream labels and amber LED glow.
Try it: https://videojs-cdj-skin.vercel.app, also live on my site: https://modestasgrz.github.io
Film: Tears of Steel © Blender Foundation, CC BY 3.0, streamed from Mux (playback ID lNg95EGnssc00hkLLQSCG02an2R3Ss702005HBDpEXYPBZk).
Hot-cue pads for chapters and a real audio waveform, every control earns its place.
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.
BETWEEN TWO WORLDS — A Cinematic Video.js Experience
Between Two Worlds is a cinematic video player experience built with Video.js v10, designed to transform video playback into an immersive visual journey.
Inspired by the mystery of crossing between two worlds, the project combines a deep purple and gold aesthetic, elegant typography, atmospheric animation, and a customized Video.js interface.
Rather than presenting a conventional video player, I wanted to create an experience where the visual identity begins before playback and continues through the player controls.
Key features:
Customized Video.js controls with purple and gold styling.
A cinematic animated introduction with smooth transitions.
A coordinated video poster and visual identity.
Responsive styling and familiar playback functionality.
A live, interactive experience accessible directly in the browser.
The goal was to demonstrate how thoughtful visual design can make a video player feel like an integral part of a story, rather than simply a tool for watching it.
Starting the visual identity before playback even begins, with a cinematic animated introduction, is what sells the whole idea — the player doesn't just decorate the film, it opens the story. And carrying that same purple-and-gold identity through the controls keeps the two...