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
Check out my animation made with Jitter
Crypto wallet onboarding flow animation
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
svg animation exploration for Sarvam
I designed a custom Video.js skin to improve the video playback experience through a modern, clean, and intuitive interface. The design focuses on usability, visual consistency, and accessible playback controls, while maintaining the flexibility of Video.js.
My goal was to create a player interface that feels polished, responsive, and suitable for modern web applications.
The simple 'Drop in and play' start makes AFTERFRAME feel welcoming. Nice work keeping that first step so clear.
Dabble: your video player is a canvas. Paint the frame, then press play. Try it 😊
Most player skins are finished before anyone presses play. Dabble hands you the brush. The video sits on a white stretched canvas, and every viewer can paint the frame around it in their own style, or leave it blank for a cleaner look. The paint stays around the video, never on it, and steps aside completely in fullscreen, so the film always comes first.
The controls look like ink on a paper label, so they stay readable over any footage and any paint. Every icon, button, brush and paint blob was drawn for Dabble. No icon library. The four brushes take their movement from four ways of painting: Impressionist dabs, Cubist facets, drip splashes and ribbon sweeps. One button pulls a new palette from whatever scene is playing, so the paints change with the film.
And it turned out to be calming, like doodling in the margins while the film plays on.
The demo film, Dab, is original: a blank little canvas character who rolls through four colors and stays blank, until the viewer gets the brush.
For site owners: set the starting painting in your brand colors, or paint it in your colors and turn painting off.
Built on Video.js v10 from the standard components. Keyboard first, with a two-tone focus ring and 44px touch targets. Captions sit on their own label. Reduced motion, reduced transparency and forced colors are all supported, and control text measures 16.93:1. The skin starts silent by default; the demo turns on soft brush sounds while you paint.
Links:
• Demo: https://dabblevideo.com
• Live on a real site: https://milenawebb.com/#dabble
• Code (Apache 2.0): https://github.com/milenawebb/dabble-skin
• Mux playback ID: AAprZsIykh7T29gtsNk02YhBrQRHXTj14ZxbWdc498wA
The four brushes taking their movement from four ways of painting — Impressionist dabs, Cubist facets, drip splashes and ribbon sweeps — is the detail that makes Dabble a painter's tool, not just a gimmick. And the button pulling a new palette from whatever scene is playing...