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
Waddle: a kid-proof video player for Video.js v10
I have three kids, and it's called a player, so I figured they should get to play a little. Kids' videos usually get a grown-up player with a new coat of paint. Waddle redesigns the controls themselves for kids 3 to 8.
Pick an egg and it hatches your guide: a penguin, a baby dinosaur or a sea turtle. That animal becomes the seek bar. It travels along its path as the video plays, reacts to everything you do, from pausing to muting to full screen, and belly-slides when you grab it. Kids can't read "1:05 / 2:30," so time is counted in snacks ("3 more fish!"), with the real time in small type for grown-ups. Finish a video and you earn a star for that animal.
The buttons are big and squishy, volume is a set of stairs, and speed and captions hide behind a press-and-hold grown-up corner so little fingers can't change them. Each animal is a theme pack on one shared player: same controls, new costume.
Everything works with a keyboard, focus is always visible, Escape closes the grown-up menu, and the animations calm down when reduced motion is on.
My kids were the testers. They loved it, and they found the hidden egg before I could show them. Hint: your guide doesn't like being poked. Try it five times.
Live: https://waddle-sepia.vercel.app
On my site: https://gavinblackman.vercel.app/waddle/
Mux playback ID: t02pEeTOixzExmXO003Z1yqfVyZtdrWCnVVEBjzUjMHXs
Film: "Caminandes 3: Llamigos" © Blender Foundation, Creative Commons Attribution license.
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
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.
Meniscus is a liquid glass skin for Video.js v10. A meniscus is the curved surface of a liquid, and the whole player is designed as one.
The ripple. When you press play, one soft ripple runs through the video picture itself.
The glass. The controls are frosted glass tiles. They pick up colour from the film, so the player changes with every scene.
The drops. Back 10 s, Play and Forward 10 s are three glass drops joined by liquid. The playhead is a drop too, and it squashes as you drag it.
The sound. Each control makes a soft glass sound, created in the browser. It follows the player’s volume, goes quiet on mute, and can be turned off in Settings.
For everyone. Every button works with the keyboard and shows a clear focus ring. On a phone, the controls move into two rows and the menus use the whole screen. If your device asks for reduced motion or reduced transparency, the ripple stops and the glass becomes solid.
The film streams from Mux in every size from 360p to 4K. The demo clip and its music are only there to show the player. They are not part of the skin and are not covered by its licence.
Studio Cut: a Video.js v10 skin that turns the player into an edit bay
Studio Cut borrows the language of a non-linear editor. I work on video tooling, and the part of an editor I trust most is the timeline, so I asked what a player would look like if it treated every viewer like an editor.
The seek bar is a timeline, not a progress line. It has a time ruler across the top, chapters cut into separate clips, a waveform texture, and a playhead needle with a cap you can grab. Hover it and you get the frame plus the name of the clip you are over.
The top HUD is a slate. On the left, a record-style status dot, the clip name as a filename, and a frame-rate badge. On the right, frame-accurate timecode in monospace (00:01:02:12), ticking every frame while it plays.
The controls are tactile transport keys on frosted dark-glass plates, with a single orange accent for play, progress and focus. The plates keep every label readable over bright snow or dark forest alike.
It is built to be used, not just looked at:
• Keyboard: every control is reachable in visual order with a visible orange focus ring, plus editor-style shortcuts (J and L to nudge, K or Space to play, M to mute, F for fullscreen).
• Responsive: from 240px to full width the bar stays on one row. Narrow players get smaller keys and a slimmer timeline, and drop secondary controls before anything overlaps.
• Touch: keys keep a 44px-tall tap area even when they draw smaller.
• Reduced motion: the status pulse stops and the timecode calms down.
• 50+ languages and right-to-left layouts through the built-in Video.js translations.
Built with Video.js v10 (React), Tailwind and Claude Code.
