Text that lives, not just sits.
An immersive, interactive Canvas-based experience where text is the protagonist. Built with @chenglou/pretext for DOM-free text measurement, custom spring physics, and scroll-driven scene transitions.
🌐 Live Demo · 🐛 Report Bug · 💡 Request Feature
Experience text as never seen before — scattered particles that assemble into words, physical objects that collide and scatter, and editorial layouts that flow around animated obstacles.
- Zero DOM reads — Entire hot path (physics + layout + render) is pure arithmetic on Canvas 2D
- 60fps target — Optimized for smooth animations with minimal overhead
- Custom physics engine — Lightweight spring physics system (~200 lines) built specifically for text manipulation
| Scene | Name | Description |
|---|---|---|
| 1 | Awakening | Watch scattered ASCII particles gravitate and snap into readable text. Click to create repulsion fields that scatter characters. |
| 1.5 | Interlude | A bridge scene explaining the physics concepts behind what you just witnessed. |
| 2 | Collision | Words become independent physics bodies. Drag to aim and launch projectiles at them. Watch letters scatter, shatter, and spring back. Features combo system, shockwave rings, and narrative commentary. |
| 2.5 | Interlude 2 | Transition scene teasing upcoming experiences. |
| 3 | Flow | (In Development) Obstacle-aware magazine-style text layouts that reflow in real-time. |
| 6 | Finale | (In Development) All techniques combined in a cinematic crescendo. |
- Film grain overlay for cinematic feel
- Velocity-based color shifting (calm words glow white, fast words turn warm orange)
- Motion trails and impact flash effects
- Smooth crossfade transitions between scenes
- Responsive design with touch support
| Layer | Technology |
|---|---|
| Language | TypeScript |
| Bundler | Vite |
| Rendering | Canvas 2D |
| Text Measurement | @chenglou/pretext |
| Animation | Custom rAF loop + spring physics |
| Input | Mouse, scroll, touch |
| Fonts | Inter + Playfair Display |
- Node.js 18+
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/Poojan38380/TextVerse.git
cd TextVerse
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173 in your browser to see the app.
npm run dev # Start development server with HMR
npm run build # Type-check and build for production
npm run preview # Preview production build locallynpm run buildThe optimized production build will be in the dist/ folder, ready to deploy.
src/
├── engine/
│ ├── physics.ts — Spring bodies, velocity, collision detection
│ ├── renderer.ts — Canvas 2D draw loop, layers, compositing
│ ├── input.ts — Mouse, scroll, touch handlers
│ └── timeline.ts — Scene manager, transitions, state machine
├── scenes/
│ ├── 01-awakening.ts — Particle-to-text assembly
│ ├── 015-interlude.ts — Bridge scene
│ ├── 02-collision.ts — Words as physics bodies
│ ├── 025-interlude2.ts — Second bridge scene
│ ├── 03-flow.ts — Obstacle-aware layouts (WIP)
│ └── 06-finale.ts — Grand finale (WIP)
├── shared/
│ ├── fonts.ts — Font loading synced with pretext
│ ├── colors.ts — Palette system, gradients
│ └── utils.ts — Math helpers (lerp, clamp, easing)
└── main.ts — Entry point, canvas setup, scene router
| Metric | Target |
|---|---|
| Frame rate | 60fps (16.6ms budget) |
prepare() calls |
Once per text at load/resize |
layout() calls |
Every frame (~0.0002ms each) |
| Physics bodies | Up to 2000 at 60fps |
| Memory | < 50MB |
- Phase 1: Foundation + Scene 1 (Awakening) ✅
- Phase 2: Physics Text (Scene 2: Collision) ✅
- Phase 3: Obstacle-Aware Flow (Scene 3)
- Phase 4: Typography Playground (Scene 4)
- Phase 5: Conversation/Chat Bubbles (Scene 5)
- Phase 6: Finale — All Techniques Combined (Scene 6)
See STATUS.md for detailed progress tracking.
Contributions are welcome! This is an open-source project meant to showcase the possibilities of DOM-free text measurement and interactive Canvas experiences.
Please read our Contributing Guide and Code of Conduct before getting started.
- Fork the repository
- Create a feature branch:
git checkout -b feat/your-feature - Make your changes
- Ensure the build passes:
npm run build - Commit with a descriptive message:
git commit -m "feat: add obstacle dragging to Scene 3" - Push to your fork and open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
- @chenglou/pretext — The revolutionary text measurement library that makes this possible
- pretext-playground — Inspiration for physics chain and Canvas rendering
- Bret Victor's "Inventing on Principle" — Live parameter manipulation philosophy
- Casey Reas / Processing — Generative text art inspiration
Project Link: https://github.com/Poojan38380/TextVerse
⭐ If Textverse impressed you, consider giving the repo a star!