Pretext Demos

by @chenglou/pretext - DOM-free text layout engine

Text Flow

Canvas Interactive

Text dynamically reflows around your mouse cursor. Move your mouse to see thousands of characters re-layout in real-time at 120fps.

layoutNextLine() x N per frame ~ 0.1ms

Chat Bubbles

DOM Interactive

Shrink-wrap chat bubbles that perfectly fit their content width - a classic CSS pain point solved elegantly with Pretext measurement.

walkLineRanges() for shrink-wrap ~ 0.001ms

Text Wave

Canvas Interactive

Text rendered on Canvas with a dynamic sine wave distortion. Each character is individually positioned using Pretext's line layout data.

prepareWithSegments() once, layout per frame

Gravity Text

Canvas Physics

Words fall from the sky with gravity and stack up at the bottom. Click to launch them back up. Pretext measures each word for pixel-perfect collision.

prepare() per word for width measurement

Text Invaders

Canvas Interactive Game

Typing game! Words fall from the sky — type them to destroy them before they reach the bottom. Combo system, levels, and particle explosions.

prepare() + layout() for word sizing at 120fps

Music Visualizer

Canvas Interactive

Text particles dance to synthesized music! Three genres (Electronic/Jazz/Ambient) and three visualization modes (Fountain/Ring/Rain). Beat detection drives particle emission.

Web Audio API + Pretext text particles