Interactions
Particle Reveal
Particles scatter from noise and converge into text — inspired by Linear's AI generation animation.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<ParticleReveal text="Generated with AI" duration={1500} scatter={45} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | — | The string the particles converge into. |
| duration | number | 1000 | Total animation duration in ms. |
| delay | number | 0 | Delay before the animation begins, in ms. |
| scatter | number | 45 | How far particles start displaced from their final position, in px. Higher = more chaotic intro. |
| initialBlur | number | 3 | Starting blur in px. Resolves to 0 alongside the scatter. |
| seed | number | 2 | feTurbulence seed. Change to vary the scatter pattern. |
| onComplete | () => void | — | Fires once the text has fully resolved. |
| className | string | — | Classes applied to the text element (control font, size, color). |
| style | CSSProperties | — | Inline style merged onto the text element. |
Use cases
AI generation feedback
Reveal generated copy or summaries the way Linear's AI features do.
Onboarding moments
First-run welcome headlines or empty-state copy that benefit from a single delightful beat.
Marketing headlines
Hero headline reveal triggered on scroll-into-view.
Loading completion
Resolve a skeleton or spinner into a final summary line — “Report ready”, “3 issues found”.