Noctane

Hover the hood and it opens. Hover the floor and the battery shows through. Click either one to zoom into a labeled cutaway of the drive unit or the pack, then change the paint and wheels once the car has settled back to neutral.

react
typescript
vite
tailwind

Format: Interactive experience
Platform: Desktop + Mobile
Engine: React + Canvas
Type: Concept

How It Works

Interactive

Hover

Hovering the hood or the floor plays that system's forward clip. Four off-screen videos draw into one canvas, and a frame appears only after it decodes, so no black frame shows at a handoff. Leaving plays its own reverse clip.

About 1.25s

Enter

A click freezes the current frame, zooms the car, and crossfades to a labeled cutaway. The frozen frame resets only once the cutaway is fully opaque.

Interactive

Explore

Each part note opens its own explanation. Back or Escape returns through the same guarded transition.

Interactive

Restyle

Paint and wheels wait for the car to settle at neutral, then swap to a render that has already decoded.

Engineering

Fail-closed subpath build
The experience ships as a static build inside this Next.js site, where its media paths and wordmark link would otherwise point at the site root. The build script rewrites those strings in the built bundle only, checks each one against its expected count, and stops before copying anything when a count is off.
Brand layer at build time
The name, the copy, the type, the carbon background, and one accent variable are applied at build time from a single stylesheet and a single copy table. All detail copy sits in white on a dark glass panel over the cutaways, so it stays legible. The rebuild is reproducible, and every brand change reads as one diff.
Ownership in the page head
The play page is noindex, so its head carries a canonical to this page, author tags, and CreativeWork JSON-LD tied to the site's person entity.