Text Fluid Field
A paragraph bends through a simulated velocity field instead of a fixed container shape.
Unlike a wave demo with one predefined function, this demo drives text from a full 2D field made of vortices and a cursor attractor. Each line asks the field how much room it has and how far it should drift, turning the paragraph into something closer to flowing matter than a static block.
prepareWithSegments()layoutNextLine() What this demonstrates
A paragraph controlled by a velocity field instead of a single width function. Each line is displaced and compressed by the local field sample, so the text behaves like a fluid passing through vortices rather than a block reacting to one obstacle.
Relevant Pretext API
prepareWithSegments()to prepare the paragraph oncelayoutNextLine()to query one field-dependent line at a time
Why this matters
This is the kind of effect that is awkward in CSS because every line has a different width and a different x-offset. Pretext makes that per-line control cheap enough to drive from a live simulation instead of a static shape.
Quick start
import { prepareWithSegments, layoutNextLine, buildFont } from '@chenglou/pretext';
const prepared = prepareWithSegments(text, buildFont(15));
let cursor = { segmentIndex: 0, graphemeIndex: 0 };
let y = 0;
while (y < fieldHeight) {
const field = sampleVelocityField(0.5, y / fieldHeight);
const width = baseWidth - field.magnitude * 140;
const x = margin + field.vx * 48;
const line = layoutNextLine(prepared, cursor, width);
if (!line) break;
lines.push({ text: line.text, x, y });
cursor = line.end;
y += lineHeight;
}