Text assembles from drifting particles that scatter and reform on demand.
Move the pointer over the text to push particles away. Pick Hover or Click as the trigger to replay the gather.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "UI Library" | The words sampled into particle targets. |
particleSize | number | 2 | Rendered size of each particle in CSS pixels. |
density | number | 4 | Pixel sampling step for the offscreen glyph canvas. Lower values create more particles. |
color | string | "#ffffff" | Primary particle color. |
highlightColor | string | "#8b5cf6" | Secondary color blended through the particle field. |
scatter | number | 180 | How far particles begin from their final glyph targets. |
gatherDuration | number | 1600 | Milliseconds for particles to converge into the text. |
stagger | number | 420 | Maximum per-particle delay in milliseconds before gathering. |
pointerRepel | number | 40 | Strength of the cursor pushback. |
repelRadius | number | 120 | Cursor influence radius in pixels. |
idleDrift | number | 0.7 | Subtle resting motion after the text has formed. |
trigger | "mount" | "hover" | "click" | "mount" | How the scatter-and-reform sequence can replay after the first formation. |
fontSize | number | string | "clamp(3rem, 12vw, 8rem)" | Canvas text size used for glyph sampling. |
fontWeight | number | string | 800 | Font weight used for sampling. |
fontFamily | string | "inherit" | Font family used for sampling. Inherit waits for the surrounding font before sampling. |
glow | boolean | true | Adds a soft particle bloom in the highlight color. |
Keyboard shortcuts and ARIA behavior.