Tint: A Video.js Skin with Film-Responsive Scene-Aware UI

Tint: A Video.js Skin with Film-Responsive Scene-Aware UITint: A Video.js Skin with Film-Responsive Scene-Aware UI

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

Alex Ayo

• 8h

Tint: a Video.js skin that takes its colors from the film playing. The poster shows the film's color fingerprint, the timeline is a slice of every frame, and the scene you're watching tints the controls. Built with jelly physics, custom subtitles, and scene-aware UI. Open source.

videojsskinschallenge

Jamie Eflong

• 6h

So jelly, love it

Alex Ayo

• 6h

Thank youuu

Jay Ayo

• 6h

Top tier motion and animation

Alex Ayo

• 6h

All love, thank you

Lami Dayo

• 6h

Loveee it

Alex Ayo

• 6h

Love it too, Thank you

Denis Turbin

pro

• 2h

A color fingerprint on the poster and a timeline made from every frame, beautiful idea. Jelly physics too, nice.

Alex Ayo

• 1h

Thank you Denis

Nosta Log

• 2h

The timeline is a slice of every frame" is a beautiful idea. The seek bar becomes a colour map of the film, so you can see the night scene before you get there. How did you keep the controls readable when a scene tints them very light?

Alex Ayo

• 1h

Thanks Nosta! The accent color gets adjusted bright scenes are pulled darker, dark ones lifted, and grays gain some saturation. Text also has a subtle shadow. Works across most films without manual tweaking.

Mustakim Siam

• Nov 12

Luminary - A Video.JS skin 34 - Skin Styles/ Themes Let me know your favorite one. Thank you!

videojsskinschallenge

Denis Turbin

pro

• 1d

34 styles is wild. Hard to pick a favorite, impressive range.

Abdul Kalam

• Nov 12

A dark, glassmorphic Video.js v10 skin. The control bar is a frosted-glass strip that floats over the footage, so it stays legible over both bright and dark video. A violet-to-magenta gradient fills the progress bar and the scrubber glows, giving the seek line a "live" feel. The big play button is a deep violet circle. All five essential controls are present and keyboard-reachable with visible focus outlines, and the bar reflows cleanly from desktop down to a phone-width player. The video is hosted on Mux.🙌

videojsskinschallenge

Saif Modan

• Nov 11

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.

videojsskinschallenge