Guillaume Colombel

Guillaume Colombel has folded his whole portfolio into a single object, a stone that always stands in the middle of the screen. A portfolio usually takes the form of a thumbnail grid or a list in which each project opens into a case study page, and this site replaces all of that with the one stone. The titles of the twelve projects are set as 3D lettering in a ring around the foot of the stone, and the title facing the visitor is the current project. Each time the visitor turns the mouse wheel, the ring rotates one step to the next project.

The stone does not simply appear when the page opens but is built up in front of the visitor step by step. A thin line first traces its outline, the stone then becomes a wireframe of triangles, and a few small boxes resembling software windows pop up with the labels wireframe, clay, uv, normals, transmission and beauty. These six words name the views a 3D developer checks while tuning a model. In order, they are the wireframe, a plain untextured clay model, the checkerboard of texture coordinates, a colour map of which way the surface faces, the effect of light passing through and the final render. Once the windows close, a layer of square pixels flips the whole picture over, and only then do the plain and the stone appear in full. Colombel makes his living writing 3D code, so this opening amounts to a live demonstration of how he tunes a model.

After the opening, all twelve projects share the same stone and the same plain, because each project is not a page of content but a set of numbers. The numbers for the stone decide how dense and thick its bright veins are, how wide the horizontal bands are and how solid the stone looks overall. The numbers for the plain decide the water level, the thickness of the fog, how far the view reaches, how many plants there are, how much the ground rises and falls and whether it is night. Each project also has a main colour, such as red for CLARTÉ and sky blue for Chris Macari. When the visitor moves to Chris Macari, the sky turns teal, the fog thickens and the bands in the stone turn yellowish. On 1 Million Black for the fragrance house Rabanne, the sky goes completely dark and the stone glows like a lamp in the night. Colombel does not need to paint twelve separate pictures, since tuning one set of numbers per project is enough to generate twelve clearly different scenes.

The content of each project is hidden inside the stone. When the cursor moves onto the stone, a crack opens across it and a faint cracking sound starts to play. When the visitor clicks, the whole stone shatters, and the fragments stop in mid-air to form an irregular frame around the project's cover. Some of these covers are a still image and some are a looping video.

Once the stone has broken open, a project description of one or two sentences appears in the bottom left, along with the collaborators, the year and a Visit website link. At the same time, the address in the browser bar changes to the project's own address. When the visitor clicks Close in the top right or presses Esc, the fragments fly back into place and form a whole stone again.

The idea of the stone carries through to the very edges of the site. A visitor who types an address that does not exist gets a 404 page with the line Nothing stands here, and the link back reads Back to the stone. The About page, where Colombel introduces himself, is set on the same plain.

The whole picture has a single subject, and it always stands in the centre. The stone fills more than four fifths of the page height from the top down, shaped like an upright pebble with slightly irregular edges. It looks like translucent onyx, with horizontal bands of colour running through it and fine bright veins creeping through the bands. Light shows through the stone, which makes it the brightest object on the dark plain. The horizon behind it sits a little below the middle of the frame, with rolling dunes, scattered plants and a stretch of shallow water in the distance, and the sky grades from light at the horizon to dark overhead.

Colombel's interface has almost no colour of its own, and every colour in the picture comes from the current project's numbers. The interface uses only two colours, a near-black #050404 and an ivory #f0ebe2. All the interface text is a pale shade close to that ivory, and opacity from 55% to 92% sets which text comes first and which comes second. The sky blends three colours for the horizon, the middle and the top, and the fog and the fragments also follow the current project's main colour. A very faint layer of grain covers the whole picture and gives the clean render a slight film quality.

Only two typefaces appear on the site, and all of the web text is set in Neue Montreal. The name in the top left, About in the top right, the project descriptions and the buttons are all small, at 12 to 14 pixels. The large titles at the foot of the stone use the second typeface, a very heavy, wide sans-serif in capitals only. These titles are not web text at all but 3D lettering drawn on the canvas. The code draws them from a glyph atlas (MSDF) that records how far each pixel is from the edge of a letter, so the lettering stays crisp at any size. The title facing the visitor is filled in solid white, while the titles turning away to the sides keep only their outlines and bend along the curve of the ring, so the current project is obvious at a glance.

Opening a project reverses the order of importance in the picture. The stone that glowed in the centre becomes a ring of fragments, their outer shells in the project's main colour and their inner faces dark, and they retreat to the edges of the screen to act as a frame. The cover image or video becomes the only bright area in the picture, and the project title still sits across its bottom edge. The description in the bottom left is only three or four lines of small text, so it never competes with the cover.

The moment the stone breaks is the most important piece of motion on the site. The fragments first burst outward from the point where the stone cracked, spinning around their own axes, and all of them sink a little as they spread before coming to rest in mid-air. When the visitor closes the project, the fragments fly back along the same path and rebuild the whole stone.

The fragments are not dozens of separately calculated objects but a single mesh. Each fragment stores which way it flies, which axis it spins around, how fast it spins and how far it travels. The shader, a small program that runs on the graphics card, takes a single opening progress value running from 0 to 1 and works out where every fragment should be at that moment. On closing, the same value simply runs back to 0. The whole effect needs no physics engine, since the graphics card draws every fragment in one go. The breaking stone runs as smoothly as the site does when still, under hover or while switching projects, holding 60 frames per second, about 16.7 milliseconds a frame, with no frame over 32 milliseconds.

