Interactive demos exploring programmable text layout with
@chenglou/pretext.
prepare() once, layout() at any width — instantly.
All 39 Demos
📐 Basic Paragraph Measurement
Prepare once, measure at any width instantly — the core Pretext workflow.
prepare()layout() ↔️ Resize Relayout Playground
Drag a width slider and watch dozens of text blocks relayout in real time.
prepare()layout() 📦 Tight Multiline Shrink-Wrap
Compute the tightest bounding box for wrapped text — no trial-and-error needed.
prepareWithSegments()layoutWithLines() ⚡ DOM vs Pretext Architecture
A side-by-side comparison of traditional DOM measurement vs Pretext's prepare/layout model.
prepare()layout() 🧱 Text-Aware Masonry Cards
Pack cards into a masonry grid by predicting text heights before rendering.
prepare()layout() 💬 Chat & Feed Bubbles
Size chat bubbles perfectly and handle width changes gracefully.
prepare()layout()layoutWithLines() 🎨 Canvas Text Layout
Compute line breaks with Pretext and render to <canvas> — beyond the DOM.
prepareWithSegments()layoutWithLines() 🌍 Multilingual Stress Test
Test Pretext against CJK, Arabic, emoji, bidi, and edge-case scripts.
prepare()layout()setLocale() 🌊 Flow Around Obstacle
Text flows dynamically around a draggable shape — line by line layout control.
prepareWithSegments()layoutNextLine() ✨ Rich Inline Segments
Layout text with mixed styles, code spans, and inline badges using segments.
prepareWithSegments()layoutWithLines() 📰 Editorial Engine
Editorial layout with floating orbs that displace text in real time.
prepareWithSegments()layoutNextLine()layoutWithLines() 🐉 Dragon Chase
A chain of 40 glowing spheres chases your cursor — text reflows around every orb at 60fps.
prepareWithSegments()layoutNextLine() 🌊 Wave Distortion
A sine wave continuously warps line widths — mesmerizing flowing text animation.
prepareWithSegments()layoutNextLine() 🎮 Text Breakout
Classic Breakout, but the bricks are words. Smash them and watch text reflow live.
prepareWithSegments()layoutWithLines() 🪨 Gravity Letters
Letters fall, bounce, and explode with physics — then reassemble into readable text.
prepareWithSegments()layoutWithLines() 🌀 Text Vortex
Characters spin in a colorful vortex, then smoothly reassemble into readable text.
prepareWithSegments()layoutWithLines() 🖤 Text Silhouette Fill
Text fills arbitrary shapes — heart, star, circle — each line matching the silhouette boundary.
prepareWithSegments()layoutNextLine() 📰 Multi-Column Magazine
Text flows across multiple columns with pull quotes — an InDesign-like editorial layout.
prepareWithSegments()layoutNextLine() 💧 Text Waterfall Cascade
Text cascades down shelves of decreasing width — a typographic waterfall.
prepareWithSegments()layoutNextLine() ⏳ Text Hourglass
A functional hourglass timer — text shaped as an hourglass with sand trickling through.
prepareWithSegments()layoutNextLine() 🎵 Audio-Reactive Typography
Music drives text width, line height, and font size in real time — text breathes with sound.
prepare()layout() 🗺️ Text Terrain Map
Sweep width from min to max and plot text height as a topographic landscape.
prepare()layout()walkLineRanges() 🌡️ Typographic Heatmap
Lines color-coded by character density — reveals rivers of whitespace in real time.
prepareWithSegments()layoutWithLines() 🔷 Voronoi Text Cells
Drag seed points and watch text reflow inside shifting Voronoi cells.
prepareWithSegments()layoutNextLine() 🌧️ Text Rain
Letters fall like rain, land on your cursor, and accumulate into readable phrases.
prepareWithSegments()layoutWithLines() 💥 Text Collision World
Text blocks as physics objects — drag, collide, stack, and watch them reflow on impact.
prepare()layout() 🌋 Text Earthquake
Click to crack a paragraph along a fault line — both halves reflow to their broken shapes.
prepareWithSegments()layoutNextLine() ⚡ Streaming Text Prediction
Simulates LLM streaming with real-time height prediction — smooth layout as tokens arrive.
prepare()layout() 🧠 Living Document System
An autonomous editorial surface that reprioritizes cards and reflows text blocks in real time.
prepare()layout()layoutNextLine() 🫧 Text Fluid Field
A paragraph bends through a simulated velocity field instead of a fixed container shape.
prepareWithSegments()layoutNextLine() 📄 Text Origami Panels
Text flows across foldable paper panels whose geometry changes with each crease.
prepareWithSegments()layoutNextLine() 🕳️ Text Black Hole
Words orbit, compress, and lens around a singularity with radial line-width control.
prepareWithSegments()layoutNextLine() 🗞️ PDF Reflow Engine
The same article is re-composed into phone, tablet, poster, and editorial spreads instantly.
prepare()layout()layoutNextLine() 🎬 Subtitle Composer
A cinematic subtitle engine with safe zones, speaker separation, emphasis, and timing-aware wrapping.
prepareWithSegments()layoutWithLines() 📊 Incremental Layout Profiler
Inspect what changes trigger prepare work versus cheap relayout in a devtool-style profiler.
prepare()layout()profilePrepare() 🧬 Topology Morph
One document migrates across radically different region topologies while keeping reading continuity.
prepareWithSegments()layoutNextLine() ⛵ Text Regatta
A sailboat cuts through a sea made of text, with swell, wake turbulence, and current-driven reflow.
prepareWithSegments()layoutNextLine() 🫧 Text Particle Pool
Characters rain down, pile up with physics collisions, and accumulate into a pool you can push around.
prepareWithSegments()layoutWithLines() 🌊 Text Ocean SPH
Thousands of character particles form a fluid ocean via SPH simulation — a boat floats on the letter waves.
prepareWithSegments()layoutWithLines()