Jesper Landberg

On projects for international studios, Jesper Landberg usually works as the lead or only developer. In the site's newsletter note, Landberg writes of more than a decade of freelancing. Landberg's previous portfolio, jesperlandberg.dev, won FWA of the Day back in 2020, and Awwwards named Landberg Independent of the Year twice, in 2022 and 2024.

The site also carries a note for AI tools, the file llms.txt, which says Landberg normally joins projects that already have a designer or design studio attached, building from the design partner's work without replacing the partner. The same file names the best fit as sites where motion, WebGL or interaction is the design itself, such as brand sites, product launches, portfolios and campaign pieces. On the site Landberg put only a two-sentence introduction, one line listing 77 awards, eight featured projects and a full project index. Landberg left the rest of the space to the presentation itself, so that the site makes the second of the two points above on its own.

When the visitor opens the site, the screen stays black for about half a second before three short dashes appear in the middle. A few seconds later the dashes turn into the cards of the home page. The home page is a black space with a grid laid across the floor and running into the distance. Eight rounded cards form one curved ribbon across the middle of the frame, each playing a project's film or showing its pictures, with the project name in its bottom left corner. The visitor can drag the ribbon or turn the scroll wheel, and the ribbon flows in one direction, wrapping from the last project back to the first.

When the visitor opens a card, that card grows into a full-screen white sheet, which is the project page. The left column of the project page holds the project name, a one-sentence description, an external link button and the year, and some project pages also carry a gold trophy. The right column holds a stack of screenshots and films that the visitor can keep scrolling through. Thin slivers of the neighbouring projects show beside the left and right edges of the white sheet, and one click on a sliver switches the page to that project. Pressing Escape or clicking the cross in the top right corner takes the visitor back to the home page.

Besides the ribbon, the home page has four tiny entry points, one in each corner of the screen, all set in capitals. Landberg's name sits in the top left, PROFILE in the top right and NEWSLETTER in the bottom right, while FEATURED and FULL in the bottom left switch between the featured projects and the full list. In the FULL view, all 23 projects are set as one centred passage of text, with dots between the names, so that it reads like a table of contents. PROFILE and NEWSLETTER open the same black hole in the middle of the screen, the first holding the introduction and social links and the second an email signup for the occasional front-end notes Landberg writes.

