01 / 04

Ships

Scroll to fly through the tagline.

Scroll to play

Motion / 3D Lablab.iamnaw.dev/depth02 · Type in depth

-- fps·-- ms

TECH SHEET · 02 / 06

Type in depth

The tagline laid out in depth. Scroll moves the camera through it, one line at a time, fading into the dark.

Three.js
Canvas 2D
GSAP

TECHNIQUE

Each line is a plane with a canvas-drawn texture in the brand font
Fog does the fading, so there is no per-frame opacity work
Camera z is the only animated value

PERFORMANCE · MEASURED LIVE

Draw calls: —
Triangles: —
Frame rate: —
Pixel ratio cap: 1.5
JS per frame: —

FALLBACK

Reduced motion: one still frame per chapter, no drift. Without WebGL: a still image of the first line.

FROM THE SOURCE

lines.forEach((line, i) => {
  const plane = new Mesh(new PlaneGeometry(8, 2),
    new MeshBasicMaterial({ map: textTexture(line) }));
  plane.position.z = -i * 5;
});
scene.fog = new Fog(0x08080a, 1.5, 13);