Gil Huybrecht

Gil Huybrecht is a freelance designer and art director from Bornem in Belgium who designs editorial websites, meaning sites laid out with the care of a magazine, and Huybrecht is on the Awwwards jury for 2026. The one-line description Huybrecht wrote for the site on Awwwards calls it a new portfolio with the latest work, current availability, and more about the designer and the services on offer. This version of the portfolio holds 19 projects from 2018 to 2026, for clients including the auction house Sotheby's, the earplug brand Loop Earplugs, two New York residential towers (53 West 53 and 111 West 57th Street) and the branding agency Motto. Huybrecht handles only design and art direction on these projects, and the ones that needed building went to other developers. Two of the project notes are frank about it. Fantasy says most of the design went unused, and Loop Earplugs says the designs were a guide for the client's internal team.

The home page has no introduction, and the header puts what visitors most want to know on the first screen. From left to right it lists the name, availability (Available September 2026), three services, seven lines of awards, Profile and Email me, and only after a wide band of black does the work begin. The order is written for prospective clients, who know when the designer is free, what the designer does and how many awards the work has won before they see a single project.

The work can be seen three ways. The first is the grid on the home page, where each project takes as many cells as it has screenshots. When a visitor clicks any cell, that project opens on the right of the screen. The left side holds a one-line description, a link to the live site and three or four lines of project details, and the right side holds every image and video of the project, 7 to 25 per project. The second is Gallery, switched on in the bottom left, where each of the 19 projects keeps one image at its own size, staggered down the page. The third is the Profile page, five numbered sections covering an introduction, an approach, services and clients, a monthly design newsletter, and TIWD (Typography in Web Design), the editorial web design course Huybrecht runs.

The path from the site to a conversation is short. Email me in the header copies the address with one click, the newsletter section on Profile has a sign-up form, and the course section links straight to the course website.

The Star Wars edition behind the bottom-right switch adds no work. It gives the same projects a different atmosphere, with its own colours, cursor, music, sound effects and a few hidden controls, finished as fully as the normal site. The choice holds only for the current browser tab, so a visitor who opens a new tab sees the normal site again.

Apart from the paragraphs on Profile and the big title on the privacy policy page, Huybrecht uses one typeface at one size across the site, and hierarchy comes only from position and space. The typeface is Lay Grotesk in its medium weight alone, and the header, project names, numbers, footer, project descriptions and switches all share one size. All type scales with the window width, at about 20 pixels on a 1920 pixel screen and about 15.5 on a 1366 pixel laptop, and the line height is only a tenth more than the type size, so stacked lines sit tight. The Profile paragraphs enlarge the type to more than four times the home page size, set the line height a tenth below the type size and tighten the letter spacing by two percent. The same typeface is a small label on the home page and a full-screen statement here, with no size in between.

The grid divides the screen into 14 columns, each about 118 pixels wide on a 1920 pixel screen, with gutters of about 17 pixels and one gutter of margin on each side. When visitors hold Shift and press G, the 14 columns appear as pale grey bands over the page, a guide the designer left in for aligning things. Each work cell spans two columns and a row holds seven cells, while each cell's height follows its screenshot's proportions, so the bottom edge of every row is ragged, like proofs pinned along a wall. A project's name appears only on its first cell, and the cells after it carry only the number in their top right corner, which tells visitors they are still inside the same project. The 84 cells of the 19 projects run to 12 rows, and the home page ends in under six screens.

The normal site's palette is almost only black (#000000) and white (#FFFFFF). Secondary switch labels are white at 40 percent opacity, which reads as grey. The two switches at the bottom of the screen are small pills in a dark grey (#2C2C2F) at 60 percent opacity that also blur whatever lies behind them, so they stay readable as screenshots scroll underneath. The header text uses a difference blend, so it turns black wherever it sits over a white screenshot. In the Star Wars edition every piece of text turns the same bright yellow (#FFE81F), the shade usually quoted for the Star Wars opening crawl, and the saber blade is an electric blue (#3A8CFF).

The interface parts are all small, and each one shows its state only through a change of colour, background, a thin outline or wording. In the two switch pills, the selected item is white, the other is 40 percent white, and it turns 70 percent white under the cursor. In the header, the current page (Profile, for example) gains a rounded grey background. Email me changes to Copy email under the cursor and to Email copied after a click, then returns to normal a few seconds later.

