Layoutmaster

Demos


Browser demos for the frontend work Layoutmaster unlocks: text size, continuation, shaped text, dynamic surfaces, and live effects without DOM measurement loops.

Every page below renders from data returned by Layoutmaster. The browser is the painter, not the secret layout oracle.

Start With Text As Data

form()

Ask how tall a text fragment becomes and get positioned pieces back before anything renders.

heightpiecesbaselines
Pieces

Inspect the raw piece contract: coordinates, sizes, baselines, line guides, and selectable text fragments.

contractdebugpainting
Browser Fonts

Probe Layoutmaster's browser font scope: same CSS stack, native fallback, DOM text beside solved pieces.

font scopefallbackDOM baseline
fit()

Fill a bounded box, stop exactly at overflow, and get both consumed and remaining content.

overflowbounded UIremaining text
flow()

Move one passage through several regions while preserving continuation data across each target.

continuationregionspanels
BIDI Lab

Compare native browser bidi rendering beside Layoutmaster's solved RTL, LTR, number, and punctuation pieces.

ArabicHebrewnative DOM

Shape The Reading Surface

pour()

Pour text into primitive shapes and get only the fragments that genuinely fit inside the contour.

circlespolygonscontainment
pour() Image

Turn a PNG alpha silhouette into a readable container, then pour authored text into that interior.

alphaimage shapeeditorial
Exclusion

Drag live exclusion fields through text and watch returned line geometry update around the obstacle.

wrapdragspatial field
Exclusion Image

Sample an image alpha channel into a compact wrap field and move that silhouette without re-sampling.

PNG/WebPalpha maskwrap geometry
Assembly Rig

Build a crude stick figure from primitive parts and re-solve text around the current animated pose.

assemblyrigmotion

Scale And Motion

Dancing Text

Extract moving video silhouettes into cached spatial fields, then drive live text around each frame.

videoanimationlive layout
Book Masonry

Pack every chapter as a live card, resize the wall, and inspect the solved Layoutmaster piece geometry.

masonryfit()geometry