Motion
Three.js is the new typography
For a century, the display face carried a brand's voice. On the modern web, that job is moving to the hero canvas, and the craft rules are the same ones type designers have always known.

Iftekhar Newaz · 18 May 2026 · 6 min read
Look at the last ten Awwwards Site of the Day winners and count the static heroes. There won't be many. The premium web has quietly agreed on a new convention. The first thing a visitor sees isn't a headline set in a distinctive face. It's light behaving in a distinctive way. A shader, a particle field, a 3D object that answers the cursor. The hero canvas has become the display typography of the 2020s: the single element that announces, before a word is read, what kind of company you're dealing with.
The same job, a new material
Display type always worked by controlled deviation. A grotesque with one strange terminal. A serif with too much contrast to be polite. Enough familiarity to read, enough strangeness to remember. WebGL heroes obey the same law. The aurora shader on this site is fBM noise, the most ordinary trick in graphics, but it's tuned to two brand hues and damped to a pace that feels geological rather than gamey. The technique is common. The tuning is the brand.
Nobody remembers the algorithm. They remember the pace, the palette, and whether the light answered when they moved.
Craft rules, translated
- Kerning becomes timing. Bad type has uneven spacing. Bad motion has uneven easing. Entrances on power3.out, ambient loops on gentle inOut curves, nothing linear, ever.
- Hierarchy becomes layering. One dominant motion idea per viewport, the way a page gets one display face. A shader hero plus floating cards plus a marquee plus magnetic buttons is the motion equivalent of setting five typefaces.
- Legibility becomes performance. Type that can't be read has failed. A canvas that costs 40ms a frame has failed just as badly. Render at reduced resolution and let the noise hide it. Pause when off-screen. Respect prefers-reduced-motion the way print respected paper stock.
- And the counterpart of white space is stillness. The strongest sites hold their motion budget for one moment and keep everything else quiet.
Where this goes
Variable fonts made type kinetic. WebGPU will make canvases cinematic. The two are converging into a single discipline where a brand's voice is a behaviour rather than a file. The studios that win in that world won't be the ones with the biggest render budgets. They'll be the ones who learned, from a hundred years of typography, that character comes from restraint applied to a strong idea. Set your light with the same care Frutiger gave his counters and the internet will stop scrolling for you.
Iftekhar Newaz
Solo founder of Northcave Studio. Carves websites in Dhaka daylight for founders everywhere.