Once the fragments have settled, each line of the project description slides up from beneath a mask. When the cursor rests on Visit website in the last line, its letters move one after another.

A project change does not cut from one scene to the next, because the whole plain gradually transforms. When the visitor turns the mouse wheel, the ring of titles rotates one step while the colours of the sky, the fog and the water shift slowly together and the stone's veining changes to a new pattern. A few birds fly in the distance, the water ripples slowly and the plants glow against the light, so the picture keeps moving even when the visitor does nothing.

The site's sound is synchronised with the picture, so when the cursor rests on the stone a looping cracking sound fades in and fades out again when the cursor leaves. The shattering recording reaches its moment of breaking only at 1.45 seconds. The code therefore either skips ahead or waits a moment according to the animation's progress, so that the sound lands on exactly the frame where the stone bursts. Each notch of the mouse wheel also brings a short turning sound, and a quiet ambient track loops in the background the whole time. On touch devices such as phones and tablets, none of this sound is loaded.

The opening demonstration lasts much longer than the loading itself, since the resources are ready at about 2.5 seconds but the full opening takes 7 to more than 9 seconds before the visitor can do anything. The site offers a shortcut to visitors who turn on the reduced motion setting, an operating system switch for people who feel unwell when things move on screen. With the setting on, the opening is skipped entirely and the complete stone is visible after 1.8 seconds, while the line-by-line slide of the project description and the various transitions are switched off as well.

Colombel built the site with Nuxt, a web framework based on Vue that generates pages on the server in advance. The 3D part uses the WebGPU renderer in three.js. WebGPU is the newer graphics interface in browsers and works in a way closer to how the graphics card itself operates than WebGL does. When a browser does not support WebGPU, the same code automatically falls back to the older WebGL2 interface. The materials are written in TSL, the shading language of three.js, which lets developers write shaders in JavaScript and has three.js translate them into WebGPU or WebGL code, so a single material runs under either interface.

The whole 3D scene downloads no model files and no environment maps. The terrain of the plain is a flat grid, which the code pushes into dunes, ridges and hollows with several layers of noise at different scales. Each project's terrain numbers then exaggerate or flatten the heights. The environment map the stone uses for its reflections is also generated by code on the spot, at only 64 by 32 pixels. The stone's pattern has no image file behind it either and is most likely calculated from noise as well, so switching projects only means changing a few numbers and requires no further downloads.

Colombel's portfolio downloads only about 2.0 MB on a first visit, of which the cover images are 992 KB and the scripts 729 KB. Most of the rest goes to the glyph atlas for the large titles and the fonts. All 8 cover images download with the first screen, even though the visitor has not yet opened a single project. The video covers, by contrast, wait until the visitor opens the matching project, and the largest of them is 4.9 MB. A visitor who opens all twelve projects downloads 23.5 MB in total, of which the videos account for 20.5 MB and the five sound effects about 1 MB.

The first things on the page arrive quickly, with the server returning its first byte in 192 to 297 milliseconds and the browser painting the first content (FCP) in 468 to 584 milliseconds. Both figures are within the 0.8 seconds and 1.8 seconds that Google recommends. The largest content (LCP) lands at 4.5 to 7.0 seconds, beyond Google's recommended 2.5 seconds. However, what the browser counts as the largest content is the label text on the opening windows, such as wireframe and transmission, while the visitor is really waiting for the opening to end. Nothing on the page jumps out of place during loading, and the layout shift score (CLS) is 0.

Colombel split the loading itself into eleven stages, from setting up the renderer and generating the terrain and its decoration to building the stone and its fragments and finally compiling the shaders in three batches. Between stages the code deliberately pauses so the browser has room to respond to input, and the loading progress on the page advances stage by stage. Even so, loading still includes 5 long tasks, stretches when a script keeps the browser too busy to respond to input. Each lasts 55 to 144 milliseconds, and they cluster between 1 and 2.5 seconds, exactly while the shaders are compiling.

Colombel also gives keyboard and screen reader users a complete route through the site. A list of links to the twelve projects is tucked away on the right side of the page at a size of just 1 pixel. When the visitor presses Tab to move the focus onto one of them, the ring of titles turns to that project and a label showing its number and name lights up on the right of the screen. Pressing Enter opens the project and Esc closes it again. The sound toggle has a name a screen reader can announce and states whether sound is on or off, and the browser remembers the visitor's choice for the next visit.

Guillaume Colombel's portfolio scored 82 points at the FWA, which does not publish category scores, and he is the only person credited on the award page.

This is the fifth FWA of the Day in Colombel's own name, after earlier wins in 2020, 2021, 2024 and 2025. On his About page he says he has been an Awwwards juror since 2019 and lists 15 Awwwards Sites of the Day, 15 Developer Awards and 10 FWA of the Day wins. The About page shows more FWA wins than his own name carries, and the extra ones are most likely projects he worked on while employed at studios.

The projects in the portfolio also trace his career. Kaizen and Magical Pantry in the list were made during his time at makemepulse, while CLARTÉ is a brand he founded himself, which the About page says grew out of a period of illness. His previous portfolio, Portfolio 2024, is in the list too. That version won Awwwards Site of the Day and the Developer Award in October 2024, and the list notes that the designer Maxence Henric designed it, whereas the FWA lists no designer for the new version.