Canvas Text
Loading-ring canvas particles that slowly resolve into solid letterforms.
textcanvasparticlesheadlineanimationtypographymagnetic
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The string to rasterize into particles. |
color | string | currentColor | Particle fill. Omit to inherit the host text color. |
fontSize | number | 64 | Font size in CSS pixels used when sampling glyphs. |
particleSize | number | 1.6 | Particle diameter in CSS pixels. |
density | number | 2 | Sampling stride (1 = densest). Higher = fewer particles. |
drift | number | 0 | Optional idle wobble after settle, in CSS pixels. 0 keeps a locked symmetrical lattice. |
scatter | number | 48 | Loading-ring radius in CSS pixels. |
loadDuration | number | 1 | Seconds spent spinning on the loading ring before morph starts. |
morphDuration | number | 1.4 | Seconds for the ring → text morph. |
magnetic | number | 0.35 | Pointer warp strength. 0 disables magnetism. |
magneticRadius | number | 100 | Radius of pointer influence in CSS pixels. |
paused | boolean | - | Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden. |
replayKey | string | number | - | Bump to re-run the scatter → assemble intro. |