Topology Morph
One document migrates across radically different region topologies while keeping reading continuity.
Most layout systems assume one stable topology: a box, a shape, or a column set. This demo asks what happens when the topology itself changes. The same document morphs between columns, staircases, canyons, and ribbon-like paths, while the reading cursor remains continuous.
prepareWithSegments()layoutNextLine() What this demonstrates
A document transitioning between different spatial logics instead of only changing width. The morph is not a letter animation; it is a redefinition of the path through which lines are generated.
Relevant Pretext API
prepareWithSegments()for one-time preparationlayoutNextLine()for topology-dependent widths and x-offsets at each line
Why this matters
This is a strong demonstration that layout is not tied to one container. If the topology can change continuously, then responsive composition can become a smooth transformation problem instead of a series of hard breakpoints.
Quick start
import { prepareWithSegments, layoutNextLine, buildFont } from '@chenglou/pretext';
const prepared = prepareWithSegments(text, buildFont(15));
let cursor = { segmentIndex: 0, graphemeIndex: 0 };
for (let y = 0; y < height; y += lineHeight) {
const from = topologyGeometry('columns', y / height);
const to = topologyGeometry('ribbon', y / height);
const width = lerp(from.width, to.width, progress);
const x = lerp(from.xOffset, to.xOffset, progress);
const line = layoutNextLine(prepared, cursor, width);
if (!line) break;
drawLine(line.text, margin + x, y);
cursor = line.end;
}