Mile Marker: Road-Trip-Inspired Skin for Video.js v10Mile Marker: Road-Trip-Inspired Skin for Video.js v10
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
I built Mile Marker, a road-trip skin for the Video.js v10 player. I love road trips, driving and podcasts, and highway signs are designed to be read instantly, at speed, in any light, which is exactly what video controls need. So the skin keeps a calm base and puts its personality into a few signature moments. The seek bar is a road: a small yellow car drives along the dashed center line, and the lane you’ve already driven turns yellow. Play/pause is a yellow diamond road sign, the time sits on a green highway EXIT sign, and settings open as an overhead highway sign. When the video ends you reach the “End of the road”, where you can take the exit to the next video or replay. Type is Overpass, based on US highway signage.
I wanted it to be fun without costing usability. A dark-glass panel keeps controls readable over bright and dark footage, every control is at least 44 px, the yellow focus ring has a dark keyline so it shows on any frame, everything works by keyboard, and the animations calm down with reduced motion.
Post image
Denis's avatar
"Read instantly, at speed, in any light" is exactly the right brief for video controls. Great pick.
Ammar's avatar
highway signs as player ui makes so much sense, readable at a glance in any light. mile marker is a great concept 🛣️
Back to feed
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