Interactive HMI: From Drawing to Dashboard
From sketch to screen: an interactive automotive dashboard with live animations, built-in music, and four immersive time-of-day themes.
Link to site 👉 https://hmidash.vercel.app/
Interactive HMI Dashboard
A fully interactive automotive HMI dashboard brought to life from a hand-drawn concept. Designed to simulate the feel of a modern vehicle interior, the dashboard combines smooth animations, dynamic visuals, and immersive audio to create an engaging driving experience.
What Was Included
A complete interactive dashboard featuring a live speedometer, an integrated music player with multiple tracks, dynamic road scenes, and a guided tour walkthrough. Every element was designed to respond in real time, giving users a hands-on feel for how modern HMI interfaces blend function with visual storytelling. The dashboard also includes four distinct visual themes, Day, Sunset, Dusk, and Night, each shifting the color palette, lighting, and road scenery to reflect a different time of day, letting users experience the interface across a full range of driving atmospheres.
Web App Build Details
I took this project from a rough hand-drawing all the way to a fully interactive web build. I structured the layout, designed the visual system, and programmed every interaction from scratch, including a canvas-drawn speedometer with animated ticks, arc, and needle, a working music player, and the guided tour flow. I also built the original synth soundtrack using the Web Audio API before swapping in polished MP3 tracks for the final version. Every layer of the experience, from concept sketch to deployed site, was built and connected by me.
Tools Used
The tools used for this project were Figma, Claude, HTML, CSS, JavaScript, the Canvas API, the Web Audio API, HTML5 Audio, and Vercel.
Link to site 👉 https://hmidash.vercel.app/
Refresh your business presence for better results.
Quality design, every time.