メイキング・ノート / 07
THE MALL STAYS OPEN.
ETERNAL DEPARTMENT imagines a department store caught in its kindest hour: after the crowd has gone, before the lights have had reason to dim. The site puts its story inside a long, drifting concourse rather than above it.
The concept
Vaporwave can easily turn into a pile of familiar symbols. Here, the mall is treated as a real place with maintenance crews, tenancy rules, a fondly strange directory, and small rituals at specific times. The over-scaled 80s type plays against tiny Japanese wayfinding labels; the language feels like a sign system you could follow, not decoration pasted over a page.
The signature technique
The atrium is a real three.js scene. The page scroll drives a locked dolly camera down its center line. The floor is not a screenshot or a translucent duplicate: before each main render, a second camera is reflected across the floor plane and rendered into an offscreen texture. The floor shader projects that live texture back on to the marble, adding only a very small procedural ripple.
Mirrored-camera pass from index.html
function renderReflection() {
camera.getWorldDirection(direction);
target.copy(camera.position).add(direction);
mirrorCamera.position.set(camera.position.x, -camera.position.y, camera.position.z);
mirrorCamera.up.set(0, -1, 0);
mirrorCamera.lookAt(target.x, -target.y, target.z);
mirrorCamera.projectionMatrix.copy(camera.projectionMatrix);
mirrorCamera.updateMatrixWorld();
textureMatrix.copy(biasMatrix)
.multiply(mirrorCamera.projectionMatrix)
.multiply(mirrorCamera.matrixWorldInverse);
floor.visible = false;
try {
renderer.setRenderTarget(reflectionTarget);
renderer.render(scene, mirrorCamera);
} finally {
renderer.setRenderTarget(null);
floor.visible = true;
}
}The loop caps device pixel ratio at 2, pauses when the atrium leaves view or the tab is hidden, and switches off the ambient bobbing for reduced-motion visitors. Scroll still gives the scene a stable, useful place in the story.
Palette + type
Iteration log
Pass 1 — correctness
- Changed the dolly’s look target downward so the mirrored-camera pass can see the atrium geometry instead of mostly the sky; the reflection target now uses broadly supported 8-bit color and is capped at 1.5× DPR to reduce frame cost.
- Gated rendering on stage visibility, stopped the animation frame immediately when the stage or tab is hidden, refreshed the capped DPR on resize, and added a graceful gradient fallback if WebGL cannot start or its context is lost.
- Added dark, high-contrast reading backdrops to the live-scene navigation, hero, cues, and scroll note; enlarged interactive links and buttons to 44px minimum targets; and reduced the mobile display title so it does not clip.
- Made this guide’s code block mobile-contained and added shrink guards to its layout. The live three.js scene still depends on the pinned CDN module and a WebGL-capable browser; without either, the deliberate static fallback is shown.
Pass 2 — design depth
- Weak moment: the three atrium captions were the same floating dark card, repeated at different coordinates. The arrival copy is now a numbered two-column placard, the sculpture copy is a right-anchored overprint with a giant phase number, and the night-shift copy is a wide ticket strip with a vertical wayfinding label.
- Weak moment: the directory and ritual areas settled into safe, even card grids. The directory is now a staggered cutaway with a tall, shadow-cast central atrium tenant, while the rituals follow a diagonal time line with deliberately uneven scale, elevation, and palette shifts.
- Weak moment: display type and the atrium’s colour progression were too polite after the hero. Section headlines now use controlled line breaks, sharper tracking and a larger scale; a named spacing scale controls the major intervals. The scene’s sky, lights, emissives, and live floor reflection now change with the dolly position, and the decorative floating stamp no longer drifts on its own.
Pass 3 — complexify
- New memorable layer: the Night Desk is a below-fold wayfinding terminal, not another brochure card. It starts in an intentional resting state, then routes three different late-night needs to Sonic Pantry, Night Garden, or the roof’s unnumbered orbit. Each request changes the display, its coloured glow, and the printed ticket; “let the sign go dark” returns the terminal to its considered empty state.
- The first seconds were too dependent on the WebGL scene arriving instantly. The atrium now begins with a deliberate gradient underpainting and a small “warming the atrium lights” status, which fades only after the first successful render. A short safety release keeps the opening composed if the module cannot arrive, while the existing context-loss fallback remains in place.
- Final fit-and-finish: added complete social metadata for both the atrium and its making-of note, tightened the Night Desk copy, preserved native button focus treatment, and kept all new motion under the existing reduced-motion override. The desktop composition gains a luminous terminal; its mobile version becomes a clear stacked display and 44px-plus controls.