pretext.cool — 17+ interactive demos, games, and typography experiments built with
@chenglou/pretext, the DOM-free text layout engine that's 500x faster than traditional browser layout.
Homepage — Browse 17 demos, 5 games, all open source
Pretext Playground Interactive sandbox · 0xNyk |
Pretext Breaker Breakout game · rinesh |
Tetris × Pretext Tetris game · shinichimochizuki |
PreText Experiments Dragon + Anime Walk · qtakmalay |
Somnai Demos 5-demo bundle · Maxwell Ingham |
Pretext Explosive Text particles · SamiKamal |
Star Wars Crawl Cinematic text · berryboylb |
Illustrated Manuscript Medieval art · dengshu2 |
Sea of Words Ocean text scene · Mukul-svg |
Singularity & Liquid Grid Black hole + dashboard · progrmoiz |
Drag Sprite Reflow Interactive reflow · dokobot |
Alarmy Editorial Clock Multi-column · SmisLee |
Responsive Testimonials Product UI · jalada |
Text Flow Demo Experiment · MaiMcdull |
World Model Test UI · CharlieGreenman |
Face × Pretext TF.js + text · sachinkasana |
DOM vs Pretext Performance benchmark · clawsuo-web |
pretext.cool is a curated collection of the best community-built demos and games powered by Pretext — Cheng Lou's TypeScript library for DOM-free text layout.
We collect, build, and host these demos in one place so you can explore, play, and get inspired — without hunting across dozens of repos.
Pretext is a TypeScript library by Cheng Lou (React core contributor, ReasonML creator, Midjourney engineer). It measures and positions text using Canvas instead of the DOM, then computes layout with pure arithmetic — making text reflow ~500x faster than traditional browser methods.
prepare() → one-time Canvas measurement (~19ms / 500 texts)
layout() → pure arithmetic reflow (~0.09ms / 500 texts)
- GitHub: github.com/chenglou/pretext
- npm:
@chenglou/pretext - Official Demos: chenglou.me/pretext
- Author: Cheng Lou
| Demo | Author | Description | Play |
|---|---|---|---|
| Pretext Playground | 0xNyk | Interactive ASCII dragon, physics letters, fire breathing, 3D text tunnel | ▶ Play |
| Pretext Breaker | rinesh | Breakout-style arcade — bricks made of text, with sound effects | ▶ Play |
| Tetris × Pretext | shinichimochizuki | Classic Tetris with Pretext-powered text layout | ▶ Play |
| Demo | Author | Description | Play |
|---|---|---|---|
| PreText Experiments | qtakmalay | Dragon animation, Anime Walk, and 9 more TypeScript demos | ▶ Play |
| Somnai Demos | Maxwell Ingham | 5 polished demos: editorial engine, fluid smoke ASCII, variable typography | ▶ Play |
| Pretext Explosive | SamiKamal | Text that shatters into particles | ▶ Play |
| Star Wars Crawl | berryboylb | The iconic opening crawl with perspective text animation | ▶ Play |
| Illustrated Manuscript | dengshu2 | Medieval illuminated manuscript with animated dragon | ▶ Play |
| Sea of Words | Mukul-svg | Text as ocean waves in a canvas scene | ▶ Play |
| Demo | Author | Description | Play |
|---|---|---|---|
| Singularity & Liquid Grid | progrmoiz | Black hole text effect + liquid dashboard + text vessels | ▶ Play |
| Drag Sprite Reflow | dokobot | Drag a sprite and watch text reflow in real time | ▶ Play |
| Alarmy Editorial Clock | SmisLee | Multi-column editorial flowing around an animated clock | ▶ Play |
| Responsive Testimonials | jalada | Auto-sizing quotes with Pretext measurement | ▶ Play |
| Face × Pretext | sachinkasana | TensorFlow.js face tracking drives real-time typography | ▶ Play |
| Text Flow Demo | MaiMcdull | News-style flowing layout with benchmark comparison | ▶ Play |
| DOM vs Pretext | clawsuo-web | Side-by-side performance benchmark | ▶ Play |
| World Model Test | CharlieGreenman | Minimal world-model UI experiment | ▶ Play |
| Demo | Link |
|---|---|
| Official Pretext Demos (Cheng Lou) | chenglou.me/pretext |
| Dragon Through Text (aiia.ro) | aiia.ro/pretext |
| Pretext Breaker (Netlify) | pretext-breaker.netlify.app |
pretext.cool is a static HTML hub — no framework needed. Each demo is a self-contained build from its open-source repo, served from a /demos/ directory. A lab shell provides prev/next navigation across all demos in one iframe player.
pretext.cool/
├── index.html # Collection landing page
├── hub.html # Lab shell (iframe player)
├── demos-manifest.json # Demo metadata & GitHub links
├── demos/ # 17 built demo artifacts
│ ├── pretext-playground/
│ ├── pretext-breaker/
│ ├── tetris-pretext/
│ └── ...
├── sitemap.xml
└── robots.txt
All demos are open-source. Here are the repos we've collected from:
View all 17 source repositories
| Demo | Repository |
|---|---|
| Pretext Playground | 0xNyk/pretext-playground |
| Pretext Breaker | rinesh/pretext-breaker |
| Tetris × Pretext | shinichimochizuki/tetris-pretext |
| Somnai Demos | somnai-dreams/pretext-demos |
| PreText Experiments | qtakmalay/PreTextExperiments |
| Pretext Explosive | SamiKamal/pretext-explosive |
| Star Wars Crawl | berryboylb/star-wars-pretext-demo |
| Singularity & Liquid Grid | progrmoiz/pretext-demos |
| Drag Sprite Reflow | dokobot/pretext-demo |
| Responsive Testimonials | jalada/pretext-demo |
| Alarmy Editorial Clock | SmisLee/alarmy-pretext-demo |
| Illustrated Manuscript | dengshu2/illustrated-manuscript |
| Text Flow Demo | MaiMcdull/pretext-text-flow-demo |
| Sea of Words | Mukul-svg/sea-of-words |
| World Model Test | CharlieGreenman/world-model-test |
| Face × Pretext | sachinkasana/pretext-demo |
| DOM vs Pretext | clawsuo-web/pretext-demo |
This is a hobby project by an independent developer. Not affiliated with, endorsed by, or connected to Cheng Lou or the official Pretext project. All demo source code belongs to their respective authors. We simply celebrate and showcase the amazing community that has grown around Pretext.
- 🌐 Live Site: pretext.cool
- 📦 Official Library: github.com/chenglou/pretext
- 📖 npm Package: @chenglou/pretext
- 🎯 Official Demos: chenglou.me/pretext