The rule of the whole site is black ground, white type, and colour only from the work. The background is pure black (#000000), the navigation in the four corners is set in small white (#FFFFFF) capitals, and almost every colour on screen comes from the screenshots and films on the cards. In the code comments, Landberg writes that the background was once a gradient, and later a nebula with a star field and a purple sun setting behind the horizon. Landberg eventually removed all of it, leaving a single colour. The black therefore makes the gold sphere of Casa Di Solare, the pink lettering of Nathan Riley and the red testimonial cards of Griflan look especially bright.

The floor is the only surface in the space that lies flat, and Landberg put more care into it than first appears. Landberg keeps the grid lines at very low contrast, and a comment says the grid should be the second thing a visitor notices, because a brighter grid would turn the site into a different genre. The grid stays still while the ribbon flows, because, as Landberg puts it, a floor sliding under the cards is a treadmill, and a room does not move. Landberg draws no horizon line either, and the floor dissolves into the black with distance. A narrow dark band sits under the bottom edge of the cards so that they look as if they stand on the floor. The cards' reflection appears only inside the grid lines, while the floor between the lines stays pure black, so the lines look slightly wet and the floor never reads as a mirror.

The site's own text uses a single sans-serif typeface, ABC Diatype Plus, in a regular and a slightly heavier weight. The type scales with the window width, with body text at about 18 pixels on a 1920-pixel desktop and about 13 pixels on a 1366-pixel laptop. The corner entries are tiny all-caps words pressed against the edges of the screen. In the FULL view the project names grow to two or three times the size of the navigation, in upper and lower case, set in six lines across the middle of the screen.

Cards are the site's main component, and they take two forms, one on the home page and one on the project page. On the home page Landberg links the cards into one continuous ribbon whose depth follows a gentle S, near the camera on the left and far on the right, with the centre card facing the visitor. Each card carries its project name in small white letters at the bottom left and a black round arrow button at the bottom right. Once the visitor opens a card, the same card turns into the white project page, which forms the strongest light-dark contrast on the site against the black space. Its left column holds very few words and a lot of empty space. The trophy on the project page is a faceted, low-poly gold metal model, and a thin ring in the page's bottom left corner draws itself round lap after lap as the visitor scrolls down.

The black hole that appears when the visitor opens PROFILE is the hardest picture on the site to read at first glance. Its edge is a thick ring that looks like glass tubing or metal, with thin red, green and blue fringes. The ring is in fact the page behind the hole, which the site bends into a ring by simulating the hole's gravity. So the colour of the ring depends on which card happens to be behind the hole, chrome when a white card is behind it and pink all the way round when the pink Nathan Riley card turns behind it. Inside the ring is pure black, with the introduction, the line of 77 awards and four social links set in small type in the middle, while a few glossy black alpacas drift slowly in front of and behind the words. Landberg's email address and X account both use the name alpacka, which is Swedish for alpaca.

NEWSLETTER uses the same black hole, with a short note, a capsule-shaped email field and a round white arrow button inside it. When the visitor clicks into the field, its thin white border turns into a rainbow whose colours flow slowly around the edge of the capsule.

On phones the site turns the horizontal ribbon into a vertical column of cards, which the visitor swipes up and down. Every card still carries the round arrow button in its bottom right corner to show that it can be opened. The project page moves its close button from the top right to the bottom right, where a thumb can reach it. The black hole scales with the width of the screen, but the phone layout sets the hole's disc itself slightly wider than the screen, so both sides of its ring run off the edges, and the alpacas are still inside. The FULL view fits on one phone screen in ten lines holding all 23 project names.

On a tablet held upright, the site does not switch to the phone's column of cards and keeps the desktop's horizontal ribbon instead. The ribbon fills only a band across the middle, with a large black void above and below it. The corner entries also shrink with the window width, to a little over four tenths of their desktop size, which makes them hard to read.

The three short dashes at the start double as a loading bar. They lengthen as the files load, which takes a little over two seconds on a first visit and much less on a return visit, when the files are already in the browser. Once loading is done, the dashes swell into three small capsules that already show project pictures, and then the capsules fly apart and grow into the home page cards while the floor grid rises out of the black. The whole opening takes about 3 seconds on a first visit and about 2.3 seconds on a second.

The shape of the ribbon and its response to scroll speed are the site's main motion. At rest the ribbon holds its gentle S and banks slightly like a corner on a race track. As soon as the visitor scrolls, the left half lifts and comes toward the camera, and the long edges of the outermost cards twist in opposite directions, like a towel being wrung. Because the scroll speed passes through a curve that levels off before it reaches the ribbon, slow scrolling bends the ribbon in fine steps, while fast scrolling stops adding shape before any card twists onto its side. When the visitor stops, the ribbon's shape returns to the S in about 0.3 seconds, while the ribbon itself coasts on for about another second. On a phone, a fast swipe also bends the whole column of cards into an arc.

The site's response to the cursor is also a change in the material's shape. Where the cursor passes, the picture is pushed up from below into a bulge, brighter on the side facing the light and darker on the side away from it, as if a ball were rolling under the page. The bulges stay along the cursor's path and settle where they are, losing half their height in about 0.3 seconds, and the picture never washes away like water. The bulges are strongest in the middle of the screen and fade toward the edges, so the navigation in the corners does not wobble when the visitor moves the cursor toward it. When the cursor rests on a card, that card moves a little toward the camera. Landberg notes in the comments that the hover used to tint the card violet before it became a movement in space.

When the visitor clicks through from the home page, the clicked card grows directly into the project page in under a second. About 0.15 seconds after the click, the card covers more than half the screen and its picture starts fading to white, while the project name in the bottom left flies toward the top left, turning from white to black. By about 0.3 seconds the card nearly fills the screen with the ribbon's wave still in its edges, and the project screenshot slides from the middle into the right column. After the card flattens at about 0.4 seconds, the description rises in line by line, and by 0.7 to 0.8 seconds the link button, tags, trophy and close button are all in place. When the visitor presses Escape, the site plays the reverse, with the project page shrinking back into a card and landing on the ribbon in about 0.5 seconds.

When each line of text on the project page enters, three things happen on one curve: it rises, it flattens and it is uncovered. Each line rises from below its own place, the slight twist it carries unwinds as it rises, and the mask covering it opens at the same time. Landberg writes in the comments that an attempt to give the twist its own timing read as two animations that happened to start together, so the three now share one curve that starts fast and settles slowly.

The black hole takes about 0.3 seconds to open and the same to close, and it does not sit still while it is open. Halfway open, its edge bulges into three or four irregular lobes like a lump of soft clay, and the lobes only round off into a circle once it is fully open. The edge is built from two waves moving at different speeds in opposite directions, so it keeps slowly changing shape. The picture on the ring also turns slowly around the hole and stops at about the 15-second mark. Landberg's comment explains that if it kept turning, the ring would be pulled apart into rainbow streaks. When the visitor closes the hole, the circle first twists back into a lump of clay and then disappears within 0.25 seconds.

Beyond the large motions of the ribbon, the cards and the black hole, the button hovers are not simple colour changes either. When the cursor points at a linked capsule tag on a project page, a disc opens from the centre of the tag. The parts of the letters the disc has reached change colour first while the rest keep theirs, so the boundary between the two colours can run through the middle of a letter. Round buttons do the opposite, with the fill hollowed out from the centre on hover until only a thin ring is left. The cross on the close button is made of two strokes, which on hover leave one after the other along their own directions and come back in from the other side. On hover, the arrow button draws its shaft first and then adds the two strokes of the arrowhead.

In the FULL view, Landberg turns the cursor into a magnifying glass. When the cursor rests on a project name, a thumbnail of the project rises behind that name, names near the cursor swell slightly, the ring of names around them leans outward, and names further away stay still. Names covered by the thumbnail dim, with the edge of the dimming following the thumbnail's rounded outline exactly, while the name being pointed at stays fully bright on top of the thumbnail.

The portfolio's ribbon, cursor bulge and black hole are all drawn by three.js on one WebGL canvas that fills the screen. The page also holds an ordinary set of HTML elements, including the eight project links, the titles and the buttons. Every card, line of text and button on the canvas is drawn at the position of its element and then deformed in the shaders, so the visitor's clicks still land on the HTML elements. Landberg's llms.txt calls this approach DOM-mirrored WebGL, meaning WebGL drawing that follows the layout of the page's elements. Each card is a 24 by 24 grid of 625 vertices, which is enough for a smooth bend.

The cards, titles, buttons and floor bend as one because they share a few functions. The ribbon's bend and the lean of the whole strip are functions of world x alone. The cards, the titles on them, the buttons at their corners and the floor all call the same function, so everything at the same x gets exactly the same deformation. Landberg's comment says that a shared function of world x is how two objects that share no coordinate frame agree, while matching numbers by eye in two places drifts the moment either is tuned. After a title bends with the surface, it also floats a fixed distance toward the camera. This is because perspective shrinks the type on the far side of the ribbon, and moving the type nearer lets perspective restore its size by the same rule that took it away.

The ribbon's shape is the sum of several deformations in the vertex shader. The first is an S in depth, a sine on wide screens and a parabola on narrow ones, and Landberg bends the cards in depth so that perspective itself curves the card outlines. The second is a bank that tilts the surface with the slope of the S, only 0.16 radians at rest. The third is a slight diagonal, a gentle climb from left to right that lifts the ribbon by only about 20 pixels at the edge of the frame. Scrolling adds two more terms, the lift and the wring described earlier. The left half lifts by 0.1 and comes 0.2 toward the camera, and the long edges of the outer cards twist up to 1.8 radians at full speed. The twist applies only across the outer part of the ribbon's width, so the middle card stays steady.

The card shading and the darkening with distance follow the same curve, but the fragment shader recomputes them for every pixel. Landberg writes in the comments that handing a computed depth to interpolation would leave a ripple crawling across the cards as the ribbon moves.

The black hole is a post-processing pass laid over the whole frame, and its core is one line of gravitational lensing. A pixel at distance t from the centre of the hole shows the original picture at distance b = t − E²/t. Here E is the radius of the Einstein ring, set to 1.5 times the radius of the hole's disc. The shader works backwards, computing for each pixel where in the original picture its content should come from. At the ring, b approaches 0, so the ring shows the centre of the page stretched once around the circle, which is the ring of light.

Landberg adds a few refinements on top of this formula. The first is a limit that lets the bend fade out within 0.16 of the screen width outside the hole's rim, with no effect at all beyond that. Without that limit the whole screen would bend, and the hole would look like a filter, not like an object sitting on the page. The ring's coloured fringes come from splitting the colour channels, with red, green and blue sampled at slightly different radii. The turning of the picture on the ring is multiplied by a clock that stops at a cap, which is where the stop described earlier comes from, while the two waves on the edge keep using real time. The comments also record two abandoned approaches, a glowing accretion disc drawn on top and a horizontally stretched lens, the latter tearing black notches out of the ring.

The cursor bulge comes from a 256 by 256 offscreen height map. Every frame, the old values in the map are multiplied by a decay factor, blended a little with their neighbours, and stamped with a Gaussian mark at the cursor. Decay and spread are both computed from the frame interval, so a 120 Hz screen and a screen dropping frames leave the same bulge behind. Landberg notes in the comments that a real fluid simulation exists on another branch and reads as water. Landberg's reasoning is that a cloth pushed up by a ball has no momentum, only tension and relaxation, so the site uses only decay and spread.

The black hole's post-processing pass also reads the slope of this map. It samples the picture uphill, which magnifies the picture over the bulge, and then shades it according to the slope and a lamp at the upper left. The shading fades on near-white pixels, because on a white page the bright half cannot show and only the dark half would remain, like a smudge.

The type on the home page canvas is not set by the browser, and it does not come from the usual distance-field texture either. The site downloads about 400 KB of glyph outline data for each of the two weights, and each glyph is one instance. The fragment shader computes from the glyph's quadratic Bézier outline how much of each pixel the glyph covers, so the edges stay sharp at any magnification and the type can bend with the ribbon. The colour of the type is set by parameters and is not stored in the glyph data. A title flying from its card to the project page can therefore fade from white to near black on the way without the glyph data being generated again. The canvas blends in linear colour space, which makes dark type on a light ground look heavier than the browser's own text, so the shader thins the stroke edges according to how dark the type is.

The floor is a real plane seen through a perspective camera, and its reflection is a separate small picture. Every frame, the site renders the cards through a camera mirrored under the floor into a picture only a tenth of the screen size (192 by 95). Every floor pixel samples that picture through the mirrored camera's projection, and the reflection is added only on the grid lines. Because the picture is so small, the reflection is naturally blurred, and Landberg writes in the comments that a wet floor does not focus anyway. Every material has depth testing switched off, so nothing actually touches the floor, and the dark band under the cards is the only cue that makes them look as if they stand on it.

The alpacas and the trophy are two 3D models in glb format, about 211 KB for both files. The six alpacas in the home page scene are drawn with instancing in two groups, and the trophy is a low-poly model lit as metal. The alpacas and the trophy answer to the same lamp as the cursor bulge, which, as Landberg's comment puts it, makes the whole site one room.

The site's burden falls mainly on the download and the wait when it opens. About 13 seconds after opening, the browser has downloaded 34.6 MB, of which 26.5 MB is six project films hosted on the video service Mux. Each film is downloaded whole as a high-quality MP4, the largest at 7.8 MB, whether or not the visitor ever sees that card. The four films that are playing are also uploaded to the graphics card as textures every frame. Another 37 KTX2 compressed textures add about 5.6 MB and are transcoded in the browser by the Basis decoder. The first thing the browser paints is the hidden text meant for screen readers, at about 0.1 seconds, but the visitor only sees the home page after about 3 seconds.

Phone, tablet, laptop and desktop all use the same canvas and the same shaders, and all four download the same 34.6 MB for the home page, which means a phone also fetches all six films and both glyph files. The canvas renders at 1 times the pixel density on desktop and is capped at 2 times on phones and tablets, so a phone with a 3 times screen is still drawn at 2 times.

The site also prepares a plain-text version of its content for visitors that do not use a browser, such as AI tools. The llms.txt file quoted earlier sits in the site's root and is written for large language models. It opens by explaining that the site is a piece drawn on a canvas and therefore serves its content as Markdown, and then lists which projects Landberg is and is not right for and how to get in touch. A visitor that adds .md to any address on the site, or asks for Markdown in the request, gets a plain-text version of that page.

The layer of hidden page elements under the canvas is meant for screen readers, and it lets a keyboard-only visitor get through the whole site, with Enter opening a project and Escape closing the project page. While focus sits on the hidden text's projects, index and social links, though, the canvas shows no highlight and the ribbon does not turn to the selected project. A white rounded box only appears once focus reaches the corner entries. The site also does nothing for visitors who are sensitive to motion, and when the visitor turns on the reduced motion setting, the opening, the rearing ribbon and the black hole still play as usual.

Of the four Awwwards categories, Creativity is highest at 8.04 and Usability lowest at 7.52, while among the six Developer Award categories Animations is highest at 9.00 and Accessibility lowest at 7.00. The two-sentence description on the FWA case page introduces Landberg as a Swedish design engineer who builds visually rich, motion-driven websites and has twice been named Awwwards Independent of the Year.

This version of the portfolio is credited to Landberg alone on both platforms. The design reasoning quoted above comes from Landberg's own comments in the site's code and from llms.txt.