Car Dashboard

Components & Primitives

The dashboard is assembled from small, focused components. Each one handles a single piece of information — speed, RPM, fuel, temperature, gear. Below is every building block shown in isolation with static values.

CircularGauge

The foundation container for round gauges. It takes an accent color, generates a tinted circular background using shadeHex, and exposes two slots: Display for the arc overlay and Stats for centered text. Both Speedometer and Tachometer are built on top of this.

AnimatedArc

A reusable SVG arc that animates between 0 % and 100 % fill. It supports configurable sweep angle, stroke width, rotation, labels at both ends, and a counter-clockwise mode. The same component powers the speed arc, RPM arc, fuel level, and coolant temperature indicator — only the props change.

Speedometer

Combines CircularGauge, AnimatedArc, and a FuelLevel overlay into one unit. The large number in the center shows the current speed. The small arc at the bottom-left is the fuel gauge with E/F labels. In the full dashboard this reads live values from the simulation; here it is frozen at 120 km/h with 65 % fuel.

Tachometer

Mirrors the Speedometer layout but shows engine RPM. The small arc at the top-right is the coolant temperature gauge, mapped to a 50–130 °C display range so that 90 °C — normal operating temperature — sits at the midpoint. Shown here at 3 500 RPM and 91 °C.

Sub-gauges: fuel level & coolant temperature

Both FuelLevel and CoolantTemperatureGauge are thin wrappers around AnimatedArc with preset labels (E/F and C/H). They can be used independently — the dashboard layers them on top of the main gauge using CSS grid stacking.

Gear selector & gear indicator

The GearSelector renders a vertical P R N D S column styled like a modern console shifter. The GearIndicator uses a rolling-odometer animation to smoothly transition between gear numbers (in Drive/Sport) or mode letters (in Park/Reverse/Neutral). Click a mode to see the transition; in Drive or Sport, use the numbered buttons to shift gears.

AnimatedGaugeValue

The rolling odometer at the core of GearIndicator. Each digit column scrolls through 0–9 with staggered spring-based timing and a velocity-proportional motion blur. It also supports a custom labels mode — pass an array of strings and the value becomes an index into that list. Shown below with three digits frozen at 247.

On-board computer

A 3-page LCD panel showing trip data, fuel range, and vehicle status. Use the ◀/▶ buttons to page through: Trip (distance, time, average speed, fuel used), Range (instant / average consumption, remaining range, fuel level), and Vehicle (engine temp, oil life, service interval, odometer). In the live dashboard each value updates every animation frame from the physics simulation.