Pretext Project — Typeflow Arena

The Pretext Project ("Typeflow Arena") is a research experiment in text layout performance. Its thesis: you can measure text and compute word-wrapped layouts without ever touching the DOM — no getBoundingClientRect, no forced reflows — using only an offscreen canvas and arithmetic.

The Playground

• Six physics modes — Burst, Rain, Wave, Orbit, Spiral, and Columns animate text particles across a full-screen canvas.
• Live typography controls — four fonts, font size (16–96px), container width, and particle count sliders; every particle shows its measured bounding box, line-break ticks, and a width × height metric tag.
• Real layout engine — prepare(text, font) measures via canvas measureText with memoized caching; layout(handle, width, lineHeight) word-wraps in pure arithmetic.
• Live metrics panel — text width, line count, block height, cumulative layout ops, FPS — and a "DOM reflows" counter that stays proudly at zero.
• Auto-play demo — cycles modes, phrases, and colours automatically for a hands-free tour.

Why It Matters

Layout thrashing is one of the most common front-end performance killers. This experiment demonstrates a practical alternative for animation-heavy UIs: measure once on an offscreen canvas, cache, and let the render loop run on math alone.