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
Mystery Drop: the skin you don't get to pick
You know those mystery toys where you don't know which one you got until you open it? Or the dumpling place that hides one rare dumpling in the batch? Starbucks does it with mystery cups too. People go nuts for that stuff. I wanted a video player that does the same thing.
So you don't pick the skin. There's a sealed tube with a shadow inside. You press it, a little character drops, and the whole player changes to match him. Colors, buttons, glow, all of it. He even rides the timeline, so you grab him and drag to scrub.
Some are common. Some are really hard to get. Mythic is 2 in 100, and yes, you can hit it on your first try. That's the whole point. The rarer the character, the more the player shows off.
I didn't want people sitting there pressing a button instead of watching the movie, so you earn drops by watching. One new drop every minute, and your luck goes up each time. You don't have to use them right away either. Save them up, watch your whole video, and open them all at the end. Everything you find stays on your shelf and you can wear whichever one you want.
Find all six Driplets and Series 2 opens up with six more, the Tuftlets. Twelve total.
And it's still a real player under all that. Play, scrub, volume, mute, fullscreen, time on both ends, works with just a keyboard, works on a phone both ways.
Don't feel like waiting on luck? Here are the rare ones:
Mythic: https://mysterydrop-six.vercel.app/?skin=nova
Legendary: https://mysterydrop-six.vercel.app/?skin=blaze
Series 2: https://mysterydrop-six.vercel.app/?series=2
The characters are original. I made them with AI image tools. The tube, the costumes and the sounds are all code.
Live: https://mysterydrop-six.vercel.app
Mux playback ID: 3CJ9OZrQySwKI028qBQE2paP57ZIbQsAYN6bUBk2VRQE
Film: "Wing It!" (CC) Blender Foundation | studio.blender.org, Creative Commons Attribution 4.0.
A blind-box player skin, ha. Fun idea.
Thanks! My kids love it.
a skin you don't get to pick is so fun, love the collectible mystery-toy energy of this
Thanks Ammar, it was fun make!
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
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.
I design Framer websites for B2B brands for a living... then a video player challenge showed up and I lost all self-control 😮💨
Most players on the web look the same: a black box, a thin bar, a play icon you've seen a thousand times. And when a team asks "can the player feel like OUR brand?", the answer is usually "sure, we'll change the colour".
So for the Video.js Skins Design Challenge I built Afterglow 98. A late-90s player window that drives a 3D computer sitting in a dark room. Press play and the camera pushes into the tube while the window tucks away (move the mouse and it comes back). View flips between the screen and the whole room 📺
The look was the fun part. The real work was making it behave like a proper player: Space or K plays, the arrows seek and change volume, F goes full screen, C turns on captions. Chapters, hover thumbnails, a phone layout, and calmer motion for anyone whose device asks for less of it.
To be fair, nobody needs a CRT in their player (I'm aware 🤡). But a skin is the first thing people feel before the first frame... and a grey box never made anyone feel much.
It streams from Mux and it's live on my site's lab page, so you can play it right now 👇
Which one would you ship on your own website, the safe skin or the weird one? 👀
Built to be sent.
Framer design partner for B2B brands and AI startups. DM "site" if yours is next.
#framer #videojs #mux #webdesign
Plate is an HTML skin for Video.js 10. It draws the player the way quickflow.dev draws everything else: a numbered head with a status word, the picture framed by corner marks, a chapter index beside it, a ruler for a timeline and text keys underneath. A player is a diagram of a video's time, so I drew it like one.
What it does
Every chapter cue gets a button in the index, with its own frame from Mux's storyboard. Video.js has no chapter navigation control yet, so a small custom element reads the cues from the player store. Below 760px the index turns into a strip that scrolls with the video.
The time slider is a ruler, with a numbered mark where each chapter starts.
The keys are words you can read. Speed, Quality, Captions and Audio open Video.js menus. Space, K, M, the arrows, J and L, 0 to 9, < and >, F, C and I all work from the keyboard, and every control shows a focus ring.
In fullscreen the picture goes edge to edge, the controls fade while it plays, and an Index key opens the chapters as a side panel.
It comes in three themes (Night, Blueprint, Signal), takes your colours, fonts and corners through public custom properties, and speaks seven languages: English, German, French, Spanish, Romanian, Russian and Arabic, right to left included. It follows reduced motion, higher contrast, reduced transparency and forced colors.
The workbench at plate.quickflow.dev lets you try it on your own video, change every property, watch contrast and control names in a live accessibility readout, and download the CSS for your theme.
Plate plays the showreel on quickflow.dev. The code is open source under Apache 2.0.
does the chapter index stay visible in fullscreen or does it tuck away?