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
WILDER — Nature in Motion
WILDER is an immersive, nature-inspired video player skin built for Video.js v10.
I wanted to move beyond the traditional video player experience and create something that feels like entering a living forest. Inspired by wildlife, birds, trees, waterfalls and natural landscapes, WILDER transforms the viewing interface into an interactive nature environment.
The design combines a richly illustrated forest world, custom nature-inspired controls, immersive visuals and smooth interactions while maintaining the essential functionality of a modern video player.
My focus was to bring together creativity, usability and accessibility in a unique viewing experience.
Built with: Video.js v10, HTML, CSS, JavaScript and custom interactive UI elements.
Entering a living forest instead of watching a video, nice mood.
Thanks,
You can also suggest me more changes.
Thank you
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
Voyage — every video is a voyage 🗺️🦅
A custom skin for the Video.js v10 player, designed as a hand-painted antique sea map.
The idea
Watching a video is a journey, so I turned the player into one. The progress bar is a sea route, and the playhead is a falcon that flaps its wings while the video plays and glides when it's paused. The chapters are six islands along the route: they stay faded until the falcon reaches them, then bloom into full colour, so you can see your journey at a glance. Hover an island to see its name, click it to sail straight there.
Every control belongs to the map's world:
• Red wax seal: play / pause
• Conch shell: mute
• Brass compass: volume (the needle turns with the sound)
• Message in a bottle: captions
• Spyglass: fullscreen
Accessibility
• Controls sit on an opaque parchment strip, so they stay readable over bright and dark footage
• Every button is at least 48px, comfortable for thumbs
• Fully usable with a keyboard, with a clearly visible focus outline, and menus close with Escape
• With reduced motion on, the falcon stops flapping and the islands change colour instantly
• Responsive: on phones the route straightens and every control stays
Process
All the artwork (map, islands, falcon and icons) is my own, created with AI image tools, then built into a working Video.js v10 skin with Claude Code.
Video: Sintel trailer © Blender Foundation | durian.blender.org (CC BY), hosted on Mux.
A progress bar as a sea route on a hand-painted map, lovely. Every video is a voyage indeed.
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!
I wanted a video player that felt like it belonged in a museum, so I designed IWATO as a display case where every part of the case is a control.
It's part of a fictional Japanese game I came up with, built around the myth of Ama-no-Iwato, the rock door the sun goddess hid behind. So before the film plays, it waits behind that door. You press the bronze mirror and the door slides open.
The seek bar is a handscroll that unrolls as the film plays, with a painting for each chapter. The seals above it stamp red as you reach each chapter, and you can tap them to jump. The volume is a crest you turn like a dial, the captions button traces 字 in brushstrokes, and every press lets off a little fox-fire.
I made sure it works for everyone too: it's fully usable with a keyboard, passes accessibility checks, and tones down the animations if you have reduced motion on.
I painted the scrolls in Recraft, rendered the museum film manually in Blender, aided with Claude on Video.js v10.
The museum display idea is lovely.