← lab

Stretchtext

since May 2026

In 1967 Ted Nelson sketched stretchtext — a writing surface where any token could be pulled apart in place to reveal a longer, more detailed version of itself. No new page, no footnote, no modal. The reader controls the depth.

The hard part was never the data model; it was the motion. Each variant below is a different answer to the question of how a sentence should grow — same content, different geometry of the reflow.

Built to roughly 50% of the original vision. Six variants below explore the geometry; Ff is the one cc-stretch uses.

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

word-FLIP

A good harness compresses skill where skill was never the point. The mental model is closer to a sentence elongating than to a drawer opening. Pre-LLM, you'd cut. Post-LLM, you stretch.

Per-word transforms via the Web Animations API. Each affected word measures its before/after rect and animates the delta. Reactive streaming push, but every word renders as display: inline-block — typography reads slightly blocky at rest.

Your system asks for less motion, so the phrases open without moving.

Aa word-FLIP

Per-word transforms via the Web Animations API. Each affected word measures its before/after rect and animates the delta. Reactive streaming push, but every word renders as display: inline-block — typography reads slightly blocky at rest.

Bb char-stream

Plain inline DOM at rest, proper typography, no per-word spans. Pretext precomputes the target paragraph height in pure JS, the parent reflows once, then elaboration chars stream in via opacity.

Cc width-grow

Each elaboration word is an inline-block whose width animates from 0 to its natural value, all simultaneously. Anchors and surrounding prose are physically pushed by the changing geometry rather than teleported via FLIP.

Dd inline-FLIP

Words stay display: inline with relative positioning; left/top deltas animate after the DOM rewrite. Per CSS Positioned Layout, relative offsets are visual only — surrounding layout is unaffected, so kerning, baselines, and line breaks all remain native inline.

Ee spring-physics

Critically-damped springs in place of cubic-bezier easing. Every word in the paragraph keeps its native inline layout and rides a spring from its old place to its new one; a click while words are still moving takes each over at its current speed. Explores whether physical settling reads as more honest than tuned curves when the reflow is irregular.

Ff word-stream

How cc-stretch grows a phrase in Claude Code, where Claude writes both depths as it replies. The short form's words stay put; the long form's other words arrive whole, one at a time, outward from them, so every gap widens at once and the line reflows after each word. Nothing fades or slides: in a terminal, half a word reads as a typo. Plain text throughout; the added words stay a shade brighter.

Trade-offs so far

Aa is the only one of the first four built that stays stable when the expansion forces a line wrap mid-paragraph — the FLIP technique can absorb the full reflow into a single coordinated animation. It is also nearly twice as much code as Bb or Cc.

Bb feels alive in a way the others don't, but it cheats: the "expansion" is really a fast typewriter, and on long passages the eye notices it isn't keeping up.

Ee does what Aa does — every word in the paragraph slides to its new place — with native inline type at rest and a spring for a curve. At full speed the two are hard to tell apart: 80 ms in, Aa's words have covered 70% of their way and Ee's 31%, and both settle within about half a second. Where Ee differs is a second click mid-motion: each word turns around at the speed it had, instead of starting over.

Ff never moves a word. The long version's words arrive whole, one at a time, and each one pushes the rest of the line along at once. It is the only one that works where nothing can fade or slide, which is why cc-stretch uses it in a terminal. It also takes longer than the ones that slide: 0.45 to 1.4 s, more for longer phrases.

Stretchtext only feels right when the reader forgets it is animation at all.