Dragon Text Reflow: Pretext Playground

Dragon Text Reflow

layoutNextLine

A multi-segment dragon slithers across the canvas while text flows around its body. Per-line exclusion zones are merged from all overlapping segments every frame.

Segments10

Lines: 0Layout: 0µs

The dragon slithers across the page and text flows around its body in real time. Each frame, pretext recalculates which lines are obstructed by the dragon segments and adjusts the available width per line. This is the same layoutNextLine API used in the obstacle flow demo, but here the obstacle is animated and made of multiple overlapping circles that form a serpentine body. The exclusion zones are merged per line so text wraps smoothly around curves. Watch how the text reflows as the dragon moves. Each segment casts its own circular shadow on the text lines, and where segments overlap, the exclusion zones merge into one continuous gap. This technique could power editorial layouts with animated illustrations, interactive storytelling experiences, or games where text is part of the world. The entire layout is computed in pure JavaScript with zero DOM measurements. Pretext handles the line breaking arithmetic while requestAnimationFrame drives the dragon animation. Even with a dozen segments moving every frame, the layout stays fast because pretext operates on pre-measured character data. No reflows, no forced layouts, no jank. Just math.