Text Black Hole
Words orbit, compress, and lens around a singularity with radial line-width control.
This demo is not just a vortex animation. The singularity creates a radial width field: lines near the event horizon become narrower, while lensing shifts them laterally as if the reading path were bending in curved spacetime. The same paragraph effectively falls through a changing gravitational geometry.
prepareWithSegments()layoutNextLine() What this demonstrates
Radial text composition around a singularity. Near the center, the available width collapses; farther away, lines recover. Lensing offsets make the reading path curve instead of merely shrinking in place.
Relevant Pretext API
prepareWithSegments()for one-time preparation of the source textlayoutNextLine()for per-line widths sampled from a radial field
Why this matters
It proves that line width can be driven by a more complex system than a shape outline. Once text measurement is programmable, even a fictional spacetime model can become a viable layout input without falling back to trial-and-error DOM measurement.
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 dy = y / height - singularityY;
const compression = Math.exp(-(dy * dy) / 0.02);
const width = baseWidth - compression * gravity * 6.4;
const x = margin + lensingOffset(dy);
const line = layoutNextLine(prepared, cursor, width);
if (!line) break;
lines.push({ text: line.text, x, y });
cursor = line.end;
}