← Lab homeDrag a sprite across text and watch paragraphs reflow around it in real time.
What It Does
This demo presents the clearest argument for why fast, reliable text layout matters. Drag a sprite across a paragraph of text and watch the words flow around it smoothly with zero latency. As the sprite moves, the layout recalculates continuously—on every mousemove event, the container width changes based on the sprite's position, and the text respects that constraint instantly. The effect is simple but profound: words make room for the obstacle, gaps close behind it, and the paragraph breathes around the moving shape.
Without Pretext, achieving this effect forces a painful tradeoff. Measuring text every frame would trigger expensive layout reflows in the browser, causing jank and stutter. The typical workaround is debouncing: only recalculate layout every 100ms or more, accepting visible lag and jerky motion. With Pretext, the cost of layout recalculation drops dramatically, making it practical to run on every mousemove without penalty. The result is responsive, delightful interaction that feels responsive because it actually is.
Technical Highlights
The demo uses a variable-width layout function where the available width for text changes per line based on the sprite's current position. Different lines may have different widths because the sprite only blocks certain vertical zones. This requires frame-by-frame recalculation and per-line width constraints—exactly the kind of fine-grained layout control that Pretext enables.
The implementation serves as a perfect skeptics' demo. Show a colleague the smooth, lag-free reflow, then ask: "How would you do this with traditional DOM measurement?" The answer is usually: "I'd debounce it" or "I'd fake it with fixed widths." Pretext makes the ideal solution the practical solution. It's the most convincing proof that fast layout unlocks a new class of interactive experiences.
Pretext APIs Used
| API | Purpose |
|---|---|
layout() |
Recalculate text wrapping with variable container width based on sprite position |
measure() |
Validate character and line positions after reflow |
| Per-line constraints | Apply different available widths to different lines based on sprite geometry |
How to Try It
Visit the live demo at pretext.cool and start dragging the sprite through the text. Feel how the text flows smoothly without stutter or delay. Watch the responsive layout adapting in real time. Then check the source code on GitHub to see how the variable-width layout function works and why Pretext makes this interaction practical.
Built By
Created by dokobot. Explore more Pretext examples and documentation at pretext.cool.
