Léo Parpeix - Portfolio 2026
This is the personal portfolio of Léo Parpeix, a French art director and interactive designer. Most of the projects Parpeix has worked on carry the names of the companies behind them, so the portfolio has to show which part Parpeix personally did inside those companies' large teams. Parpeix wanted visitors to understand within 10 seconds what the designer can do, so Parpeix made the site's first view a 3D sculptor's workshop, with a moustached plaster daisy and its design drawing in the same frame. The daisy stands for Parpeix's character and way of working, and it runs through the whole site.
Parpeix made the site together with the developer Thoma Lecornu. The portfolio went on to win Site of the Day on both Awwwards and the FWA.

01Concept
Léo Parpeix is currently an art director and interactive designer at the digital design studio Locomotive, and the small text at the top of the portfolio's home page says Parpeix also takes freelance projects. The About page, which introduces Parpeix, lists two more studios in its work history, Immersive Garden and 14islands. The About page's award list counts 10 Awwwards Sites of the Day and 1 Site of the Month, all won by projects Parpeix worked on at these studios.
Parpeix lays out the idea behind the portfolio in a note that opens from Credits in the footer, and the same text appears on the FWA award page. Parpeix wanted a balance between immersive 3D scenes and a clean 2D layout, so that visitors could see the projects in a single scroll and understand within 10 seconds what Parpeix can do. The whole idea is built around the moustached daisy, which, Parpeix says, reflects the designer's personality and way of working. The daisy appears as a freshly sculpted piece in the opening workshop, back in nature on the About page and as a strange, playful magical object elsewhere.
Portfolios usually open on projects, but Léo Parpeix's opens on a 3D-rendered sculptor's workshop. The room has three arched windows, a herringbone wood floor and a wooden ladder against the wall, with small geometric models on a few plinths. The plaster daisy with a face stands on the central plinth, and its design drawing hangs on the right-hand wall. The bottom left corner carries a single slogan, Driven by detail. Obsessed with seamless motion. With the sculpted daisy beside its drawing, visitors see the obsession with detail that the slogan claims the moment they walk in.
After the workshop, the first section of the home page is three huge lines, FRENCH INTERACTIVE DESIGNER, with a yellow 3D bee flying beside them and a small line below that reads Click to feed the bee. When a visitor clicks, an orange or a bunch of grapes pops up at that spot and the bee flies over to eat it. Once the bee has eaten, the three big lines change one by one into CREATIVE PASSIONNATE ART DIRECTOR. Those three lines hide a typo, Passionate with an extra n, which only visitors who feed the bee will see. The About page and the footer each have a bee block of the same kind, where the new words are Colorblind But Sees Vibes on the About page and your gateway to excitement starts here! in the footer.

After the bee section, the home page first lists Parpeix's 6 selected projects. Each project's screenshots and videos are laid out in a horizontal screenshot strip that visitors can drag with the mouse. A second 3D room sits among the selected projects, a library with wooden shelves full of pastel book spines, and the line Focus on innovation and user-centered design is set over the shelves.

Under each selected project's screenshots runs a line listing how many awards it won, the year, the size of the team, the company it was made at and what Parpeix personally did. The Dioriviera line, for example, says it was a team of five at Immersive Garden, with Parpeix as art director who also designed the UI, the 3D and the interactions. A personal portfolio that openly says its author was one of five makes it easier for viewers to judge what this designer can actually do. Below the selected projects is a short table called Archives, one project per row, listing the name, type, Parpeix's role, year and company for 23 more projects.

Besides the home page, the site has two more pages, About and Playground. The About page opens on a lakeside outdoor scene and then turns into a solid dark green layout, starting with the WHO IS THIS CURIOUS FELLOW bee block and a photo of Parpeix watching the sunrise on a Panama mountaintop. Next comes a work history card floating in a library, followed by a list of awards and a list of clients. The Playground page is solid bright yellow, with the title WELCOME ON MY DESIGN PLAYGROUND. Parpeix's small experiments are scattered across it like a collage wall, from posters and transitions to loading animations and 3D exercises, each labelled with a name and year. Several bees also fly around this page, and speech bubbles such as Wrong turn and Pollen later pop up from them.
02Design
The site's look rests mainly on a few 3D scenes. The workshop and library on the home page are warm interiors, with cream plaster walls, untreated wood, pastel book spines and a few cut-paper style pictures. The About page's outdoor scene, by contrast, is made to look like a toy set. Rounded pine trees form a little forest reflected in a lake, with snow-capped mountains and cotton-wool clouds behind. Every scene shares one look of soft light, matte materials and shallow depth of field, with a fine film grain over the image. This look is common in 3D renders of recent years, while the image that is truly Parpeix's own is the daisy with the little face.

