---
id: "aw-site-62724"
source: https://www.awwwards.com/sites/lando-norris
author: "OFF+BRAND. (offbrand)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Neon Racing Helmet Dark Hero

## Summary
The opening screen of a racing driver's website: a single glossy 3D race helmet in neon lime with a black squiggle camouflage pattern floats in the centre of a near-black page, over faint topographic contour lines, with a small two-line name wordmark beneath. It shows how far one hero object, one acid colour and a lot of black can carry a brand.

## Style
- Theme: dark (near black with acid lime)
- Mood: bold, sporty, sleek, confident, electric
- Tags: webgl, 3d-product, helmet, neon-lime, topographic, minimal-hero, contour-lines
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Background | #111113 |
| Contour line | #1F211D |
| Deep olive | #1E2206 |
| Olive | #3C4412 |
| Moss | #73810E |
| Lime | #CBD53C |
| Neon lime | #D2FF00 |
| Cool grey | #7B8177 |

## Typography
- Name wordmark (placeholder): two stacked lines centred under the helmet; the first in a light high-contrast serif, uppercase, about 3% of frame height; the second in a bold grotesk sans, uppercase, same size, both off-white. Cormorant Garamond (400) over Inter (800).
- The helmet carries sponsor decals; replace them with abstract placeholder marks.
- No other text.

## Layout
- 4:3 frame (1600x1200), fully black with the helmet centred slightly above the middle at about 45% of the width.
- Wordmark centred at about 82% height, roughly 9% of the width.
- Background: thin 1px contour lines in #1F211D forming loose topographic blobs across the whole frame, very low contrast.
- No cards, borders or UI; depth comes from the helmet's specular highlights and dark visor reflections.

## Elements
- Full-face race helmet in three-quarter view facing right: neon lime shell with thick black organic squiggle lines, a dark smoked visor, clear tear-off tabs on the top left, chrome hinge bolts and small placeholder sponsor badges.
- Glossy clear-coat reflections along the crown and chin.
- Topographic contour line field.
- Two-line serif plus sans name wordmark.

## Motion
Static image. On load the helmet could slowly rotate on Y (about 20deg each way over 6s, ease-in-out, looping) following the cursor with a spring, while the contour lines drift with a slow noise offset and the wordmark fades up 8px after 600ms.

## Rebuild it
1. Page: `h-screen bg-[#111113] grid place-items-center overflow-hidden relative`.
2. Contours: an absolutely positioned SVG of hand-drawn or noise-generated contour paths, `stroke="#1F211D" strokeWidth={1} fill="none"`, slowly translated with Motion `animate={{x:[0,20,0]}}` over 30s.
3. Helmet: react-three-fiber `Canvas` with a GLB helmet, `MeshPhysicalMaterial` with `clearcoat: 1` and a lime base map with a black squiggle texture; an `Environment` HDRI for reflections.
4. Interaction: map pointer x and y to target rotation and smooth it with `useSpring` (stiffness 60, damping 20) inside `useFrame`.
5. Wordmark: two `span` blocks in a `text-center leading-none text-[#F2F2EE]`, the top one serif light, the bottom one bold sans, revealed with `initial={{opacity:0,y:8}}`.
6. Use #D2FF00 sparingly for later CTA buttons and hover states to echo the helmet.

## Generation prompt
A sleek dark website hero: a single glossy full-face racing helmet rendered in 3D, painted neon lime with thick black organic squiggle camouflage lines and a dark smoked visor, floating in the centre of a near-black background with very faint thin topographic contour lines, a small two-line name wordmark below combining a light serif and a bold sans; dramatic studio reflections, sporty and electric, no real logos or sponsor marks.