The cursor and the Profile lists use the same restrained changes. The cursor itself stays the browser's own, with a small label beside it. The label's wording changes with its position, reading Back or Focus inside a project, Close over an enlarged image and Click to enter before the Star Wars edition opens. When the cursor rests on a row in a Profile list, a translucent frosted bar appears behind that row, with a plus sign or an arrow at its right end.

The site has one kind of image, screenshots of websites Huybrecht designed, from first screens and inner pages to full-length captures. They go up as they are, without frames, shadows or colour grading, so the grid reads as rows of browser windows laid flat on a black wall. Eight of the 84 cells on the home page are videos, also screen recordings, playing muted on a loop.

The phone layout of Gil Huybrecht's site is simpler. The grid has two columns and each project shows only its name and first two screenshots. The header stays fixed at the top and shrinks to the name and two links, Profile and Email me, and neither the Star Wars switch nor the Gallery view appears. When a visitor taps any image, the project opens as a page of its own, with the description, project details and every screenshot from top to bottom, and a Close button floating at the bottom. Tablets keep the desktop grid of seven across, but the type shrinks with the width to about 9 pixels, smaller than the 17 pixels on a phone, and becomes hard to read.

Gil Huybrecht's home page opens with a wall rising from the bottom of the screen. When a visitor arrives, the middle of the screen shows a percentage running from 0% to 100%, and it is waiting for every screenshot and every video of all 19 projects to finish downloading. When the count completes, the black cover fades out over 0.6 seconds and each cell of the grid rises from the bottom edge of the screen into place, its project name and number rising with it. Each cell takes 1.3 seconds, starting fast and easing gently into place, and each one leaves 0.075 seconds after the one before, so the wall comes up cell by cell and row by row.

When visitors scroll the home page, the page does not jump to the new position but catches up with the wheel frame by frame. Each frame the page covers only 15 percent of the remaining distance, so after the wheel stops the page glides a little further, and each notch of the wheel moves the page a quarter further than usual. Scrolling the home page from top to bottom holds a steady 60 frames per second.

When the cursor rests on the grid, the grid dims the other projects rather than the one under the cursor. Whichever project the cursor is on, the cells of the other 18, with their names and numbers, drop to 20 percent brightness within 0.25 seconds, and only the current project stays fully white. Visitors can see at a glance which cells belong together without reading a single name.

The site's main motion is a project's screenshots flying from the grid into the large frame on the right. After a visitor clicks a cell, the other projects first dim to just over a tenth of their brightness. About a quarter of a second later all the cells of this project take off together, each heading for its own place in the right-hand column. Each image moves the corner nearest its destination first while the rest follows, and its middle arches up towards the viewer like a sheet of paper being lifted, the raised part brightening slightly. The flight covers nearly 90 percent of the distance in under half a second and spends almost another second settling the rest, so the take-off is crisp and the landing soft. As the images fly, the description and details in the left column push up line by line, each line rising as if out of an invisible slot.

Closing a project does not replay the opening in reverse. About a quarter of a second after a visitor clicks the left column to return to the grid, the large images still on screen start shrinking back into their cells, over 0.75 seconds with a slow start and a slow finish. This time the part nearest the middle of the screen's right edge moves first and lifts towards the viewer, so each image looks rolled back up from the right, while the other projects return to full brightness over the same stretch.

With a project open, the wheel moves only the right-hand column of images, and any image that leaves the top of the frame joins the end of the queue, so scrolling down never reaches an end. When a visitor clicks one of those images, it flies once more, up to the middle of the screen, while the left column fades out. Another click sends the image back to the column. Opening a project, scrolling it and closing it stays at around 60 frames per second throughout.

Switching between the grid and Gallery puts no cover over the screen at all. When a visitor clicks Gallery in the bottom left, the first screenshot of each project flies straight from its place in the grid to its card in Gallery, the other screenshots fade within 0.2 seconds and the Gallery text fades in over 0.3 seconds. The flight again starts fast and lands slowly, and the whole set settles in about a second and a half. Switching back sends the screenshots home to their cells, and the page scrolls itself to the project the visitor was just looking at in Gallery, so changing views never leaves anyone lost.

The hover effect in Gallery ties the two views together. When the cursor rests on a card, the header fades out within a quarter of a second and the other cards dim to 20 percent within 0.3 seconds. All of this project's screenshots then line up in a row at grid size across the top of the page, where the header was. The card's own image flies up too, leaving only a thin white outline with the project name in it. When the cursor moves away, the screenshots fly back into the card and the header returns.

