Skip to content

A public project by Famst Agency — founded by Abdullah Tarar in Punjab.

F Experiments by Famst Agency
research Active

Pretext Project — Typeflow Arena

An interactive canvas playground proving you can measure and lay out text with zero DOM reads — six physics modes, live metrics, and a real word-wrap engine in pure math.

Published Apr 05, 2026 8 views By Famst Agency
Try the Demo →

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.

#canvas #typography #performance #text-layout #animation #research

Like this experiment?

Pitch the next one — the lab reviews every idea honestly.

Submit an Idea