Lando Norris

The descriptions on Awwwards and FWA both call the site a high-performance platform for the F1 driver Lando Norris, meant to carry the driver's energy and passion for racing through dynamic interactions and bold visuals. A helmet is the most personal piece of design a driver owns, and the site itself notes that Lando Norris has always loved designing helmets, from the signature blob livery to one-off specials. The site therefore brings the helmet back again and again. The opening portrait can put a helmet on, and the middle of the home page holds a hall of fame of more than a dozen past helmets. The ON TRACK page opens with a gold helmet that turns as the visitor scrolls. The footer portrait wears a full neon-green helmet, and even the 404 page for a missing address is a spinning helmet.

The home page of Lando Norris is ordered so that visitors first meet the driver, then see the racing, and finally reach the merchandise and partners. After the opening portrait comes MESSAGE FROM LANDO, two lines of large type about a British Grand Prix weekend at home to be remembered forever. A manifesto about pushing limits, fighting for wins and building a legacy on and off the track follows. A sideways-moving strip of photos follows, with pictures from Qatar, Miami, Monaco, Britain and elsewhere and two lines of the driver's own words in between. Further down, the ON TRACK and OFF TRACK entrances split the content into racing and life, followed by the helmet hall of fame, World Drivers' Champion merchandise, partner brands and social media. The footer leads to the store, the business enquiries email and four social accounts.

Beyond the home page there are three subpages, all reached from the menu at the top right. The ON TRACK page covers racing, with career statistics, season results, race wins and the years before F1. The OFF TRACK page covers life outside racing, with padel tennis, photography, Lego and golf. The CALENDAR page lists the season's races and results, draws the current circuit as a glowing 3D track ribbon, and ends with a countdown to the next race.

