Particle Text Reveal

A wordmark is blown in from one side as fine wind-borne grains that streak, swirl, settle onto the letters and hand over to crisp type behind a soft front; Remove erodes it from the same edge and carries the grains away downwind.

Compare Add to Prompt Builder

Techniques: offscreen canvas text sampling
analytic per-particle lifetimes
directional emission front
wind streaks from finite differences
gradient-masked crisp text hand-off
bucketed Canvas2D batches
reveal / remove state + loop
Tags: #particles #text #reveal #dissolve #wind #sand #brand moment #headline #catalog-074
Inspired by: Brand-launch title cards where a name is blown in like fine sand from one side, settles into crisp type, and is later carried off by the same wind.
Added: 9 Oct 2026

Playground

Tune it live

Changes re-run the demo and rewrite the prompt so what you copy is exactly what you see.

DirectionWay the wind and the front travelWindHow far upwind grains start / downwind they leave1IntensityCross-wind spread and swirl0.6Particle size1.6pxDuration2.4sAccent grains#d4ff3a

The word is drawn once on an offscreen canvas (willReadFrequently: true) and every opaque pixel on a ~2px lattice becomes a grain, capped at 9,000 by an unbiased random subset. Nothing is simulated: each grain’s position is a pure function of the phase time τ — it starts at t0 = u·0.48·D + rand·0.1·D (where u is its position along the wind, 0 at the upwind edge), flies for (0.26 + 0.16·rand)·D from a point up to 380px upwind with ±210px of cross-wind spread, eases in with power3.out and swirls sideways on a decaying sine. Because positions are analytic, evaluating the same function at τ − 0.03 gives each grain’s velocity for free, and anything faster than 140 px/s is drawn as a short streak along it.

The crisp type is the same word drawn with fillText and a linear-gradient fill whose alpha front trails the arriving grains ((τ − 0.44·D) / (0.48·D), feather 14% of the word). Grains fade out once the gradient has covered them, so the hand-off is invisible. Remove runs the mirror image: the gradient hides the word from the upwind edge, grains appear on the glyph just ahead of it and accelerate downwind (power2.in) while fading.

Gotchas: create the read-back context with { willReadFrequently: true } or a single getImageData becomes a multi-second stall. Draw grains in eight batches (two colours × four alpha steps) — a fillStyle change per grain costs more than the maths. Gradient stops must stay in order and inside 0…1; clamp them, or Canvas throws on out-of-range offsets. Sample after document.fonts.load() so the particles and the crisp type use the same face.

Subscribers only