A concept microsite for a fictional rookie Formula 1 driver, Nikolai Voss, and his team, Voltage Racing. Built from a creative brief as an exercise in art direction, motion design and a repeatable AI-imagery pipeline — the driver, team, brand and every photograph are invented.
Highlights
- Cursor-reveal helmet — moving the mouse across the hero portrait reveals a helmeted version of the same photo through a soft, cursor-following window (pure CSS
clip-path, no WebGL)
- Scroll-stacked sections — hero, season and timeline pin and recede as the next block slides over them
- Canvas-drawn circuit — a lap fills clockwise from the chequered flag over a halftone map, plus an animated contour-line backdrop generated with marching squares
- Career timeline — seven scroll-revealed entries with a progress rail that turns as it travels
- 17-round season — one data file drives the calendar strip, the race list and every race-report page with its gallery
- 5-second AI trailer — image-to-video from a still edited out of the character reference
- Working store waitlist — validated form that saves real submissions through Netlify Forms
Consistent AI character
Independent text-to-image prompts produced a different face every time. The fix was a single reference portrait used as the input to image-edit calls, so the same person appears in the hero, paddock, footer and timeline. Younger career years are told through gear, props and hands rather than a portrait.
Under the hood
- Hand-written HTML, CSS and JavaScript — no framework, no runtime libraries, about 1.2 MB total
- Design tokens, a three-font system (Big Shoulders Display, Space Grotesk, JetBrains Mono) and a burgundy-on-graphite palette
- Responsive from 390 px phones to wide desktop; respects reduced-motion
Concept project: all people, brands and results are fictional and all imagery and video are AI-generated.