The picture of Lando Norris rests on four main colours: off-white (#F8F8F3), dark olive (#282C20), near-black (#111112) and neon green (#D2FF00). Off-white and dark olive take turns as the large background colours, and near-black appears only in the helmet hall of fame and on the calendar page. Neon green is kept for buttons, the signature, focus rings and a few words in the headlines, like the accent colour on a racing livery. The two lines of streaming type and the photo strip also use a darker yellow-green (#B2C73A) and a grey-white (#DDE1D2), so the picture never jumps abruptly from dark green to off-white.

Fine contour lines cover the background across the whole site, and they are its most consistent visual mark. The lines wind and slowly change shape, the same kind of curving blob as the livery on the driver's helmets. On off-white they are a light grey (#CBCBB9) and on dark green a slightly darker green (#363B25), so they add texture without pulling attention from the type and photos.

Every headline on Lando Norris combines two typefaces. One is Brier, a thin serif whose strokes end in small feet, and the other is Mona Sans, a heavy, tight sans serif. The logo sets LANDO in the first and NORRIS in the second, while REDEFINING, WINS and LEGACY in the manifesto switch to neon-green Brier. Mona Sans is a variable font, and in places the site narrows it to 93 percent width for tighter setting, so two typefaces stretch all the way from elegant to compact. One soft and one hard face in the same line read like the two sides of one person, which matches the site's on-track and off-track story.

The whole layout of Lando Norris scales continuously with the screen width. The site is drawn on a design 1728 pixels wide, and its root font size equals the screen width divided by 1728 and multiplied by 16, changing smoothly between 992 and 1920 pixels. Body text is therefore about 22 pixels on a screen 1920 pixels wide and about 16 pixels at 1366, in the same proportion. Tablets and phones each get their own base, and the phone base is three times larger, so the text stays readable on a small screen. How long each section holds during scrolling is set as a share of the screen height.

The cards, buttons and footer all have one corner cut off and joined by a short diagonal, like the folded corner of a tag. The NEXT RACE card at the lower left of the opening, every cell of the helmet hall of fame and the frame of the calendar track all use this shape. Neon green signals the state of every interface element. STORE at the top right is a neon-green button, and the menu button turns into a close cross once the menu is open. Inside the menu, the current page is crossed out with a hand-drawn neon-green line, and the keyboard focus ring is a thin neon-green outline.

Lando Norris rarely shows photos in their original colours. When the scroll reaches the signature section, the opening portrait fades to a green-tinted grey. Only a few photos in the photo strip stay in colour while the rest are muted, and every photo in the menu is black and white. With this treatment the photos blend into the dark green and off-white grounds, so the neon-green signature and headlines become the brightest things on screen. The signature, the hand-written ON and the collabs scribble in the partners section are all neon-green marker strokes that look as if the driver had drawn them on the page by hand.

On phones, the site stacks the layout into one column, the header keeps only STORE and the menu button, and the logo moves above the portrait. A neon-green hand button labelled TAP TO LOCK appears at the lower right of the opening portrait. On a phone the same finger has to scroll the page and draw the helmet across the face, and this button switches between the two. The photo strip becomes a vertical scatter, the helmet hall of fame drops to two columns, and the phone menu keeps only the links without the black-and-white photos of the desktop menu.

The opening of Lando Norris first turns the logo into a window. When the site opens, the screen is neon green with the LN logo in the middle and LOAD NORRIS underneath. About 1.5 seconds in, the outline of the letters LN becomes a window showing Lando Norris's eyes, and at about 2.5 seconds the portrait appears in full on off-white, wearing a faint wireframe helmet.

The opening portrait answers the cursor like a pool of water that can be stirred. Wherever the cursor crosses the face, it leaves a few liquid trails in which the helmet livery shows through, the background contours are churned into grey blobs, and the trails fade only after a second or two. As the cursor moves, the portrait itself also turns slightly toward it, a little slower than the cursor, with a slight lag. If the visitor leaves the cursor still for two seconds, the site sends an invisible cursor along an S-shaped path, sweeping from top to bottom in 2.5 seconds and back again a little later. The sweep repeats every few seconds, so the portrait keeps moving even when nobody touches it.

Resting the cursor on the McLaren F1 since 2019 line under the NEXT RACE card pulls the full helmet over the head. The helmet wipes up the face along an arched edge, covering it in 1.5 seconds that start slow, speed up and slow again, and it lifts off in one second once the cursor leaves. Typing the word disco on the keyboard turns the helmet into a mirror-ball disco helmet with star flares within two seconds, and typing it again turns it back.

As the visitor scrolls down, the opening portrait shrinks into a card. At the same moment the background shifts from off-white to dark olive, the portrait fades to a green-tinted grey, and two lines of large type stream sideways behind the card in opposite directions. The type drifts slowly all the time, and the faster the visitor scrolls, the faster it streams. The neon-green signature writes itself stroke by stroke in step with the scroll and is complete only in the second half of the section.

The later sections of the home page each have their own entrance. Every line of the manifesto and the quotes is first covered by a neon-green block, and the text appears only after the block sweeps across. The photo strip moves sideways, so scrolling down carries the photos across the screen while the background slowly turns from grey-green to off-white. In the ON TRACK and OFF TRACK section, a close-up of a helmet slides in from the left and a profile of the driver from the right. The two photos then join into one full-width image that opens the helmet hall of fame. In the hall of fame, resting the cursor on a cell turns its border neon green and swaps the helmet picture for a photo of the driver wearing that helmet at a race.

Lando Norris bridges its page changes with a neon-green panel. When the visitor opens another page from the menu, the neon-green panel first covers the screen while the LN logo animates in the middle. The panel then becomes a slanted band with cut corners and slides off at an angle, revealing the new page after about one second. The site's styles define a default transition of 0.75 seconds that starts very slowly, moves fast in the middle and has a long tail, which makes the movement feel crisp and steady.

Switching circuits on the calendar page is the site's second carefully built animation. When the visitor clicks an arrow beside the track frame, the current circuit is erased bit by bit in the racing direction while it turns away by 45 degrees. The corner numbers, DRS zones and chequered start flag fade upward one after another, each only a fraction of a second behind the last. The new circuit then turns back in from the other side and draws itself in the racing direction, each half taking about one second, the first starting slow and ending fast and the second the reverse.

Scrolling on Lando Norris carries some inertia, so after the visitor stops, the page glides on a little before settling. From the opening all the way to the footer the picture holds at 60 frames per second, and the opening portrait also stays at about 60 frames per second when left alone.

The pages of Lando Norris are built in Webflow, and the 3D and 2D animation is attached to page elements through attributes. When a designer gives an element a data-gl attribute in Webflow, a WebGL scene takes it over, such as the opening portrait, the streaming type or the calendar track. A data-rive attribute makes an element play a Rive animation, naming the file, the state machine and the part of the scroll the animation is tied to. A data-gl-change attribute on a section makes the WebGL background switch to a given colour when that section scrolls in. The site uses eight Rive files for the signature, the small track map on the calendar card, the LN logo, the menu button, the page transition, the hand-written ON and collabs and the small helmet icons. Rive's canvas-lite runtime draws each one on its own small canvas.

A full-screen three.js r174 WebGL2 canvas sits fixed behind the whole page, and every scene is drawn on it, aligned to its own page element. Scenes such as the opening portrait and the streaming type only render while their element is near the viewport and stop once it leaves. Adrián Gubrica, the creative developer responsible for this part, says in an interview on Codrops that the hardest part was optimisation, with most 3D elements going through several rounds. On phones, several scenes rendering at once made each frame take longer and opened a delay between the WebGL scenes and their page elements, and the team reordered the work inside the render loop to keep the two aligned. The site hangs both Lenis smooth scrolling and the WebGL updates on the same GSAP ticker, so the page and the canvas always move in the same frame. Lenis covers a tenth of the remaining distance each frame, and touch scrolling on phones is smoothed the same way.

The opening portrait is a photo turned into a 3D head. The photo sits on a plane divided into a 128 by 128 grid, and a depth map pushes the plane out into the shape of the face, with alpha, normal and roughness maps completing it. When the cursor moves, the photo therefore turns slightly like a real head and the lighting shifts with it. The helmet is a Draco-compressed glb model with a physical material at full metalness and a roughness of only 0.05, lit by a studio HDR environment map for a mirror-like shine. The helmet has several liveries, normally the gold Lime version, plus dark, grid, Google and disco-ball versions, and the disco-ball version adds a reflective ball model and a set of instanced lens flares.

The opening portrait is composited from four offscreen images, namely the head, the head in its helmet, a 2D fluid simulation and a slowly changing layer of stepped noise. The fluid simulation runs at a tenth of the screen resolution, and each frame it advects the velocity, adds the cursor's force, computes the divergence and solves the pressure in four iterations, with velocity decaying to 96 percent each frame. The compositing shader uses the fluid's velocity as a mask, and wherever the velocity passes a threshold, it shows the helmet image over the head, turns the background grey and swaps the face texture for a pre-edited shadow version, so the face looks shaded by the helmet. The contour lines are drawn in the same shader, which splits the noise into a few levels and draws a line wherever a pixel's level differs from its neighbours above, below or to either side. When the cursor has been still for two seconds, a fake cursor following an S-shaped path on a timeline pushes the fluid instead. Pulling on the full helmet simply pushes the mask up from the bottom, with its edge arched by a sine curve.

Adrián Gubrica writes in the interview that the opening helmet needed several layers and render targets, with four versions so far plus an easter-egg version. The calendar page had to transition between 24 track visualisations with 490 points. Every circuit on the calendar page comes from one glb file, from which the site reads the track path as a string of points. A flat strip then follows that path to form inner and outer glowing track ribbons coloured with a matcap texture. The corner numbers, DRS zones and start flag are ordinary page elements, which the site places each frame by projecting points from the 3D track onto the screen, so they can use page text and page animation.

The two lines of streaming type are drawn in WebGL as well, from multi-channel signed distance field (MSDF) atlases of Brier and Mona Sans. Each frame the type moves at a fixed speed plus the current Lenis scroll velocity, so it streams faster the faster the visitor scrolls. The opening portrait shrinks into a card during scrolling because the plane that renders it scales and moves with a fixed-size element on the page. At the same time, a filter parameter pushes the picture from colour to desaturated, lowers the contrast and lays an olive tint over it.

Lando Norris prepares its assets separately for each device. Windows wider than 991 pixels get WebP textures, and narrower ones get KTX2 textures that the Basis transcoder turns into compressed formats the GPU can use directly, saving graphics memory on phones. The home page downloads about 5.3 MB on first load and about 6.4 MB after scrolling to the bottom, and about 8.8 MB on a phone. The largest single file is the 467 KB track model holding all 24 calendar circuits, downloaded with the home page, followed by the 379 KB studio HDR environment map, the 362 KB main script and the 351 KB disco-ball model. The main script unpacks to about 1.3 MB and bundles three.js, GSAP, Lenis and the site's own code.

The server of Lando Norris starts sending the page in about 0.02 seconds, the neon-green loading screen appears at 0.22 to 0.32 seconds, and the portrait is complete at about 2.5 seconds. During loading the page freezes once for about 0.9 seconds, and nothing on screen jumps. The partnerships link at the bottom of the home page opens the 404 page, which shows a gold helmet spinning between two neon-green 4s above PAGE NOT FOUND and VEERED OFF TRACK.

Lando Norris can also be browsed with a keyboard. Space, Page Down, the arrow keys, Home and End all scroll the page, and Tab moves through every link with a thin neon-green focus ring while the page scrolls the focused element into view. The logo link at the top left and the two arrow buttons under ON TRACK and OFF TRACK have no names, so a screen reader only knows that each is a link. The site's code never reads the system's reduced-motion setting, so the fake cursor, the fluid and every scroll animation play as usual when that setting is on.

Lando Norris is the Awwwards Site of the Year for 2025, and it also won that year's visitor-voted Users' Choice. On FWA it won FWA of the Day with 85 points, filed under personal and portfolio and sports and leisure.

Among the four Awwwards scores, Creativity was highest at 8.71, likely thanks to the portrait that reveals a helmet through fluid, the disco easter egg triggered by typing and the glowing circuits on the calendar page. Usability was lowest at 7.90, and the wait for the loading screen and the near one-second freeze during loading may both have pulled it down. The five developer jurors gave 7.58, with Animations highest at 8.60 and Accessibility lowest at 7.00, which matches the unnamed links and the ignored reduced-motion setting in the Engineering section.

OFF+BRAND. is the only credit on both platforms, the site is built in Webflow, and the 3D work was led by the company's creative developer Adrián Gubrica. Adrián Gubrica says in the interview that this was a first collaboration with OFF+BRAND., and that Federico Valla helped with the render loop. As of this report, OFF+BRAND. has won Site of the Year and Site of the Month on Awwwards once each, both for this site.