Web Development

Voltage Racing — Nikolai Voss

Concept F1 driver website with a cursor-reveal helmet, canvas circuit lap and an AI-generated cast — zero JS libraries

Gallery

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.

Visit Live Site
Type
Website
Category
Web Development
Tech Stack
HTML5CSS3JavaScriptCanvas APIMotion DesignNetlifyNetlify FormsOpenAI ImagesKling (Oxen.ai)Generative AI
Back to all projects
More like this
Related Web Development Projects