Igloo Inc

Igloo Inc is the parent company of Pudgy Penguins and OverpassIP. abeto's case study on Awwwards says the site had to show the company's portfolio projects with scrollable, user-friendly navigation that matched the brand guidelines. It names the main challenge as keeping visitors engaged with something to play with all the way down the scroll. A company site is usually a few screens of text and a row of brand logos. This one has very little to say, only a manifesto, two portfolio companies and three social accounts, so the team turned each item into an object to look at and touch.

The whole site falls into three sections, with no menu on the page and all of the content set along one camera route diving downward. The first section is the igloo on the snowy mountain, with the company name at the top left and a Manifesto at the top right. The second is inside the ice, where two blocks each hold one portfolio company, labelled PORTFOLIO_CO_01 and PUDGY PENGUINS, and PORTFOLIO_CO_02 and OVERPASS. The third is a glowing ring and a round platform whose particles take the shapes of social platforms. Once the visitor scrolls past the end, the camera returns to the igloo of the first section, so the route can loop forever.

Both ice blocks can be opened, and when the visitor clicks a block, the page changes to that company's page and the address changes to /portfolio/pudgy-penguins or /portfolio/overpass, so each company page can be shared and opens directly from its link. The company page holds a short summary, the company's social accounts and a website link, and the Close at the top right takes the visitor back to the block. On the round platform at the end, the particles take the shapes of a penguin for LinkedIn, the X logo and the Medium letter in turn, and whichever one the visitor picks, the frame below surrounds that platform's name.

The Manifesto at the top right of the Igloo Inc home page has changed since the award. It now says the company aims to build the next generation of consumer brands at the intersection of community, AI and crypto, and the copyright year reads 2026, while the three sections and the two ice blocks are still as they were when the site won.

