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
I built NEBULA — Where Art Meets Motion, an original cinematic skin for Video.js 10.3.0, combining my artistic vision with a fully functional video player.
The idea began with my fascination with the colors and beauty of nebulae. Inspired by their cosmic atmosphere and vibrant hues, I first created the original visual concept in Adobe Photoshop, developing its color palette, mood, and artistic identity. I then brought that concept to life as a functional video player using HTML, CSS, and JavaScript.
I wanted to transform the traditional video player into something more immersive — an experience where technology meets art. The design features deep violet, midnight black, neon cyan, and magenta, complemented by custom controls and atmospheric visual details.
NEBULA includes responsive desktop and mobile layouts, video playback, seeking, volume and speed controls, and fullscreen functionality.
My goal was to show that a video player can be more than a technical tool. It can have personality, atmosphere, and its own artistic identity.
Not bad for someone who doesn't have much coding experience, right? 😂
I started with a Photoshop concept inspired by the colors of nebulae, and somehow ended up building a functional Video.js player!
Meet NEBULA. Sometimes curiosity and stubbornness make a pretty good development...
Starting from a Photoshop concept of nebula colors and turning it into a working player, nice process. Good luck Ani!
Thank you, Denis! 💜 It was quite an adventure, especially the coding part! 😄 I'm happy I managed to bring my original Photoshop concept to life. Really appreciate your kind words!
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
Screening Room is an editorial-style skin for Video.js v10, designed for film reels and creative portfolios.
Cream surfaces, burgundy accents and serif typography give the player the feel of an independent cinema programme. The controls sit beneath the footage on a solid background, keeping them readable throughout the video.
The interface includes playback, seeking, time, volume, mute and fullscreen controls, with a chapter selector for navigating longer videos.
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.