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
Atelier update: let viewers pick the mood
Settings → Theme now opens a palette of 11 glass tints: Atelier, Onyx, Sage, Navy, Dune, Plum, Frost, Merlot, Blush, Ember and Lagoon.
One tap changes the glass, the progress colour and the play orb together, so the whole player shifts mood without touching the layout. The choice is remembered for next time.
Each theme keeps the same contrast rules, so icons and time stay readable over bright and dark footage.
Built on Video.js v10 for the Video.js skin challenge.
Live demo: https://aaegraphic.com/atelier/
11 glass tints that remember your choice, nice update. Merlot sounds good.
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
Mux's Creative Director, Rob, had been keeping AI at arm’s length. All he could picture was Will Smith eating spaghetti. Surely it couldn’t be useful in the world of design.
Then he used Claude Code to design and ship a custom skin for Video.js v10. Learn how he went from skeptical to building a live player, with Figma and his design instincts at the center — plus, what he learned along the way.
Give it a read: https://www.mux.com/blog/how-a-designer-learned-to-unsee-will-smith-eating-spaghetti
Cutframe update — same skin, broader adaptation.
I’ve updated Cutframe’s page-adaptation algorithm after testing it on more complex visual backgrounds.
The original adapter derived its palette from DOM and CSS styles. Canvas and WebGL introduced another challenge: the colors visitors actually see aren’t necessarily reflected in those styles.
Cutframe now samples five regions of readable background canvases and clusters their colors to derive a coordinated surface and accent palette, with contrast checks for text and controls. The same approach handles solid colors, multicolor artwork, and animated 3D scenes.
Low-frequency sampling and stability checks help reduce flicker. New palettes transition smoothly from the currently displayed colors, with the color animation stopping once the transition finishes. Developers can inspect the sampled regions, adjust the behavior, or override colors when needed. Unreadable sources use a safe fallback.
The cut-corner frame, controls, and time-lens interaction remain the same. These screenshots show the same skin and video frame across different WebGL backgrounds—the update is to how the player adapts to its surroundings.
I’m open to collaborations in creative web development, interactive experiences, and digital art. Feel free to DM me if you have a project in mind.
sampling the canvas instead of trusting the css makes way more sense for webgl pages