Text Origami Panels — Pretext Lab

What this demonstrates

Text continuing across a foldable surface. Each panel has its own effective width after the fold transform, but the reading cursor remains continuous, so the sheet still behaves like a single authored document.

Relevant Pretext API

prepareWithSegments() for one-time preparation of the sheet content
layoutNextLine() for panel-by-panel line flow with changing widths

Why this matters

This is a useful mental model for foldables, packaging, accordions, and multi-surface print previews. The challenge is not rendering the folds; it is preserving reading continuity while each region becomes narrower or wider under transformation.

import { prepareWithSegments, layoutNextLine, buildFont } from '@chenglou/pretext';

const prepared = prepareWithSegments(text, buildFont(15, 'Georgia, serif'));
let cursor = { segmentIndex: 0, graphemeIndex: 0 };

for (const panel of panels) {
  let y = panel.top;
  while (y < panel.bottom) {
    const width = panel.innerWidthAfterFold();
    const line = layoutNextLine(prepared, cursor, width);
    if (!line) break;
    drawLine(line.text, panel.x, y);
    cursor = line.end;
    y += lineHeight;
  }
}