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
Aurora Skin — The picture ends. The atmosphere doesn't. ✨
Aurora Skin is a cinematic video player interface designed for Video.js v10, inspired by the northern lights and the idea that a great viewing experience extends beyond the video frame.
Instead of treating the player as a collection of controls, I wanted to make the entire viewing experience feel alive.
The design combines translucent glass controls, atmospheric cyan and violet lighting, refined typography, and a distraction-free layout. Its Living Aurora system lets viewers customize the ambient lighting through three modes: Subtle, Balanced, and Vivid.
Every detail is designed to balance personality with usability, from responsive controls and keyboard navigation to accessible interactions and reduced-motion support.
My goal was simple: create a player that feels as memorable as the content it plays.
Built with Video.js v10.
#videojsskinschallenge
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
Aura — a Video.js 10 skin where the player takes its colour from the video itself in real time. An ambient accent and soft glow are sampled live from the frame, so the chrome feels alive and part of the film. A glass control bar and a cinema mode keep all focus on the film. Built for anyone who wants a video player that feels part of the film, not a frame around it.
MARGEM — Beyond the Frame
What if a video player could become a space for exploration rather than just a timeline?
MARGEM is an experimental Video.js v10 skin that reimagines video navigation through spatial interaction, editorial design, and motion.
At its center is an animated tesseract inspired by four-dimensional geometry, accompanied by a 3D chapter atlas and interactive notes.
The concept explores a balance between visual experimentation and practical usability, keeping the video itself at the center of the experience.
Created by Athos Figueiredo, a Brazilian creative director and digital experience designer with 21 years of experience across design, branding, and interactive media.
Built with AI-assisted development and a focus on original interaction design.
Live demo: https://figueira-margem.netlify.app/
#videojsskinschallenge #VideoJS #Mux #CreativeCoding #InteractionDesign #WebDesign
I Designed a custom skin for the Video.js v10 player.
In Video.js v10, a skin is the player’s interface: the UI components plus the styles that present them. Video.js is open source and community-driven, and the player can end up on almost any website, so every skin makes a choice: how much personality it has, how well it fits into someone else’s design, and how far it pushes the controls. This was all incorporated into the design from scratch. The built-in v10 skins show this range. Creativity and mastery are incorporated to produce something nice and pleasant.
videojs.org
Video.js | Open Source Video Player
The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
Please make sure you've shared a public link for us to view your project!