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
https://gurkanmihci.com/Autoban-caseS Reimagining the 1980s sports car gauge cluster and infotainment system for today's performance driver
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
Modern Car Dealership Website
A modern and professional website designed for a car dealership or automotive business. The website makes it easy for visitors to explore available vehicles, view important details, and connect with the business.
The design features a clean layout, engaging vehicle displays, clear calls to action, and a responsive experience across desktop and mobile devices. Built to help automotive businesses showcase their inventory and create a strong online presence.
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.
Geiger ☢ The world ended. The show didn't.
Most video players try to disappear. Geiger does the opposite: it turns the Video.js v10 player into a survivor's wrist terminal, a green-phosphor CRT in a rusted gunmetal housing, inspired by the Pip-Boy from Fallout. And the device isn't decoration. Every part of it is a working control.
📟 It boots. The poster greets you with "Welcome back, Survivor." Press play and the tube powers on from a single bright line, runs a self-check, and hands over to the picture with a little power-up chirp.
🎛 Real knobs. The VOLUME knob turns through 270°, from silent to full. The TUNING knob is an endless dial that winds the tape 5 seconds per click. Drag them, scroll over them, or focus them and use the arrow keys. To screen readers they're proper sliders.
🟧 The amber side plate. PLAY, AUDIO, CAPTIONS, SETTINGS, EJECT (picture-in-picture) and SCREEN (fullscreen) are the device's main keys, with a lit marker beside whichever is on.
📼 Holotapes are chapters. Pause and the chapters appear as a holotape list of real buttons. Pick one to wind there and play. The header always names the chapter you're in, and PREV / NEXT skip between them.
📈 Vitals you can use. VOL is the volume slider. SPD steps the speed. SIG shows how much tape is buffered ahead. A heartbeat runs while the tape plays: it races at 2×, slows at 0.5× and flatlines on pause. The rad gauge reads the volume.
💬 It talks back. "Sit back. The world can wait." At 1.5× it asks "In a hurry, Survivor?". Outrun the buffer and it reads SEARCHING with a radar sweep, seeking crackles like a Geiger counter, and the end of the tape reads "Signal lost".
Made for everyone: every control works from the keyboard in visual order, with an amber focus ring. Panels are dark and near-opaque so the glow stays readable. On small players the grip and side column fold away and the panel's own buttons take over, down to 340px phones. Reduced motion skips the boot, heartbeat and needle tremble. Sounds are quiet, and silent when muted. Forced-colours mode falls back to system colours.
It streams from Mux. The demo plays "Selected Works", a film of the Framer templates I designed, with a chapter for each one, so the skin is shown doing a real job.
Built with the Video.js skin CLI as HTML + CSS, plus small custom elements that read the player store (knobs, meters, status, chapters, sounds). All artwork and code are original. It's a fan tribute, not affiliated with Bethesda. Open source under Apache-2.0.
It's also live on my real site: my Framer portfolio opens with the film playing in Geiger, and I rethemed the whole site to match the device (green-phosphor colours, condensed uppercase headings and a terminal monospace for labels), so the player and the page feel like one product.
