An innovative in-car HUD playful experience
Have you ever felt disconnected from your car?
In the U.S., household vehicles spend 95% of their time parked. That means for most of the day, a car isn’t moving—it’s just sitting still.
[Project Overview]
A Three. js-powered automotive UI system combining HUD projection, 3D navigation, and interactive media brings a sense of realism and atmosphere.
Industry
Automotive
My Role
UXUI Designer&Front End engineer
Tools
Figma three.js HTML CSS Blender
Timeline
January 2025- March 2025
Develop
Information Architecture
To better understand the interface accessibility for both driver and passengers, I began by defining the system architecture through control zones on the screen.
Protoype
To better understand the interface accessibility for both driver and passengers, I began by defining the system architecture through control zones on the screen.
Coding
Test technical feasibility by Three.js
Then I developed the Figma 2D interaction into three.js and JavaScript. To make a smooth transition and fully interactive experience.
Interaction Animation for HUD
Also, the campfire is NOT enough for just a video. The users not only see and hear the fire, but can also interact with it. When you blow toward the steering wheel, fire will change the direction
Final Installation
Select this text to see the highlight effect
Back to Home
Next Project
Wanna work with me?