A liquid typography playground, inspired by Danqi Qian's PreText — rebuilt from scratch with many more animation modes, full typographic & color control, presets, and one-click sharing.
Your text fills the screen like a pool of ink. An animated field makes words fade, breathe and drift; moving the cursor stirs ripples through the sentences, clicking drops a splash.
Zero dependencies. No build step. Runs offline from a folder.
Option A — just open the file:
open index.html # macOS — or double-click it in Finder
Option B — serve it (nicer URLs, needed only if your browser is strict about file://):
cd pretext-animations
python3 -m http.server 4173
# then visit http://localhost:4173
| Section | Options |
|---|---|
| Text | pool text, multiple scatter sentences, scatter frequency, letter case, layout shuffle |
| Typography | 10 font stacks, size, line height, word spacing, justification, bold/italic scatter |
| Color | 8 quick themes, background/ink/accent pickers, 4 color modes (solid, duotone, heatmap, rainbow), hue shift |
| Motion field | 8 modes — ink flow, waves, spotlight, vortex, rain, scanline, breathe, still pool — plus speed, scale, ink density, opacity range, drift |
| Ripples & cursor | move-ripples, click splashes, strength/speed/width/decay, cursor attract ⟷ repel with radius |
| Playback | global speed, pause |
| Presets | 9 curated scenes + a tasteful randomizer |
H hide controls · F fullscreen · Space pause · R randomize · S save PNG · L copy share link
- 🔗 Copy share link — encodes your entire scene (text, colors, physics) into the URL.
Anyone opening the link sees exactly what you made. Works on any static host;
on
file://the link only resolves on your own machine. - 📷 Save PNG — snapshot of the current frame at full resolution.
- ⏺ Record video — captures up to 30 s of the canvas as WebM (MP4 on Safari), ready for chat/social.
- 📤 Share… — native share sheet where the browser supports it.
To share links publicly, host the folder anywhere static — e.g. GitHub Pages:
git init && git add -A && git commit -m "feat: pretext studio"
gh repo create pretext-studio --public --source=. --push
gh api repos/{owner}/pretext-studio/pages -X POST -f 'source[branch]=main' -f 'source[path]=/'
index.html shell + script order
css/style.css panel & chrome styling
js/utils.js math, seeded RNG, 3-D value noise/fBm, color & clipboard helpers
js/presets.js defaults, fonts, themes, presets, randomizer
js/layout.js fills the viewport with words, weaves in scatter sentences
js/fields.js animation fields + ripple physics
js/renderer.js canvas loop, word-sprite cache, pointer input
js/share.js URL-encoded settings, PNG export, WebM recorder
js/ui.js schema-driven control panel, shortcuts, toasts
js/main.js boot
Everything renders on a single <canvas> — words are cached as sprites in solid-color mode,
so several thousand words animate at 60 fps.