Going from the home page to Profile uses another kind of transition. A black cover first takes 0.35 seconds to fill the screen, the page changes behind it, and the cover takes another 0.35 seconds to lift. The small numbered labels on Profile then fade in one after another, 0.6 seconds each and 0.15 seconds apart.

The large type on Profile rises line by line, like the left column inside a project. Each line moves up into place from just below its own position, and whatever lies outside that line is cut away, so the words seem to come up out of a row of invisible slots. Each line takes 1.5 seconds, fast at first and slow at the end, and the next line starts 0.1 seconds later. The first paragraph starts as soon as the page opens, and later paragraphs wait until the visitor scrolls them into the bottom fifth of the screen, with a following paragraph picking up the rhythm from the last line of the one before.

Profile also has a card that flies the length of the page between three positions. It starts upright in the left column beside the introduction. As the visitor scrolls down, it flies to the middle of the page beside the newsletter section and back to the left column beside the course section, turning over exactly half a turn on the way to each. Between two positions the card leans forward by more than 20 degrees. The faster a visitor scrolls, the higher the middle of the card bulges, like paper bent by the wind, and about half a second after the wheel stops the card flattens again. The card follows the scroll position but half a beat behind, still catching up a little after the wheel stops.

Along the way the card changes through 34 different project screenshots, and each change comes with a soft click of sound. When a visitor opens the newsletter or services window, the card flies off the page into the image slot on the left of the window and switches to an image made for that window. Profile scrolls at 60 frames per second throughout.

The site on phones has none of these flights. Visitors swipe the grid up and down, tap a screenshot to jump to that project's page and tap Close at the bottom to go back, but they land at the very top of the home page rather than where they were. Profile on a phone becomes plain text, and the flying card becomes an image held near the bottom of the screen that changes, one picture after another, as the visitor swipes down.

The Star Wars edition brings its own motion. When a visitor flips the switch, the whole page reloads, the loading percentage turns yellow and the background becomes a field of stars. When loading finishes, the cursor becomes a lightsaber with a line of yellow text beside it, Click to enter. A click sounds the saber igniting and the Star Wars theme together, and the header and grid fade in over half a second. From then on the saber hums low, louder and higher the faster it swings. As the saber nears a screenshot, a ring of blue light rises on the image, brighter the closer the blade comes.

The saber's real trick is that it burns through screenshots. When a visitor swings it fast across a screenshot, the blade leaves a glowing slit along its path. The slit has a white-hot line at its centre and molten orange edges, the hottest part burns open into a black gap, and the image on both sides is pushed slightly apart, like torn paper. A fraction of a second later the slit cools and closes, leaving a scorched brown mark with scattered orange embers, and after about a second the embers go out and the screenshot is whole again. The saber burns only when it moves fast enough, a slow pass only casts blue light, and a swing through the stars between screenshots leaves nothing behind. Swinging back and forth holds 59 to 60 frames per second.

The edition's other controls come with no hints at all. When a visitor holds the mouse button for more than 0.35 seconds, the stars stretch into lines streaming out from the middle of the screen, like a ship jumping into hyperspace, and they slowly return when the button is released. Changing pages in this edition drops the black cover, and a wipe erases the old page to reveal the new one behind it. The wipe runs at an even speed for one second, in one of four shapes chosen at random (left to right, right to left, an expanding circle or a clock-hand sweep), and never the same shape twice in a row.

When a visitor holds F on Profile, after 0.35 seconds everything else on the page fades out within half a second and the saber retracts. The five paragraphs of introduction then become a justified, slanted yellow crawl that appears within half a second. The text scrolls upward and narrows into the distance like the opening crawl of the Star Wars films. A small line beside the cursor reads Release to go back, and when the visitor lets go of F, the crawl fades within half a second, the saber ignites again and the page returns. The crawl also holds a steady 60 frames per second.

On desktop, Gil Huybrecht's site draws the screenshots, the videos and the large Profile type on one full-screen WebGL canvas driven by three.js. The page itself holds only 84 empty placeholder cells, each carrying an id, a project name, a number and an aspect ratio, and the canvas places textures by those cells' positions and sizes. Every image is a plane mesh of 32 by 16 segments sharing one custom shader, so the hover dimming, the flights and the saber's blue light are all changes to that shader's uniforms.

