Text Particle Pool
Characters rain down, pile up with physics collisions, and accumulate into a pool you can push around.
Every character is an independent physics particle with gravity, bounce, and collision detection. Letters spawn from the top, fall, bounce off walls and the floor, collide with each other, and gradually pile up. Move your mouse to repel the accumulated letters — watch them scatter and resettle.
prepareWithSegments()layoutWithLines() What this demonstrates
Text as physical matter. Characters extracted via layoutWithLines() become independent
particles with gravity, bounce, and inter-particle collision. They accumulate into a pool that
responds to mouse interaction — push, scatter, and watch them resettle.
Relevant Pretext API
prepareWithSegments(text, font)— prepare text for character extractionlayoutWithLines(prepared, width, lh)— get lines to iterate characters
Why this is impressive
Up to 4000 character particles with real-time collision detection, gravity, bounce, and mouse interaction at 60fps. Each particle retains its identity as a specific letter from the original text. The pool naturally forms an organic pile shape from pure physics.
Quick start
import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext';
// Extract characters from text
const prepared = prepareWithSegments(text, '12px Inter');
const lines = layoutWithLines(prepared, width, 14).lines;
const chars = lines.flatMap(l => [...l.text].filter(c => c !== ' '));
// Each character → physics particle
particles.push({
char: chars[i],
x: random() * width, // spawn across top
y: -10, // above canvas
vx: (random()-0.5) * 60,
vy: random() * 30,
settled: false,
});
// Physics loop:
// 1. Gravity: vy += gravity * dt
// 2. Floor: bounce with restitution
// 3. Walls: bounce off left/right
// 4. Collisions: push overlapping particles apart
// 5. Settle: mark as settled when velocity near zero
// 6. Mouse: repel particles within radius