Text Scatter In
Words arriving as clouds of particles that tighten into their own glyphs.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Text Scatter In
*
* Letters arriving as clouds of particles that resolve into glyphs.
* The technique is where the glyph targets come from: the text is drawn
* once into an offscreen canvas and its alpha channel is read back on aAbout this effect
A heading that gathers itself, for the one place it is affordable — a greeting above a dashboard that is already loaded. The targets come from rasterizing the string once into an offscreen canvas and reading its alpha channel on a grid, keeping the cells the letters cover. That is what lets it take any string in whatever font is really rendering on the page: no per-letter path data, no font file to parse, and the particles land in the shape of the type the reader is already looking at. Each target knows its own x, so the stagger is free — the delay is the horizontal position and the word resolves left to right. Density is controlled by coarsening the sampling grid rather than discarding points, which would leave holes in the strokes.