The flights connect across pages because planes are registered by id. The site keeps one plane per id. When a page change, a view switch or an opening project removes the old placeholder, a new page adds a cell with the same id. The plane finds that cell on the next frame and flies there from where it is. Grid to project, grid to Gallery and project to the zoom layer all use this one mechanism, so a Gallery card and a large image in a project are the same texture landing in a different place. Textures live in a reference-counted cache of up to 64, and old ones are freed only when nothing uses them.

The flight's deformation lives entirely in the vertex shader. The shader receives the start and end rectangles and interpolates between them by progress. Each vertex's progress is staggered, with the vertices nearest the destination moving first and the farthest up to 22.5 percent behind, and each vertex then gets its own ease-out curve. Vertices also lift along z on a parabola that rises and falls with progress, highest in the middle and on the leading side, and the fragment shader brightens the colour by up to 22 percent according to that lift. A custom three-segment Bézier curve drives the whole progress over 1.5 seconds, reaching 88 percent in the first 0.52 seconds.

When a project closes, the shader switches mode and works from the midpoint of the screen's right edge, moving the vertices near that point first, bending their paths towards it and twisting the whole image into a bow. The close takes 0.75 seconds on GSAP's power3.inOut.

The site draws the large Profile type on the canvas too, so the words can join the page wipes, catch the saber's light and become the opening crawl in the Star Wars edition. The site first lays the paragraphs out in the page, measures each line character by character, then draws each line into a 2D canvas texture with fillText and sets the page's own text to transparent. Each line becomes a separate quad on the canvas, the vertex shader raises each line by one line height on its own progress, and the fragment shader cuts away anything outside that line, with an exponential ease-out. Each line takes 1.5 seconds with 0.1 seconds between lines, started by ScrollTrigger when a paragraph enters the bottom fifth of the screen. The left column of a project instead uses GSAP's SplitText to split its text into masked lines that rise the same way.

The flying card on Profile is a separate 3D plane. The site places three invisible anchors on the page and interpolates the card's position and size between them along a Catmull-Rom curve, with ScrollTrigger driving the progress from the scroll at a scrub of 0.75 seconds, so the card trails the scroll half a beat behind. The card's angle around the vertical axis is the progress times half a turn, and between anchors it also tips forward around the horizontal axis. The site smooths the rate of change of progress into a bend amount, and the vertex shader pushes the middle of the card up along a sine curve across its width and recomputes the normals. One fixed light shades the result, so the card has real light and shade as it bends. The back of the card shows its image mirrored and darker.

Page transitions are chosen by destination. Phones and tablets get a black cover fading in and out, the desktop uses the flight when switching between grid and Gallery and the black cover with the screenshots rising again between other pages, and the Star Wars edition uses a shader wipe. The wipe lives in every plane's fragment shader, with the entering and leaving planes getting masks in opposite directions, and all four mask shapes keep a soft band at their edge.

The Star Wars edition swaps in a complete rendering pipeline of its own. The site renders the screenshots and type into a render target with four-sample multisampling, draws the stars to the screen, composites the render target back with a full-screen shader and draws the saber last. The saber is a 3D model built straight from three.js geometry, with a hilt of a few cylinders lit by a matcap material. The blade is a thin near-white core inside four blue capsules, each wider and fainter than the last and drawn with additive blending into a halo, and a fading ribbon trails behind it as it swings. The blue light on the screenshots is computed in the fragment shader, falling off exponentially with each pixel's distance from the saber. The hum is a looping sample played through Web Audio, with volume and playback rate rising with the saber's speed, and the sound on/off choice is saved in the browser.

The burns are recorded in a 1024 by 1024 floating-point texture that the site ping-pongs between two targets every frame. Its four channels hold heat, char and the stroke's direction. A fixed point on the blade traces a segment from last frame to this one, and the site stamps a Gaussian line of heat into the texture by distance. The blade leaves a mark only once it moves more than about 0.4 percent of the screen in one frame, and the mark reaches full strength at 1.6 percent. Heat decays exponentially every frame and falls low within about 0.35 seconds, while char builds up from heat and decays at its own rate. When a visitor scrolls, the texture shifts with the page, so a slit stays on the screenshot it was cut into.

The composite shader reads this texture and turns heat into an image. It burns only where there is content, judged from the render target's alpha, so a blade through the stars leaves no mark. The hottest areas become a near-black void, and the ring around it lights up through a fire ramp from white to orange to dark red. The image on either side of the void is offset away along the heat gradient to tear it open, and it closes again as it cools.

