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
NeonPlayer — Cyberpunk Tactical Cyberdeck Skin for Video.js v10
Built with @videojs/react (Video.js v10), React, and TypeScript for #videojsskinschallenge.
Instead of a plain dark control bar, NeonPlayer transforms the player into a futuristic cyberdeck with:
- 3 live HUD color themes (NETRUNNER, OVERDRIVE, MATRIX) + toggleable CRT scanlines
- Segmented laser chapter timeline with hover preview & quick-jump sector pills
- Synchronized Neural Log (searchable, click-to-seek transcript with live cue progress) & Tactical Intel notes
- 12-bar reactive audio spectrum, orbital play core, Theater Mode (T), full keyboard shortcuts, and mobile-responsive layout
Live Demo: https://neonplayer-videojs-skin.netlify.app
The cyberdeck framing works really well, especially the three live HUD themes and the segmented laser chapter timeline with sector pills. Toggleable scanlines is a nice touch for people who want the vibe without the noise. Curious what you'd make of Slate 🎬
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
🎬 Neon Aurora — A Next-Generation Video.js Skin
A modern, immersive video player skin designed to make watching content feel more engaging and premium.
✨ Key features:
• Futuristic glassmorphism interface
• Neon interactive controls
• Custom playback and progress bar
• Quality selection menu
• Volume and playback-speed controls
• Captions and fullscreen support
• Responsive, clean and user-friendly layout
The goal was to combine beautiful visual design with simple, intuitive controls while keeping the Video.js experience smooth and accessible.
#VideoJS #UIDesign #WebDesign #ProductDesign #VideoPlayer #Contra:
Luminary - A Video.JS skin
34 - Skin Styles/ Themes
Let me know your favorite one.
Thank you!
34 styles is wild. Hard to pick a favorite, impressive range.
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.