← Lab homeText that shatters — explosive particle effects powered by Pretext layout.
What It Does
Pretext Explosive transforms static text into a dynamic physics simulation. Click anywhere on the page and watch text shatter into individual character particles that burst outward with velocity, gravity, rotation, and fade. Each character becomes an independent body responding to forces in real time. The effect is chaotic and satisfying—perfect for attention-grabbing headers, call-to-action moments, or just delightful interaction.
The demo measures each character's position and dimensions using Pretext, then applies physics forces every animation frame. As particles fall, rotate, and collide with gravity, their properties update continuously. Without Pretext's measurement capabilities, tracking individual character positions would require manual DOM inspection or CSS calculation—expensive operations that would stutter the animation. Here, layout recalculation happens efficiently enough to run the particle system on every frame.
Technical Highlights
This demo showcases how Pretext enables performant animation of text-level granularity. Instead of animating the whole block, each character gets its own lifecycle: initial position, velocity vector, acceleration due to gravity, rotational spin, and alpha fade. The explosion radius and force intensity create a natural burst pattern. The compact codebase demonstrates that complex visual effects don't require heavy animation libraries when you have precise, fast layout data.
The effect is a natural entry point for learning Pretext because it clearly shows the problem Pretext solves: "I need to know where every character is, right now, and I need it frequently." Pretext answers that question without layout thrashing or forced reflows.
Pretext APIs Used
| API | Purpose |
|---|---|
measure() |
Obtain bounding box and position of each character node |
layout() |
Recalculate text layout after DOM changes |
| Animation frame callbacks | Update particle physics every 16ms |
How to Try It
Visit the live demo at pretext.cool. Click on any part of the page to trigger an explosion. Watch the cascade of particles respond to gravity and fade out. Then inspect the source code on GitHub to see how each character's motion is computed and rendered using Pretext measurements.
Built By
Created by SamiKamal. Explore more Pretext demos and documentation at pretext.cool.
