Messenger

In the making-of article the team published on Awwwards, they say they wanted a game that felt calm but also a little weird, a mood they had found in places they visited in Asia. They framed it as a free experiment that takes about fifteen minutes to finish, and they used it to keep developing their own tech for multiplayer 3D environments. From the start, the world was meant to be a tiny sphere where the visitor can walk in any direction and end up back where they began. The story came last. The team tried sci-fi mysteries and hard-boiled crime plots and in the end kept only the act of delivering messages. There is no world-ending threat, no arrows and no tutorial, so visitors work out at their own pace where to go and whom to look for.

The site's title screen shows only a slowly turning planet with the MESSENGER logo in front of it. After the visitor presses BEGIN, the screen turns into a white loading page, and a few seconds later the camera drops from outside the planet to a spot behind a teenager carrying a mail bag. In three short lines the teenager explains the situation, which is that they have overslept, there are five items on the list and it is time to go. Once those lines are done, the visitor can walk freely. The planet has nine named places, and whenever the visitor walks into one, its name is stamped in block letters at the lower left of the screen, for example MAIN SQUARE, Smelly Falls and Mountain Temple.

Each of the five deliveries belongs to its own small story involving two or three residents, thirteen steps in all. An office worker wants a letter back before the boss reads it, a cave man asks the visitor to take a postcard to the woman selling flowers in the square, and two scientists with almost the same name (Frieb and Frebi) have received each other's packages. In the other two stories, an old woman wants an offering carried up to the mountain temple, and a diver has fished an old letter addressed to Dave out of a box on the seabed. The steps within a story have to happen in order, but the five stories can be played in any order. When the visitor walks up to a resident with an ellipsis bubble over their head and clicks them, a conversation starts. After the conversation, a card appears at the lower left of the screen. It tells the visitor whom to find next (NEXT UP), or, when the visitor picks something up, it reads PACKAGE RECEIVED.

The five stories are spread across different corners of the planet, so finishing them means walking the whole planet. The game gives no map and draws no route, and every clue for finding the way sits inside the world. Place names appear when the visitor walks in, residents with something to say have a bubble over their heads, and Dave, who plays guitar by the waterfall, has to be found by sound. The team says the guitar grows louder as the visitor gets closer and comes from a direction in 3D space, so visitors can find Dave by ear. Once the last item is delivered, the picture dims and YOU MADE IT! appears in the middle of the screen. Below it are the names of the two developers and the composer and a note inviting the visitor to stay and explore or refresh the browser to start again. Progress is kept in the visitor's own browser, so the next visit resumes where the last one stopped, and a visitor who has finished all five deliveries starts from the beginning the next time.

Other real players are on the planet at the same time, and the server sorts visitors into rooms. The team found that more than ten people in one place felt crowded and broke the quiet mood, so each room holds at most ten players. Every visitor arrives with a randomly chosen hairstyle and outfit, so two identical messengers rarely meet on the street. Players cannot type to each other and can only send one of ten emoji. The team says this means nobody has to moderate a chat and nobody can be rude in one. The team also writes that players often guide lost newcomers to the hidden temple or a hard-to-find resident, simply by walking ahead and sending a few emoji.

