An interactive driver display concept
Every drive mode gets its own display.
The problem
Drive modes change how a car behaves. The question here is whether the driver's display can change with them: show what matters in each mode and drop what does not, instead of one layout for town and track alike.
Many car UI concepts I see play with futuristic type and wild shapes, while function and usability fall behind. Shift sets out to join form and function. None of it is visual show-off for its own sake.
The idea
One pill-shaped display with a different information hierarchy for each mode. Speed stays on the left, and the next turn, range, the turn signals and the warning lamps stay where they are. Everything else changes with the mode, and only Race clears the anchors away for the track.
Principles
- Nothing cross-fades. When the layout changes, something makes way first, then the next thing arrives. Two things never sit on top of each other.
- Fixed anchors. Navigation, range, signals and lamps keep their place in every mode but Race.
- The lamps lead the start. At ignition every warning lamp lights briefly as a self-check8. The display stays dim until the car pulls away.
- Motion carries meaning. Things move, and colour appears, only when something changes.
- Numbers hold still. Every digit has the same width, so a changing value never shifts. When the dial bounces on a shift, its figures and the readouts beside it stay put.
- Speed first. The speed always sits on the left, so it is easy to find in a brief glance.
Start-up
Scales draw in, then every lamp checks itself. In Sport and Race the needles sweep first.
Sport: both needles sweep the scale, then the G-meter arrives.
Race: the colours fan out with the figures, the rim locks on, then P and the rest.
Four modes
Eco
Speed and consumption. As simple as the display gets.
Eco at city speed. The signal comes on, then the car takes the turn.
No dials at all. Speed is the one large number on the left, average consumption stands opposite it on the right. The limit sits under the speed; go over it and a small chip says by how much.
Navigation, range, the turn signals and the warning lamps keep their Comfort places. In the Nav view the map takes the room the dials leave.
Comfort
Everyday driving, with nothing pulling at your attention.
Lane assist switched on, then off. The lane lines sweep in and out with a short status chip.
Speed and revs sit on two quiet arcs at the ends, with the road or the route between them. The gear reads as one piece, D4, and changes without animation, so a shift never pulls the eye.
The middle is the driver's choice: Assist shows the road and lane assist, Nav shows the map and the next turn.
Passing the limit: the scale turns red and a chip shows by how much. The gear digit just changes.
Speeding is shown where the eye already is: past the limit the speed scale turns red and a chip shows the difference.
Sport
The feeling that the car has woken up.
Comfort to Sport and back. The side dials spring, the scales turn red, the gear drops.
Switching from Comfort, the side dials spring once and turn red, and speed and gear grow bolder.
Sport into a corner and out: braking, the turn, then the pull away. The G-meter follows each.
In the middle stands a G-meter: its dot shows where braking, acceleration and bends pull. The road behind it is seen from the driver's seat. The Nav switch swaps the meter for the map. Speed, gear, navigation and range keep their places.
Race
The revs, and nothing else that does not help you drive fast.
Race through the gears and back: shift lights and a short bounce on each shift.
One rev counter fills the middle with the gear inside it, the largest thing on the screen. Speed sits on the left, the four tyre temperatures with their brakes on the right, and oil, lap delta and water in a row under the dial.
Fourteen shift lights above the dial fill from both ends towards the middle, and the whole bar flashes red at the shift point.
Navigation, range and lane graphics are gone. Each shift gets a short bounce of the dial, so it registers without reading.
Flat or skeuomorphic
Two finishes for the same layout, and the difference is mostly detail. Skeuomorphic adds a metal rim and a raised centre. In Race the dial wears the classic yellow face with orange and red bands; the menu switches it to black.
Race, flat, black dial.
Race, skeuomorphic, yellow dial.
One shift, four modes
The same drive in every mode: up through the gears and back down. Only how the shift is shown changes.
Eco: no gear at all, just D.
Comfort: the gear next to D, changed without animation.
Sport: the gear alone, large, with the revs beside it.
Race: the gear inside the rev counter, with shift lights above.
How a driver reads it
Drivers glance at the display between looks at the road. NHTSA's guidelines allow no single glance over two seconds and no more than twelve seconds off the road for a whole task1, and real glances at the cluster are usually shorter than a second2. So the speed is the largest thing on the screen and the anchors never move, because layout affects how quickly and accurately the speed is read3. Type was set with the legibility guidance of ISO 15008 in mind4. Warning lamps keep their standard colours: red for danger, amber for caution, green for on, blue for high beam5. Things move only when something actually changes, because side vision notices movement before anything else6.
Try it
The display starts from the push button. Switch modes and styles at the bottom; the round arrow next to them, or I, replays the start-up. P R N D move the gear selector, the wheel icon toggles lane assist and a tap on an arrow starts or stops the signal. In Sport the same switch picks the G-meter or the map. The menu at the top right sets the size, Tilt (then move the pointer or drag to turn the display), the yellow Race dial, the language and Red Shift, and stops the engine.
How it is built
One HTML file with plain JavaScript: no framework, no build step, no 3D library. The gauges, the road and the route map are drawn live on three canvases every frame, while speed, gear and labels are real text, so they stay sharp at any size. The road is drawn from the car's actual route, so the view always looks along the lane and every corner turns the way the car does. A small simulation drives the car round a loop of city streets and supplies speed, gears, revs and temperatures. The car was rendered once into images. Every transition is code, CSS and the Web Animations API, and a device that cannot keep up drops the glows and draws at a steady 30 fps. The clips in this article were recorded from the page itself, frame by frame.
Sources
- NHTSA, Visual-Manual Driver Distraction Guidelines for In-Vehicle Electronic Devices, 2013.
- Drivers' visual attention to in-vehicle displays: effects of display location and road type.
- Instrument cluster layout, reading time and accuracy, Applied Sciences 15(4), 2025.
- ISO, ISO 15008:2017, Ergonomic aspects of in-vehicle visual presentation.
- ISO, ISO 2575, Symbols for controls, indicators and tell-tales.
- VTI / SWOV, See without looking.
- The dynamics of attention across automated and manual driving modes, arXiv, 2026.
- Knowing your dashboard lights.