The picture of Igloo Inc has almost a single colour, a cold range from blue-grey to snow white. The loading background is a bluish grey (#A0A5B1), the mountains, igloo and ice fog all stay within that range, and the company pages switch to a very dark blue-black. The most noticeable colour on the whole site is the rainbow that flashes along the edge of the ice fog during transitions, along with a little dispersion refracted by the ice, so whenever visitors see colour, they know the picture is changing. The team's case study says chromatic aberration suited this cold art direction so well that they applied it to a few elements and materials.

The scenery is half realistic and half data display. The opening mountains, igloo and ground carry fine realistic texture, with every ripple in the snow visible. The ice blocks have another kind of texture. The team's case study says they first planned one shared block for every project, but prototypes showed the blocks looked too alike. They gave each block its own design and wrote a procedural algorithm that simulates ice crystals growing inside the outline of a cube or cylinder to form the inner texture of the block. The penguin at the end is made entirely of particles and looks like a statue heaped out of snow.

All the text in the Igloo Inc interface is small white monospaced type, set in the regular and medium weights of IBM Plex Mono, and it reads like the display of a lab instrument. Thin lines run from each frozen object to small labels giving a number, a temperature and a date. A few lines of translucent large text drift in the background like leftover data on a screen. The IGLOO logo at the top left is set in rounded bold letters, far more prominent than any other text in the interface.

Igloo Inc's interface parts are all built from brackets and thin lines, matching the instrument feel of the monospaced type. The platform selector at the end frames the current platform in a box with bracketed corners, with the neighbouring platforms dimmed on either side and two thin line arrows. The Close at the top right of the company page sits in the same bracketed corners, and the social links on the company page are written as [X] and [IG] with a small arrow. Section titles on the company page start with slashes, six before Summary and three before Discover and Visit below it.

On phones, all three sections remain, and the camera simply reframes for the portrait screen, keeping the igloo, the blocks and the ring in the middle of the tall picture. The interface barely moves, with the logo and manifesto still at the top and the sound switch still at the lower left, while the labels shrink to a smaller size beside the blocks.

The opening of Igloo Inc is an animation generated in real time, not a film. The loading screen is a field of blue-grey with a tiny progress mark in the middle at first. Then a set of thin lines joins into a mesh in mid-air and outlines the igloo, a dome of white light glows in the middle, snow-like particles fill the igloo's shape, and finally realistic surface detail arrives as the mountains spread out. After about 6.5 seconds, the logo, the manifesto and the hint at the lower left appear in turn and the whole snowy mountain is fully lit. The team's case study says the opening was animated in the engine with code and shaders, which kept the file small, kept the style consistent with the rest of the scenes and let them make changes without re-rendering.

After the opening, the igloo responds to the cursor. On whichever side the cursor comes near, the ice blocks lift, spread and glow white one by one, small numbers pop up on the blocks with thin lines joining them, and when the cursor moves away, the blocks drop back into place. When the visitor starts scrolling, light first shines through the igloo's seams, as if something inside were waking up.

Scrolling moves the camera along the whole route, and the route has a soft feel. Each turn of the wheel first becomes a little velocity, the velocity fades a little every frame, and the camera eases after that position, so it glides a short way after the hand stops. If the visitor stops in the middle of the handover between two sections, the site automatically carries the camera to the nearer section in about 2 seconds, starting slowly, speeding up and slowing again, so the visitor never rests halfway through a transition.

The transition between sections is the most recognisable motion on the site. A diagonal cut sweeps up the screen from the bottom, and its edge is jagged like cracking ice. Where the cut passes, pixels shift and split into red, yellow and blue fringes. The old section slides up out of the picture and the new section slides in from below, so the picture looks as if a sheet of ice were replacing it from the bottom up. The small interface text tears and shifts at the same moment before settling back. The team's case study says the transitions mix chromatic aberration, a tech displacement and a frost effect.

The motion in the ice-block section centres on the objects. The two blocks turn slowly in the fog, and their labels first appear as scrambled characters before resolving letter by letter into readable words. When the visitor clicks a block, the site first takes up to 1.5 seconds to centre the camera on it, and then within about 1.25 seconds the picture sinks into the dark blue-black company page, whose text also resolves from scrambled characters. Scrolling on the company page moves the text upward, and clicking Close takes the picture back to the block.

The particle penguin at the end is the one thing on the site that is truly playable. The camera first watches curved ice pieces join into a ring, then flies through the ring's glowing centre and lands in front of the platform. When the visitor clicks the right half of the screen, presses the right arrow key or flicks sideways on a phone, the particles switch to the next platform. A burst of noise first scatters them, the noise settles within 0.5 seconds and the particles gather into the new shape, while the platform underneath moves along, slowing to a stop over 3 seconds, with a sound playing at the same time. Once formed, the particles keep turning slowly around a vertical axis. When the cursor sweeps through the particles, it stirs them up, the fastest ones glow white, and after the cursor stops, the particles slowly settle back into their shape.

Sound accompanies all of this but starts off. The lower left first reads Sound: Off, and after the visitor's first click, tap or key press, the music, the wind and the room tone start and the switch changes to Sound: On. Opening a block, entering and leaving a company page, switching platforms and small interface cues each have their own sound, and the particles' sound grows louder or softer with the speed of the cursor stirring them.

Igloo Inc draws the igloo, the ice fog and well over a hundred thousand particles together, yet from the igloo to the particle penguin it holds 60 frames per second both while scrolling and at rest. The site does not read the operating system's reduced-motion setting, so with it turned on, the transitions, particles and igloo animation all play as usual.

Igloo Inc is built with a Svelte shell, three.js r165 for the 3D, and GSAP for animation, with several custom easing curves defined by the team for the opening and other moves. The whole canvas sits inside a closed shadow root, and the page's DOM contains not a single text node. The logo, the manifesto, the labels and the company pages are all drawn in WebGL with MSDF glyphs set in IBM Plex Mono. The team's case study says they put the interface into WebGL for two text effects. A glitch takes only a simple shader, with no stacked masks or clipping in HTML. Scrambling letters only means changing a glyph's offset into the SDF texture, so the browser never has to recalculate styles.

Each of the three sections is drawn into its own offscreen texture, and a full-screen transition shader composites two of those textures onto the screen. The shader pushes a diagonal cut according to scroll progress, and a data texture of ice cracks shapes the cut's edge. Near the cut, the shader takes 5 samples for chromatic aberration and scatters them with a blue-noise texture, so the aberration does not show rings of seams. Another channel of the data texture shifts pixels in blocks, which is the tech displacement, while the old and new sections are offset vertically by progress at the same time to create the parallax. The whole transition is just one post-processing step, so the three sections can be built and optimised completely independently. Beyond the transition, the picture also goes through SMAA anti-aliasing and depth of field, for about 40 to 64 ordinary draw calls per frame in all, plus one multi-draw call for the igloo.

The igloo in the opening is a three.js BatchedMesh in which every ice block is one geometry, with its vertices moved in advance so that the block's own centre is the origin, and under WebGL2 the whole igloo is drawn in one WEBGL_multi_draw call. Every frame the script works out a displacement for each block, taking the larger of two values, an idle wave that rises and falls with time and the block's horizontal position, and a push from the cursor. The cursor is first projected onto a plane in front of the camera and followed smoothly, and blocks within 1 to 3 units of it are pushed the most. Only blocks in the upper half of the igloo move, the displacement chases its target through two stages of smoothing, and each block floats out along the line from the igloo's centre to itself with a slight wobbling rotation. During the first 40% of the scroll down, the upper blocks also scatter outward by a random amount each. The displacement is written into a data texture every frame, and the shader uses it to make lifted blocks glow blue, the same shader that reveals the igloo layer by layer from the bottom up in the opening.

The 3D assets for the ice blocks were made in Houdini and Blender. The team wrote a procedural ice-growth algorithm that starts from a cube or cylinder as a container and grows a detailed crystal structure inside it. The team's case study says they chose the procedural route partly because more projects would be added later. In the browser, the blocks use the transmission of three.js's physical material to refract what lies behind them, with dispersion turned on, so red, green and blue are each sampled at slightly different refractive indices and the edges of the ice split into a little colour. The normal and roughness maps for the blocks are about 1 MB each, and the ambient light comes from an environment map in EXR format.

The penguin at the end is made of 150,000 particles, all simulated on the GPU, and their positions and velocities live in two sets of float textures that are read and written in turn every frame. The shape the particles gather into comes from volume data. The team's case study says they wrote an exporter that converts VDB volume data into a format the browser can use and then compresses it, ending up smaller than an ordinary web image. On the site, the penguin's volume data is about 818 KB, the X's about 312 KB, and the Medium letter's is at half the resolution. When the platform switches, the site swaps in another volume texture and adds 0.5 seconds of noise. The cursor drives a 128 by 128 two-dimensional fluid simulation whose velocity pushes the particles along and brightens them with speed.

Scrolling is not left to the browser but calculated by the site's own code. The wheel's movement is multiplied by a very small factor to become camera velocity, and that velocity fades by a frame-rate-independent friction, so the feel is the same on fast and slow computers. The three sections join end to end, and progress wraps back to the start when it reaches the end, which is why the route loops. When the visitor stops at the boundary between two sections, the site works out the nearer side and eases progress over to it in about 2 seconds. The two company pages have their own route, /portfolio/:project, and clicking a block and opening a link directly go through the same transition, except that opening a link directly skips the opening animation.

To make the first screen appear sooner, the site splits loading across several background threads. It runs four Web Workers to decode bitmaps, EXR environment maps, MSDF glyphs and audio, leaving the main thread to build the scenes. The team's case study says they wrote their own geometry exporters to cut the initial load, and that some texture loading and shader compiling also happens in the background. Models are compressed with Draco and total only about 0.55 MB, and every texture is KTX2, which the Basis transcoder converts into a format the GPU reads directly.

The site caps rendering resolution by device and also adjusts it to the frame rate. Screens with a pixel ratio up to 2 render at no more than 1.15, and phones with a pixel ratio of 3 at no more than 1.5, which means drawing half the screen's pixels across and half down. Two seconds after opening, the site starts averaging the frame rate every 4 seconds, lowering the resolution by a tenth whenever it drops below 30 frames per second, down to six tenths at most, and raising it by a tenth again once it reaches 60. After the direction has flipped 4 times, the site stops adjusting, so the picture does not keep jumping between sharp and blurry. The team's case study says they measured performance throughout development to keep navigation smooth on low-end devices.

Every device downloads the same set of assets, about 15 MB in all. The largest single file is the music at about 1.5 MB, followed by the transition data texture at about 1.26 MB and two ice-block normal maps of about 1 MB each, with textures totalling about 10.8 MB and sound about 2.9 MB. The server starts returning the page within 0.04 to 0.14 seconds, the loading screen appears at 0.17 to 0.22 seconds, and the igloo is fully in place at about 6.5 seconds. During loading the page freezes for at most about 0.23 seconds, and nothing on screen jumps.

All of Igloo Inc's content is drawn in the canvas, so screen reader users can hardly use it at all. Nothing on the page can take focus, the Tab key stays on the page itself, and a screen reader can only read the page title. The arrow keys do work, though, with up and down moving the camera and scrolling the company pages, and left and right switching platforms at the end, while Page Down and the space bar do nothing.

Igloo Inc is both the Awwwards Site of the Year and the Developer Site of the Year for 2024. On FWA it won FWA of the Day and FWA of the Month for July. FWA gave it 86 points and filed it under animation, commercial and corporate and experimental.

The site's best Awwwards category was Creativity at 8.31, most likely thanks to the brands frozen in ice and the particle penguin that scatters and regroups. Usability was the lowest at 7.50, and the lack of a menu, content that can only be seen by scrolling through it and a screen reader that cannot read any of it may all have pulled it down. The five developer jurors gave 7.66, with Animations highest at 9.60 and Markup lowest at 6.40, which matches a DOM with no text in it, as described in the Engineering section.

abeto describes itself in the case study as a small team of technical artists who both write code and make 3D. They worked on code and art at the same time directly in the browser, using their own tools to update shaders, the images on model surfaces and the models themselves in real time. Bureaux supplied moodboards, some of its own renders and 3D assets, a content outline, and the music and sound effects. abeto's record counts up to the time of writing, with only three works on Awwwards, all three of them Sites of the Day and two of them yearly winners. Both of Bureaux's FWA awards come from this site.