Animated EV Infotainment Mockups

I’m producing a short product video that showcases our battery-swapping technology for electric vehicles, and I need a set of high-fidelity, HTML-based infotainment screens to feature in the footage. The mockups will run on an in-car infotainment display, so every pixel needs to feel native to that environment—clean, minimal and futuristic, much like what you’d find in a Tesla or NIO cockpit.

Core brief
The UI lives in a light, monochrome palette (black, white, grey) with subtle, smooth transitions. All text must remain editable in the markup; no flattened assets. The canvas is fixed at 190 mm × 110 mm and must be ready for direct screen capture.

Deliverables (5–6 individual HTML files)
• Home screen showing low battery (~15 km remaining)
• Navigation search and “Swap Station” selection
• Active navigation with a 2.5 km route on a map-based UI
• Arrival confirmation + “Vehicle Verified” hi-tech overlay
• Swapping process sequence (align vehicle → remove battery → install charged battery) with light, timed animations and a visible countdown
• Completion screen at 100 % charge (~250 km range)

Tech stack
HTML5, modern CSS and a touch of vanilla JavaScript for motion—only what’s needed for smooth fades, slides or progress indicators. No external frameworks unless absolutely essential; I want the files lightweight and self-contained.

Timing
Everything should be ready to record within two days of kickoff.

If you have a sharp eye for automotive UI and can execute pixel-perfect front-end code with graceful animation, let’s get this on the road.