Text Flow

Real-time text reflow around arbitrary shapes, powered by pretext — a pure-arithmetic text measurement engine that calculates line breaks without touching the DOM.

Click the canvas to place shapes, then drag them around. The text reflows instantly on every frame using pretext's variable-width line layout. Each line is measured and broken independently, allowing text to wrap tightly around circles, hexagons, rectangles, and diamonds.

Pretext Engine Variable-Width Layout Canvas Rendering Draggable Shapes Real-time Reflow 60fps Typography

// controls

Click Place a shape at cursor position. Select shape type from the left toolbar.

Drag Move existing shapes. Text reflows in real time as you drag.

Scroll Resize a shape under the cursor with the mouse wheel.

Delete Remove the shape under the cursor.

F Toggle fullscreen mode.

H Hide / show all UI controls.