The visual rule across the whole world is that everything should look hand-drawn and slightly imperfect. Each object is painted in a single colour, the side facing away from the light switches to a darker version of the same colour, and the picture has no gradients and no painted surface detail. Outlines, window frames, step edges and rock grain are all drawn in a bluish dark grey (#373f42), and these lines vary in thickness and break off partway, as if sketched quickly with a pen. The team says they tried several looks that all leaned heavily on outlines and found that outlines brought out the geometry and the details best. The interface follows the same rule, and the edges of buttons and dialogue boxes are a little crooked, like hand-cut paper.

The sky and the sea share one greenish teal (the main colour Awwwards samples from the site is #81BFBC), the houses and roads are grey-green, putty and light brown, and small amounts of red, orange and yellow pick out mailboxes, traffic cones, signs and clothes. The team put every colour used in the game into one small 16 × 16 pixel image, and every model takes its colours from it. Changing one pixel therefore changes every place in the world that uses that colour, which also makes it easy to change the lighting and the mood. Finally the whole picture is colour-graded, which makes the colours warmer, greener and a little more saturated, and the Engineering section explains how.

The world itself is modelled on a mid-sized Asian city. The team studied YouTube videos of the streets of such cities and also travelled to Japan to see them in person. Power poles, vending machines, traffic cones, a towel hanging from a window and shop signs in an invented script all appear in the picture, and the town feels denser than the countryside but far from a metropolis. Because the planet is so small, the horizon curves sharply and houses in the distance lean away to either side, which is how a visitor sees at a glance that this is a sphere. The main light comes from one direction, high and to the side, and the houses cast shadows with soft edges, while the line between light and shade on the characters is hard, so the characters stand out against the scenery.

The game's interface parts are all made of the same paper. White cards (#F8F8F8) carry a hard, unblurred shadow in grey-blue (#647A87) offset down and to the right. A coloured name tab sits on top of each dialogue box, and its colour marks the story. The office story is red (#c25959), the cave man's story is yellow (#f3c258), the temple story is green (#8cc48c), Dave's story is orange (#de794e), and the opening and the scientists' story are blue (#66BDE6). The button that opens the task list sits at the top right of the screen, and the sound, wardrobe and emoji buttons are stacked at the lower right. The site uses three typefaces of its own. A heavy block face is used on the BEGIN button and the name tabs, and a larger, chunkier block face is used for place names. Dialogue, the task list and the ending card use an all-caps handwriting face, so they read like quick notes someone wrote by hand. When a task is done, a hand-drawn line strikes it through on the list, followed by the number of steps completed, such as (3/3).

The characters are painted flat as well, with roughly human proportions and faces drawn with a few strokes for the eyes and mouth. The team says the lead character was inspired by Dutch teenagers with part-time delivery jobs. Pressing L or clicking the T-shirt button opens the wardrobe, where the camera turns to face the lead character and four rows of left and right arrows change the hair, top, bottom and shoes. There are seven hairstyles, nine tops, seven bottoms and seven pairs of shoes.

On a phone held upright, the same rules barely change, and only the layout moves. The block-letter logo on the title screen stretches across the full width of the screen, and the dialogue box spans the whole lower part of the screen. When the character walks, the phone keeps the character in the centre of the picture, while on a computer the character sits left of centre to leave the view ahead open.

The camera move from the title screen into the game is the longest single movement on the site, and before it starts, the planet on the title screen keeps turning slowly. When the visitor presses BEGIN, the site first switches to the loading page, and once the new scene is ready, the camera starts to descend from outside the planet, well above the character. It takes two seconds to settle behind the character's shoulder, falling fast at first and easing to a stop at the end, while a whoosh plays. Only then do two flocks of birds fade into the sky, and the character's three opening lines begin. This opening plays only on a first visit. On later visits the camera's descent stretches to a little over three seconds, and when it lands the visitor can walk straight away.

While the character walks, the camera stays behind them, so visitors never have to turn it themselves. On a computer, W and the arrow keys walk, holding Shift runs faster and the space bar jumps. A visitor using only the mouse holds the left button and the character runs toward the cursor. The camera follows half a beat behind, so when the character turns, the camera swings around gradually without jerking. In narrow alleys the camera pulls in on its own so that it never ends up inside a wall.

The character's own movement follows how fast they are going and blends smoothly between standing, running and sprinting. If the visitor does nothing for half a minute, the character starts an idle animation chosen at random. When the character wades into the sea, their clothes darken from the bottom up as if soaked, and on land they slowly return to their normal colour. The game holds 60 frames per second on a computer the whole time, and standing still and sprinting are equally smooth.

Every part of the game's interface arrives in two to four jumps to its full size, like paper cut-outs swapped in frame by frame in stop-motion animation. A dialogue box jumps in over about a third of a second, and then the text types itself out at 35 characters per second while the character's voice sound plays, with three male and three female voices. One press of the space bar or one click on the arrow shows the whole line at once, and the next press moves on to the next line. Closing a dialogue box takes only about a fifth of a second, much faster than opening it. When the cursor rests on a button, the button's edges change to a different crooked shape, so the lines seem to tremble, and its shadow shortens as if the button were pressed in a little.

When the visitor clicks a resident, the camera cuts at once to an over-the-shoulder two-shot, and some residents turn to face the character. While a resident talks, their mouth switches at random between a few shapes eight times a second, which reads as speech. Every character blinks now and then at irregular intervals, so a group standing together never blinks in unison. When they are not talking, a few residents walk fixed routes along the streets, so the town always has people moving through it.

The emoji a visitor sends are small moving objects too. When the visitor opens the emoji panel or presses a number key from 1 to 0, a small 3D icon pops up over the character's head, such as a heart, a waving hand, a skull or a roll of toilet paper. The icon drifts slowly upward and disappears after two seconds. Other players who are close by see it over the same character's head. On a phone, a translucent disc appears wherever the finger touches down, dragging it steers the character and sets the walking speed, and a quick tap anywhere on the screen jumps, which is why the team says one finger is enough to play.

The whole game is drawn on one WebGL canvas and rendered with three.js, with Svelte building the page around it. The canvas sits inside a closed shadow root, which leaves only a few empty divs in the page's DOM. Dialogue boxes, buttons, the list and place names are drawn on the same canvas too, which the team says lets them animate every detail without restrictions. The character moves with custom physics. A capsule collider is shape-cast against a merged collision mesh (accelerated with three-mesh-bvh), gravity points to the centre of the planet, and each frame the character's "up" is realigned with the planet's normal. The collision mesh comes from five separate Draco files, apart from the visible models.

The hand-drawn look comes from a post-processing outline pass. Each frame the scene renders into two textures at once (MRT). The first stores colour with a per-surface ID in its alpha channel, and the second stores depth, a compressed normal and a weight that says whether the pixel should be outlined. A full-screen outline shader samples the four neighbours above, below, left and right of each pixel and compares their IDs, depths and normals. Wherever any of the three jumps past a threshold, it draws a dark grey line, and the lines fade out between 50 and 300 units from the camera. The lines break up because each material switches off part of its outline weight with noise. The terrain uses a triplanar noise texture and the characters use sine noise in their own local space, so gaps of different lengths open along the same edge. Rock striations and the borders of grass and wet ground are also written into the surface ID, so the outline pass draws lines along them on its own. After the lines are drawn, a 3D LUT grades the whole picture (with tetrahedral interpolation), and SMAA smooths the edges last.

Colour and shading are both computed in a custom base material. Each model's UVs point at one cell of the 16 × 16 palette, sampled with nearest filtering, so each face is one flat colour. The shadow colour is the same colour converted to HSV with its hue nudged and its value halved, and a smoothstep cuts a narrow transition between the lit and shaded sides. The characters use an even narrower transition, which makes their light-to-shade edge harder. The highlight is a small patch cut out by a threshold and is added only on faces that do not point up. The eyes and the mouth are two four-cell sprite strips. A blink comes from three timers with periods of 22, 34 and 57 seconds stacked together, and whenever any of them runs out a blink plays, so the blinks look random. While a character talks, the mouth jumps to a random shape eight times a second, and the red, green and blue channels of the strip hold the mouth, teeth and tongue so the shader can colour each one.

Drawing a whole planet costs the most on the terrain, so the team designed both the way it is modelled and the rules for which version gets drawn. In their making-of article they say they first tried bending ordinary flat models onto a sphere procedurally, which worked, but adding detail to every corner of the map was too slow. Instead they modelled the world as an unwrapped cube and then turned the cube into a sphere, which keeps distortion low and makes the layout easier to change.

Once on the sphere, the terrain is cut into ten groups, each with versions at four levels of detail, and each level lives in its own BatchedMesh. Every frame, the script runs three checks on every piece of terrain. It skips pieces outside the camera view and pieces on the far side of the planet, where the dot product between the character's up direction and the direction of the piece is below 0.45. The remaining pieces get a level of detail by their distance from the character, the finest within 6 units, with 12 and 20 marking the next two bands and the coarsest beyond. The team says this LOD system keeps each object's silhouette when it switches levels, so visitors rarely notice models being swapped. BatchedMesh uses WEBGL_multi_draw underneath, so the whole world takes only twenty to thirty draw calls a frame, a dozen or so of which each merge around forty objects. The shadow from the directional light on the character covers only 24 units around them and moves with the character, so a 2400 × 2400 shadow map stays sharp up close.

Multiplayer runs through a WebSocket server on Google Cloud Run. Each player's state (position, rotation, animation, the models and clothes in use, and name) is encoded as binary with protobuf. Every 35 milliseconds the client checks which fields have changed and sends only those, so a player standing still sends almost nothing. One-off events such as an emoji do not wait for that rhythm and go out on their own the moment they happen. Other players' characters move smoothly from one position to the next through interpolation on the receiving side, and when someone leaves the room their character shrinks away in 0.15 seconds. Every player, the local one included, is an instance in one skinned BatchedMesh with its bone matrices stored in a texture, so one more player does not add a draw call. The team says that swapping character models in real time easily makes a game stutter, so the new clothes of other players upload to the GPU at most 512 data units per frame, and once the upload finishes, that character scales in over 0.35 seconds. The local player's own clothes upload in one go.

The game's interface text does not use the usual MSDF font atlas either. The team says they generate glyphs with WebAssembly and let the GPU render them directly, so the type stays sharp even at odd angles. The fonts the site downloads are glyph files in its own format, the interface icons are drawn the same way, and the crooked, trembling buttons come from a vertex shader that shifts vertices by a random seed. Hovering swaps the seed, and the lines tremble.

The approach first asks visitors to download quite a lot, though most of it is not needed up front. The title page downloads about 5.9 MB, of which sound takes 3.6 MB and the background music alone 2.26 MB. After the visitor presses BEGIN, the site downloads about 11.75 MB more, almost all of it 188 Draco-compressed model files, for about 17.6 MB in total. The white loading page appears within 0.43 to 0.46 seconds, the planet appears after about three seconds, the title screen is complete after about six and a half seconds, and pressing BEGIN costs another few seconds of waiting.

The load on the graphics card stays low. The site caps the pixel ratio at 1.15 (1.5 on phones with 3x screens) and adjusts it every few seconds according to the actual frame rate. Below 30 frames per second it lowers the resolution, and once the resolution drops far enough it halves the shadow map as well. At 60 frames per second it raises the resolution again. After the direction of adjustment has flipped four times, it stops adjusting. iPhones are treated as low-memory devices and get coarser terrain models, smaller background music and a 1024 shadow map. The team says Safari on iPhone kills a page that uses too much memory without warning, so they track every asset and free it the moment it is no longer needed.

The game gives screen readers nothing to read. The page's DOM contains no text and no buttons, every part of the interface is drawn on the canvas, and keyboard focus never leaves the page itself. Visitors on a computer can walk, talk, change clothes and send emoji with the keyboard, but starting the game and starting a conversation both need a mouse click. The site also ignores the system's reduced motion setting.

Messenger first won FWA of the Day with 88 points and then FWA of the Month for October 2025, and Site of the Day on Awwwards came a little over a month later. Creativity led the four Awwwards categories and Content reached 8.15, which fits a game that fits five short stories, twenty residents and an online world into a browser. Usability was lowest at 7.46, possibly because the planet has no map and no route markers, so first-time visitors have to work out where to go on their own. The developer jury gave Animations 9.00, the highest of the six categories, and Semantics, Accessibility and Markup 7.60 each, which matches a page with no readable text or labels. In the Awwwards annual awards for 2025, Messenger won the developer category, not that year's overall Site of the Year.

The game is essentially the work of two people. The 3D models were made in Houdini and Blender, the interface was designed in Figma and Photoshop, and the code is three.js, three-mesh-bvh, vanilla JavaScript and C++. The team says they like tools that let them build their own systems. abeto's previous winner, Igloo Inc, won both Site of the Year and Developer Site of the Year on Awwwards for 2024. The team says Messenger is one of their most viral projects, with thousands of people still playing every day months after launch.