What a cooled slit leaves behind is char. Where char is high, the image is mixed towards a sooty brown and sprinkled with noise-picked orange specks as embers. The shader also distorts the nearby image slightly with high-frequency noise, so it reads as curling paper. Comments the developer left in the shader source explain the choice. Burning paper curls and does not flow like a liquid, so the distortion noise has no fixed direction and appears only during the fraction of a second the blade is still cutting. The site stops updating the texture two seconds after the blade stops moving.

The stars and the opening crawl are on the same canvas too. The stars are 2,600 point sprites in a long tunnel, flying towards the camera. After a visitor holds the mouse button for 0.35 seconds, their speed eases from 16 units per second up to more than 2,800, and each point grows a line segment behind it to make the hyperspace streaks. The crawl reuses the text texture already drawn on Profile, placing it in a group tilted back 62 degrees and pushing it up 4.2 units per second, so perspective narrows it into the distance while two fade bands dissolve it at both ends.

Screenshots are stored as KTX2 compressed textures of 1500 by 1000 pixels with their own mipmaps. A manifest file maps each image address to its compressed version, and the browser uses a 226 KB WebAssembly transcoder to turn them into a format the visitor's graphics card can use directly. The loading percentage on the home page is waiting for these textures and every video, because the site fetches every image and every video of all 19 projects before it shows the grid, so no project ever opens to an empty cell. The site is built with the Vue-based framework Nuxt, styled with Tailwind, with content in the DatoCMS content management system, videos hosted on the video platform Mux and animation handled by GSAP 3.15.

Fetching everything up front makes desktop visitors wait at the start and download a lot. The server returns the first byte in 0.06 to 0.29 seconds, the screen paints its first content in 0.1 to 0.34 seconds, and the page barely shifts while loading. But visitors can only scroll and click once the percentage reaches 100%, and the page unlocks between 2.6 and 4.5 seconds, with about 46 MB downloaded around that point. After the grid appears, the site keeps preloading the Profile images and videos while the browser is idle, bringing the total to about 69 MB within a dozen seconds, of which about 44 MB is video and about 22 MB KTX2 textures. At least six of the home page videos are downloaded in full twice at the start, wasting about 11 MB. Switching to the Star Wars edition adds about 4 MB of audio.

Phones and tablets never create a WebGL canvas, falling back to ordinary image and video elements, and projects open as pages of their own rather than as a window. The site checks the device with a media query at load and enables the canvas only for a precise pointer that can hover and a window at least 650 pixels wide, so a touch tablet never gets the canvas however wide its screen. A desktop visitor who drags the window below 650 pixels gets an automatic reload half a second later into the other version. The phone home page downloads only about 4.8 MB and the tablet about 9.4 MB. The site also hides an invisible autoplay test video, and if it fails to play (in iPhone Low Power Mode, for example), the page's videos become still images.

Gil Huybrecht's site lays a good foundation for screen readers but shuts keyboard-only visitors out of the work. The page declares its language, marks its landmarks, names every control, and labels the project window as a dialog that closes with Esc. Yet the 84 cells are only placeholders and none of them is a link, so Tab cycles between the three header controls and the footer links, reaching neither the view switches nor any project. The site reads the system's reduced motion setting but never uses it, so with the setting on, the screenshots still rise from the bottom of the screen and the stars and saber still move.

Gil Huybrecht's site first won FWA of the Day on 1 August 2026 with 83 points, then Awwwards Site of the Day seven weeks later. Its four Awwwards scores are Design 7.93, Usability 7.33, Creativity 7.46 and Content 7.92, with Design and Content highest and Usability lowest. Usability trailing the other three fits the work being unreachable by keyboard and the few seconds of waiting before anything can be used.

The site scored 7.4 for the Awwwards Developer Award, which judges front-end development on its own. The developer jury gave Animations 8.4, the highest of its six categories. Semantics, which judges whether the page uses the right elements for its structure, got only 6.6, which fits the 84 blank cells that are not links.

Gil Huybrecht and Jesper Landberg divide the site cleanly. Huybrecht designed it, and the grid, the single type size and the full-screen type on Profile are Huybrecht's usual editorial approach, while Profile mentions that Huybrecht's course has taught more than 400 students. Landberg built it, with 32 Site of the Day wins on Awwwards and 41 FWA awards, and describes the work on the profile as creative development focused on motion and refined digital experiences. The two work together often, and 11 of the 19 projects on the site credit Landberg as developer, including The Lookback, DoThings and 53 West 53, while Jesper Westlund built three and the rest each had a different developer.