Showroom · Make-of

How Lettra was made

Type anything; fifty thousand particles assemble it in 3D, pour off the baseline under gravity, bend around a magnet, and wire themselves into a constellation. One canvas, raw WebGL, no libraries.

What it demonstrates

That live input beats a canned performance. Most particle-text pages morph through a fixed playlist; Lettra hands the keyboard to the visitor and treats every word — including emoji and lowercase — as a fresh sampling problem. Its showroom siblings hold different ground: Mireille choreographs one fixed image into place as you scroll, and Foundry constructs letterforms from parametric stroke skeletons — Lettra samples real set type, live, and then hands you the physics. The second point it makes is architectural: all four toys are closed-form motion evaluated per particle on the GPU, so a phone can carry the whole cloud without a physics loop in JavaScript.

Techniques, honestly named

• Offscreen-canvas glyph sampling — the typed word is painted once at a heavy weight, its opaque pixels read back, and each particle thrown at a random inked pixel with jitter and shallow depth.
• Closed-form ballistics — the gravity spill is projectile motion plus a damped bounce and a lateral puddle spread, all computed analytically in the vertex shader from one clock uniform; freezing that clock is what lets Reform pull every grain home from mid-air.
• Staggered springs — word-to-word morphs ease each particle on its own delay, so letters stream rather than snap; a CPU copy of the same easing lets a mid-flight retype start exactly where the particles visually are.
• Nearest-neighbour constellation — a few hundred particles are promoted to stars by minimum-distance rejection, each wired to its two nearest fellows; the dense cloud dims to dust behind the chart.
• Respectful fallbacks — context loss re-inits from CPU arrays, reduced motion renders a static word that still follows typing, and no WebGL leaves a live-updating HTML word instead of a dead canvas.

Recreate it