aircord

Project Facts

• Project: aircord Website
• Client: aircord
• Year: 2024
• Garden Eight scope: Design, Development
• Relevant capabilities: Web design, Creative development, Three.js / WebGL, Interaction design
• URL: aircord.co.jp

aircord is a creative studio that builds experiences with digital technology. For events, exhibitions, and facilities, it covers technical production through the development of software, applications, and hardware.

We have collaborated on four renewals. Through that process we came to understand aircord not by genre or technology stack, but as a studio that combines video, light, sound, and systems to create experiences in real space. That is why a portfolio that only lined up finished work in order would not convey what matters.

On a typical portfolio site, visitors reach project information by switching from a list to a detail view. Simply arranging completed work cannot capture aircord’s practice, which cuts across video, light, sound, devices, and software to act on real places. What was needed was not stronger expression for its own sake, but depth in the process of approaching the information itself.

Page transitions that connect 2D and 3D

The core structure moves from 2D into 3D and back to 2D. Instead of placing a separate effect on each page, we send the current screen into space as a single object and connect to the next information through its surface. Because the same screen keeps changing form before and after the move, visitors enter another space without losing their place in the site.

To make this movement work, five rendering layers are passed through RenderTargets. A 2D layer containing project detail images and video is mapped onto a surface in 3D space. That result is captured again as a 2D screen, treated as an object in space, then composited with UI for final output. By chaining multiple cameras and layers in stages, the shift between 2D and 3D is controlled as continuous motion rather than a hard cut.

Water surface in About

In About, aircord’s dimensional logo and a floor that reflects like water become the spatial reference. As the visitor scrolls, the viewpoint moves from above the water surface downward. The relationship between the dimensional aircord type, the water surface, and the camera changes with the scroll until the viewpoint enters underwater. It expresses the idea of knowing more deeply in a simpler form.

UI

The more complex the spatial expression becomes, the more the elements users touch directly need unambiguous roles. The cursor follows the same idea. It shows the current action—open a project, scroll, return to the previous screen—as an icon shape. The form switches at the moment of contact, so visitors can anticipate what happens next without extra explanation. In 3D space, UI is not merely overlaid; it is treated as an object that receives the same light and material. The visual boundary between experience and control stays open while function remains clear.

Mobile and performance

The same principle—keep the core experience and simplify the periphery—carries over to mobile. The main constraint was not screen size, but rendering performance and different input methods. Shrinking the desktop setup as-is can look similar while blurring what the experience is for. We kept the core structure of moving between 2D and 3D while reducing layers that do not directly aid understanding. Deciding what to keep as experience took the most time.

Code entry points are split for desktop and mobile. On mobile, mouse trails, particles, fog, and the Archives 3D preview are not loaded. On Projects, desktop plays video according to the current position, while mobile and low-power environments switch to still images.

Technical notes

The following notes focus on implementation. Three points were central: RenderTargets that connect screens, how text is handled, and a cursor that belongs in the space.

On RenderTarget design

Prioritizing continuity across screens split rendering into five layers. Furthest back, Single Page draws project detail images and video. Page maps that result onto a surface in 3D space, and Screen captures it again as a 2D screen. World treats that screen itself as an object in space, then UI is composited for output to the browser.

Each layer receives the previous RenderTarget as a texture. So even when the same screen switches between being shown as a plane and being placed in space, the content does not break. The structure is more complex, but the look during transitions can be tuned on a single timeline instead of preparing a separate effect for each page. Being able to validate design and implementation on the same screen was another advantage of this setup.

On text rendering

Not all text belongs in WebGL. Text meant to be read as information stays in the DOM. Text meant to appear as part of the space uses TextGeometry, SDF, or Icon depending on its role. The criteria for choosing a method are sense of volume, resilience under scale, and how clearly interaction reads.

TextGeometry

The aircord logo in About uses TextGeometry. Converting letter outlines into vertices adds depth, so the logo can be treated as an object affected by camera and light, including reflection on the water surface. Vertex count grows with character count, so it is a poor fit for long copy. We limited it to a logo where dimensionality itself matters, and kept home typography and body text in the DOM for readability.

SDF

Project titles use SDF. Distance from the letter outline is stored in a texture and the edge is reconstructed in the shader, so edges hold up when camera distance or display size changes. Each letter does not need a complex solid form. Titles scale and rotate with projects arranged in a ring while remaining readable when they face forward.

Icon

Cursor shapes were drawn in Illustrator, converted to an icon font, then given volume with TextGeometry. There is no need to load a separate 3D model for each shape such as arrows or scroll cues; required forms can be generated from a single font. When the shape changes, size, depth, and material stay under the same conditions, which supports consistency as well as a lighter load.

Glass-like cursor treatment

The cursor is UI that signals function and, at the same time, a small object that receives light in the scene. It stays transparent to the background while keeping reflection on the edge, so it remains readable over dark footage. Carrying the same material when the shape changes balances a change in operational role with continuity across the site.

With current Three.js, MeshPhysicalMaterial transmission can produce a similar quality with relatively simple setup. Transmission still depends on rendering what sits behind it, so cost changes with full-screen post-processing and DPR. What matters is deciding the required size and display duration first, not only matching the look.

Exchange between design and implementation

What these techniques share is not adding more 3D, but keeping the order of knowing aircord unbroken. RenderTargets connect page boundaries, the water surface turns depth of information into scroll, and the cursor keeps the meaning of interaction inside the space. On mobile, only that order remains while peripheral rendering is reduced.

There was not a finished design first and an implementation that reproduced it later. We moved camera, type, light, and transitions in the browser while judging what was necessary as an aircord experience. That exchange made understanding of the subject consistent not only in how the screen looks, but in page structure and how the code moves.

Recognition

• Awwwards — Site of the Day, Developer Award
• The FWA — FWA of the Day
• CSS Design Awards — Website of the Day

Credits

• Client: aircord
• Designer / Developer: Kenta Toshikura (Garden Eight)
• Producer / Director: Toshiyuki Hashimoto (aircord / The Shift)
• Copywriter: Jiyu Park (The Shift)