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
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
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
Something's loading for the #videojsskinschallenge ⏳
We've been rethinking how you move through a video, not just how the controls look.
Live on our site already. Link drops with the reveal 👀
#VideoJS #Mux
That sleek UI and minimal aesthetic look 🔥 Excited to see how the new Video.js v10 experience turns out. Great work, CodeVibe!
Who wants to come to a picnic with an outdoor movie? I'll bring the video player 🧺🎬
Picnic Cinema is my new Video.js skin: a 3D garden cinema where the controls hang as tags from festoon bulbs. The lights glow when you pause and dim when the film starts.
Too comfy to reach the bulbs? Grab the remote on the picnic table.
You can still use the keyboard like a normal player: Space to play, arrows to seek and change the volume, F for fullscreen.
this is such a fun concept!
Storytime, the Pop-Up Edition: a picture book you can play
My first entry dressed the player as a picture book. This one makes the book do the work, so every part of the metaphor is a real control or real player state.
Chapters are pages. Each chapter becomes a numbered tab on the crayon trail, the scrub preview names the page you are pointing at, and the folded corner of the picture is a button: tap it to turn to the next page (N and P on a keyboard). No chapters in your video? No tabs and no corner.
The star is the player's state. She walks the trail while the story plays, walks faster or slower with the reading speed, and falls asleep when you pause. Reading speed itself is a snail, a pair of footsteps or a rabbit. In bedtime mode the paper turns midnight blue, the picture dims and the star becomes a moon. The last page is "The End".
The book folds to fit. On small players the two-row strip closes into a one-row bookmark that still carries play, time, the trail, mute and fullscreen, and takes about 30% of the picture instead of 45%. Speed, captions and bedtime tuck into a pop-up page that closes with Esc.
It works on any video (try the "Any plain video" switch on the demo), recolours with --media-accent-color, and keeps every control at 44px or more with visible two-tone focus rings, captions lifted above the controls, and a calm mode under reduced motion.
The demo film, The Little Star Walks Home, is my own paper-cut animation that runs from bright day to dark night to test contrast. It streams from Mux, and the same player is live on my own site. Plain HTML and CSS on Video.js v10 components, no build step.
Making every part of the book a real control is a clever approach. Good luck with the entry!