The type uses just two faces, and nearly all the visual weight sits on a few huge words. Body text and navigation use Monument Grotesk Regular, scaling with the window to about 19 pixels on a 1920 pixel screen, with three more sizes of 24, 32 and 45 pixels for intros and subheads. Headlines use Avantt in its variable form (a font whose weight can be adjusted continuously), set at a weight between regular and bold, closer to bold. At their largest the headlines reach about 216 pixels, more than ten times the body text, so three words can fill a screen. Avantt makes up only about 2 percent of the site's text by character count, but nearly 60 percent of it by area on screen. In the About page's statement Parpeix replaces the gaps between some words with a small daisy, so the daisy reappears halfway through the big words.
Colour use is just as sparing, with essentially one background and one text colour per page. The home page is light grey (#F7F7F7) with dark green text (#022016), a green so deep that it barely reads as green and the big words look black. The About page flips to light text on a dark ground, with a dark green background (#083D2A) and beige text (#EED6C8). Almost the only bright colour shared by all three pages is a bright yellow (#F6E016). It appears on the bee, on the small capsule that follows the mouse and on the DRAG label on the screenshot strips, and the Playground page simply uses it as its whole background. Apart from that Playground background, the yellow appears only where visitors can act, and together with the text beside it, it marks where they can click.
On phones the site keeps all its content and moves the layout into one column. The opening camera sits closer to the daisy, so the flower almost fills the tall screen. The navigation folds into two buttons at the top right, one for sound and one that drops a white menu panel from the top, listing WORK, ABOUT, PLAYGROUND and LAB in large type above Parpeix's email address. The selected projects are still a screenshot strip that can be swiped sideways, with the project details below the screenshots. The library in the middle of the home page shrinks into a card with an extra yellow WATCH REEL button. When the phone is turned sideways, a message appears asking the visitor to turn it back upright.

03Motion
When visitors open the site, they first see a nearly blank light grey page with a small line across its middle giving Parpeix's name, role and World building. Once loading finishes, a small rounded window holding the workshop appears in the centre, at first tilted and leaning back like a card lying at an angle on a table. The window then straightens and rises into place, grows into a square and finally stretches to fill the whole screen, so the visitor is standing in the workshop. After the window fills the screen, the camera slides back into place from the right of the room over about 2 seconds, slow at the start and the end and fast in the middle.

In the 3D sections, scrolling moves the camera. In the opening, the camera sinks and pushes into the workshop as the visitor scrolls. In the library section it moves vertically along the shelves, and the shelves rise together with the page's text. The site smooths the page's scrolling, so the camera does not jump from notch to notch with the scroll wheel either.
When visitors move the mouse, the 3D image ripples and blurs along the cursor's path, like water with a fingertip drawn across it, and then slowly clears. The whole camera also turns slightly towards the cursor, so slightly that visitors mostly sense only that the image is alive. At the same time, a small yellow capsule reading CLICK TO ENABLE SOUND follows the cursor. It tilts in the direction the mouse moves and shrinks away when the mouse stops. The sound stays off until a visitor follows the capsule's label and clicks, and what plays then is a 45-second ambient loop.
The bee is the liveliest character on the page, and it flies like a real insect. It never goes straight but always curves after an invisible target, slowing as it gets close, with its wings beating fast the whole time. When a visitor moves the cursor onto the bee, the bee comes out with an irritated remark such as Not a button or Personal space. The Playground page has many more lines, and the bee sometimes talks to itself at length, with lines like We are now in philosophy mode.
When a visitor clicks to feed the bee, the fruit lands with a soft sound. Only once the bee has flown over and eaten the fruit do the three big lines on the home page start to change. The old lines sink one after another and disappear once they drop below the bottom edge of their own line. Each takes a little more than a second, and neighbouring lines start about a tenth of a second apart. The three new lines rise from below once the old ones are halfway down, fast at first and settling slowly.
Visitors can drag the project screenshot strips with the mouse. When the cursor moves over a strip, the yellow capsule following it changes to Drag. If the visitor holds the mouse button and pulls left, the strip follows the hand, keeps sliding with inertia after release and, as it slows down, eases onto the nearest screenshot and stops. As the strip slides, each image also shifts slightly inside its own frame, like a distant view seen through a window. The strip loops, so a visitor who keeps pulling in one direction comes back to the first screenshot. On a phone the finger must first travel a short distance sideways before the strip starts to follow it, so swiping the page vertically never drags the strip by mistake.
When visitors click through to another page, a dark green disc printed with a small daisy appears in the middle of the screen. The disc first grows until it covers the whole screen, then shrinks back to the centre, and the next page's 3D scene appears around it. The new page's camera slides in from the side at the same time and settles in under a second.
04Engineering
The portfolio's workshop, library and lakeside scene are all drawn on two full-screen three.js canvases stacked one on top of the other. The lower one draws the rooms and the outdoor scene at the screen's pixel density, first into a render target and then through an SMAA or FXAA antialiasing pass, a fluid distortion pass and a film grain pass. The upper one is transparent and always renders at twice the width and height, with shadows on. It draws only the bees, the fruit and their shadows, so these small objects that move with the visitor's actions have especially clean edges. On phones, both canvases render at twice the pixel density.
Each room's lighting and materials are baked in advance into a few large textures. The workshop and library on the home page use 8 in all, one for each type of object (the flower, props, furniture, decor, pictures, bookshelves, floor and walls), and the About page uses 9.

The camera's position and framing were also set up in advance in the 3D software. Each scene's model file carries its own camera, and the page reads that camera's position, angle and field of view when it loads the scene. The code then wraps this camera in two more layers, one turning it slowly towards the cursor and the other pushing it along with the scroll position.
The scroll layer uses no curved path, and each 3D section has just one set of parameters. The code works out what proportion of the section has scrolled past, counting 0 when its top enters the bottom of the screen and 1 when its bottom leaves the top. It multiplies that by the section's set translation and rotation and adds the result to the camera. The opening section moves 2.4 units down and 4 forward, and the library section only 2.75 units vertically. The scroll position used here has already been smoothed by the Lenis scrolling library, so the camera moves with exactly the same feel as the page.
The opening window and the page transition disc are both drawn by shaders. The window is a full-screen plane whose fragment shader draws a rounded box and projects it to the screen from a 3D position rotated about two axes with perspective. Three progress values control its straightening, its growth into a square and its stretch to fill the screen. The whole site is a single-page app, so changing pages never reloads the browser page. During a page change, the dark green disc grows and then shrinks with progress, while the site injects a short piece of shader code into every material to discard any pixel that falls inside the disc. This way the bees and the scenery are hidden cleanly behind the disc and never poke through in front of it.
The water ripple behind the cursor is a real fluid simulation. The code runs a Stable Fluids solver on a texture at only a fifth of the screen's resolution. The cursor's movement adds force to the fluid, and the velocity decays by 2 percent each frame. The final post-processing pass shifts the image slightly in the direction of each pixel's flow and blurs it with 15 random samples. The faster the flow, the stronger the blur, and this is where the slowly fading ripple behind the cursor described earlier comes from. On desktop some objects in the scene also get the same random-sample blur for a hint of depth of field.
The project screenshot strips are drawn on the canvas too. Each project's screenshots are stored as separate KTX2 textures and mapped onto a row of planes, and a set of parameters decides how dragging feels. On desktop, the mouse movement times 3 adds up into a drag amount, nine tenths of which carries over each frame as inertia, and the strip closes 0.068 of the gap to the drag amount per frame. Once the drag speed falls below a threshold, the strip switches to easing onto the nearest screenshot at 0.055 per frame. On phones the whole set is tuned faster, with a multiplier of 4 and both following and snapping at 0.14, and a finger has to travel 85 pixels sideways before dragging begins.
The bee's flight is left to the steering behaviours of the game AI library Yuka. An invisible evader in the scene chases random target points, and the bee is a pursuer using a pursuit behaviour that predicts where the evader is heading, with its top speed capped at 2.5 units per second. The wing beat is just the wing model rotated by the cosine of time. When a visitor clicks to feed the bee, the code places an orange or a bunch of grapes at the click, sets it as the bee's new target, and triggers the swap of the big words once the bee arrives. The bee's lines are grouped into small talk, complaints when the cursor touches it and several full conversations, and the code draws each line at random without repeating the previous one. Sound is played through the audio library Howler from only four files, among them the ambient loop and the two fruit sounds for feeding.
The textures use the KTX2 compressed format, which stays compressed in video memory, while an ordinary image is unpacked to several times its file size. The site picks texture size by window width. Desktops at least 1600 pixels wide get 4096 pixel textures and narrower screens get 2048 pixel versions, and the small textures for the bee, the flower and the noise come in two sizes as well. The 3D models are compressed with Draco, with one scene model each for the home page and the About page and small models for the bee, the daisy, the orange and the grapes.
Picking textures by window width means desktop visitors download a lot. A visitor who opens the home page on a 1920 pixel screen downloads about 31 MB within a dozen seconds, mostly 4096 pixel scene textures, and that includes the About page's scene. The largest textures are the front and back tree layers and the ground on the About page and the floor on the home page, at 1.4 to 1.7 MB each. The largest single file is a 2.8 MB preview video of the showreel, followed by the About page's 2.3 MB scene model and a 1.1 MB grapes model. A 1366 pixel laptop gets the 2048 pixel textures and downloads only about 20 MB, and tablets and phones about 17 MB.
Even with that much to download, the layout appears quickly, and the screen first paints in 0.23 to 0.59 seconds. The 3D assets only start downloading once the page has loaded, so they do not hold up the layout.
Keyboard-only visitors cannot leave the home page of Léo Parpeix's portfolio, because keyboard focus never reaches the Work, About and Playground links in the header. Focus lands only on a nameless sound button and the project links, and there is no focus outline anywhere, so visitors cannot see where it is. Screen readers can read the page in its declared language, find a main heading carrying Parpeix's name and skip the decorative images, but the page has only one main landmark and no skip link. As for visitors sensitive to motion, even with the reduced motion setting turned on in their system, the opening window still turns and unfolds and the camera still travels through the rooms.
05Scores and Team
| Award | Source | Date | Score |
|---|---|---|---|
| Site of the Day | Awwwards | 2026-09-14 | 7.69. Design 7.79 / Usability 7.34 / Creativity 8.04 / Content 7.63 |
| Developer Award | Awwwards | 2026-09-14 | 7.47. Semantics 7.00 / Animations 8.40 / Accessibility 7.00 / WPO 7.20 / Responsive 7.80 / Markup 7.40 |
| FWA of the Day | The FWA | 2026-09-28 | 83 POINTS |
Among the four Awwwards design scores Creativity is highest and Usability lowest, and in the Developer Award Animations is highest while Semantics and Accessibility tie for lowest.
The FWA does not publish category scores, and the short description on its award page presents the site as the portfolio of Léo Parpeix, art director and interactive designer, who specialises in unique websites focused on innovation and user-centred design. The FWA filed it under Animation, Fun & Playable and Personal/Portfolio.
| Credit | Role | Record (as of November 11, 2026) |
|---|---|---|
| Léo Parpeix | France, art director and interactive designer at Locomotive | Awwwards works 5, SOTD 1, HM 5. FWA 1, as one of the credits on Gabriel Beaugonin's portfolio |
| Thoma Lecornu | Developer, no description on the Awwwards or FWA profile | FWA 1, this site |
The 10 Sites of the Day listed on the About page all came from studio projects and are not recorded on Léo Parpeix's own Awwwards profile.
Awwwards and the FWA credit the site differently. The Awwwards Site of the Day is recorded under Parpeix's name, but the FWA credited only Thoma Lecornu and left Léo Parpeix out, so the FWA award does not appear on Parpeix's FWA profile. The note under Credits in the footer acknowledges Lecornu's part. In it, Parpeix especially thanks Lecornu for joining the project and building it together, and also thanks Victor, Félix and Lucas for their help with the 3D.
06Archive
- Award date
- 2026-09-28
- Awards
- Awwwards SOTD 2026-09-14, Awwwards DEV 2026-09-14, FWA FOTD 2026-09-28
- Site
- https://www.leoparpeix.com/
- Credits
- Léo Parpeix, Thoma Lecornu
- Design
- spatial
- Build
- canvas
- Awwwards
- 7.69 / 10. Design 7.79 / Usability 7.34 / Creativity 8.04 / Content 7.63. Developer Award 7.47. https://www.awwwards.com/sites/leo-parpeix-portfolio-2026
- The FWA
- 83 POINTS. https://legacy.thefwa.com/cases/leo-parpeix-portfolio-2026-p3
- Stack
- Vite, Vue, three.js r153, Yuka, Lenis, GSAP, Howler.js, KTX2 compressed textures, Draco
- Total assets
- About 31 MB on desktop, mostly 4096 pixel KTX2 scene textures. About 20 MB on a laptop, about 17 MB on tablets and phones
- Speed
- FCP 0.23 to 0.59 s, CLS 0. Continuous scroll on the home page, About and Playground at 60 fps