Most video players make watching easy, but finding a particular scene, saving a moment you enjoyed, or exploring different parts of a film often means dragging a timeline and hoping you land at the right place

I built XENON to make that experience better

XENON is a custom Video.js v10 skin designed to make watching, exploring and remembering videos feel like one connected experience Instead of treating a video player as just a screen with playback buttons, I wanted to build something that feels like a small, interactive cinema.

The first thing that makes XENON different is its curved Navigation Wheel, rather than scrolling through a traditional list of videos or chapters, you turn a film-inspired wheel filled with actual movie and scene thumbnails > You can navigate it with your mouse, touch gestures or keyboard. Browsing doesn't interrupt what you're watching, the video only changes when you explicitly choose to play a film or jump to a section.

One problem I wanted to solve was losing your place while exploring, let's say you're watching a film and notice an interesting moment you want to revisit... With XENON's Time Tether, you can jump to another section and return to where you were with one action. > There's also a Time Lens that opens the timeline into a strip of real video stills, allowing you to examine different moments before choosing where to jump

> Then there's My Atlas, a personal collection of moments you've saved, you can bookmark a scene, give it a name, add a note, preview it and return to that exact point later. Your saved moments and viewing progress are stored locally in your browser, so there's no account required.

I also wanted the player itself to have some personality

XENON has a Precision Playback Pod, with a central Play/Pause button and dedicated 10-second rewind and forward controls, pausing reveals a small, movable Film Slate showing the film, current section, playback time and time remaining, rather than covering the screen with a large information panel.

Around the player is the Photon Frame, a thin optical border that responds to playback actions, saved moments and the film's colors. There's also a working Light meter that reads the video frames when the source allows it and shows approximate brightness and color temperature, instead of displaying decorative numbers.

The appearance is customizable too. XENON has its own Spectral Gradient system, with different color palettes, gradient strengths and background options. Viewers can use XENON's signature look, switch to movie-adaptive colors, choose a solid background or enable film artwork. None of these effects alter the actual video.

Underneath the design, XENON uses real Video.js v10 components and player state. Playback, seeking, volume, captions, picture-in-picture and Fullscreen aren't mock interactions. It also supports keyboard shortcuts, visible focus indicators, responsive layouts, reduced-motion preferences, high-contrast options, subtitle uploads, searchable transcripts and adjustable subtitle appearance.

The demo includes three open-licensed Blender films: Sintel, Tears of Steel and Big Buck Bunny Sintel also has a Mux-hosted playback source, with alternative video sources available

I built XENON with React, TypeScript, Vite, CSS and Video.js v10. The skin is reusable outside the demo, and there's a separate Skin Studio for experimenting with its appearance.

My goal wasn't to build a player with the most buttons, It was to make a video player that gives people more freedom to explore a story, while still getting out of the way when all they want to do is watch.

Try XENON: https://xenon-ruddy.vercel.app/#/

GitHub: https://github.com/Chima30/Xenon