Typogenesis — Living Typography

Where text breathes, flows, and becomes.

An advanced editorial text layout engine built on pretext. Text flows around animated obstacles, responds to pressure with warm color shifts, and lives atop a generative particle flow field.

Zero DOM reads. Zero reflows. Pure arithmetic.

👉 Live Demo

Showcase

Upgraded Version — Ink Theme (Dark)

Paper Theme (Light)

🎥 Watch the full demo video

Original (pretext demo)

Features

Typography

• Multi-column layout with cursor handoff (up to 3 columns)
• Adaptive headline sizing via binary search — largest possible without word breaks
• Shrinkwrap pull quotes — tightest bounding box with zero dead space
• Mixed-font inline flow — technical terms in monospace, @mentions as styled chips
• Gradient drop cap with drop-shadow filter
• Cormorant Garamond italic for pull quotes

Interaction

• Drag orbs to reposition — text reflows in real time
• Click to pause/resume orb animation
• Double-click to remove an orb
• Click empty space to spawn a new orb (max 12)
• Keyboard navigation — Tab to focus orbs, Enter/Space to toggle, arrows to nudge

Visual

• Dual themes — Ink (dark editorial) and Paper (light editorial)
• Flow field background — 1200 particles trace invisible wind currents
• Orb-driven wakes — particles scatter and swirl around moving obstacles
• Pressure-reactive text — lines glow amber/rose when compressed by orbs
• Film grain overlay + radial vignette
• Staggered entrance animations on page load

Performance

• Layout computation: < 0.5ms per frame
• 0 DOM reads — text measured once via canvas measureText, cached forever
• 0 layout reflows — all positioning is explicit via translate3d
• Color-coded perf meter (green < 0.5ms, amber < 1ms, red > 1ms)

Quick Start

cd D:\Arthur\editorial-engine-adv
npm install
npm run dev       # dev server with HMR
npm run build     # production bundle (dist/)
npm run preview   # serve production build

Architecture

src/
├── main.ts              ← Thin entry point (~75 lines)
├── config.ts            ← All constants, dual themes, orb definitions
├── types.ts             ← Shared type definitions
├── render.ts            ← DOM pooling, text projection, GPU transforms, flow field
├── interaction.ts       ← Pointer event queue, hit-testing, drag, mode switching
├── flow-field.ts        ← 1200-particle system, simplex noise vector field, trails
├── simplex-noise.ts     ← 3D simplex noise (seeded, reproducible)
├── physics.ts           ← Standalone orb simulation module
├── layout-engine.ts     ← Standalone headline fit + column layout
├── ui.ts                ← Control panel, perf meter, theme toggle, settings persistence
│
└── pretext/             ← pretext layout engine (frozen, unmodified)
    ├── layout.ts        ← Public API: prepare, layout, walk
    ├── measurement.ts   ← Canvas text measurement
    ├── analysis.ts      ← Text segmentation, normalization
    ├── inline-flow.ts   ← Mixed-font inline layout
    ├── line-break.ts    ← Line breaking engine
    ├── bidi.ts          ← Bidirectional text
    └── text-modules.d.ts

Key Design Decisions

• No framework — vanilla TypeScript with DOM pooling
• GPU-composited transforms — orbs use translate3d, never left/top
• Separated concerns — render.ts handles DOM, interaction.ts handles input, flow-field.ts handles particles
• Settings persistence — theme, orb count, speed saved to sessionStorage
• Accessibility — ARIA labels on orbs, keyboard navigation, prefers-reduced-motion support

How It Works

1. Preparation phase: pretext measures every word via canvas measureText, caches widths
2. Layout computation: pure arithmetic on cached widths — slot carving, obstacle intersection, column handoff
3. DOM projection: explicit positioning of each line element — no layout tree queries
4. Flow field: simplex noise drives 1200 particles, orbs disturb the field, trails accumulate

The entire render loop runs in under 1 millisecond regardless of page complexity.

Credits

This project is an extended upgrade of the original editorial-engine demo from the pretext repository by Cheng Lou.

pretext — Copyright (c) 2026 Cheng Lou. Licensed under MIT.

The src/pretext/ subdirectory contains an unmodified copy of the pretext layout engine, included here for standalone build convenience.

Fonts

• Iowan Old Style / Palatino Linotype — body text
• Cormorant Garamond — pull quotes
• JetBrains Mono — inline code

All fonts loaded via Google Fonts. See index.html for details.

Contributing

Contributions are welcome! Please read our Contributing Guide before submitting pull requests.

This project follows a Code of Conduct.

License

MIT License — See the LICENSE file for details.