Installation
Usage
import { ParticleLogo } from "@/components/particle-logo"
export function Hero() {
return (
<ParticleLogo text="Acme" y={0.42} className="flex min-h-[32rem] flex-col items-center justify-end px-6 pb-12 text-center">
<p className="text-muted-foreground">Hover to scatter, press to burst.</p>
</ParticleLogo>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Uxelith" | The word the particles form, drawn in your page's font. It is also real text on the page, for screen readers and search engines. |
| src | string | — | Your logo instead of the word: an SVG or PNG with a transparent background, same origin or served with CORS. text stays its name. |
| colors | string[] | [] (theme: --primary, --chart-2, --chart-4) | Two to five colours, swept across the word. Any CSS colour. |
| density | number | 1 | How many particles, from 0.5 to 1.5. 1 is about 65,000 on a desktop and 33,000 on a phone. |
| y | number | 0.5 | Where the word sits, from 0 (top) to 1 (bottom). |
| scale | number | 0.84 | How much of the width the word spans, from 0.3 to 0.95. |
| glow | boolean | true | On dark grounds, a soft halo around every particle. Light grounds never glow: the particles read as ink. |
| trails | boolean | true | Fast particles leave short streaks of light. |
| autoplay | boolean | true | When nobody is near, an unseen hand passes through every few seconds so the word breathes. |
| interactive | boolean | true | The pointer or a finger scatters the particles, and a press sends a shock wave. Presses on links and buttons stay theirs. |
| paused | boolean | false | Holds every particle exactly where it is: pause when it looks right, then capture it. The pointer leaves them alone until they play again. |
| captureRef | Ref<ParticleLogoHandle> | — | Gets { capture(width, height) }, which draws the particles as it is right now again at that size, on your background colour, and resolves a PNG Blob: a 4K hero, a wallpaper, a social card. It works on a software renderer too, and rejects with a plain message when the device can't draw that size. |
| ...props | HTMLAttributes<HTMLDivElement> | — | Any div attribute. Your className is merged last, so it wins; size the background with it. |
Accessibility
- The word is real text in the page (visually hidden), so screen readers and search engines read it; the canvas and the still image are decorative and hidden from assistive technology.
- With prefers-reduced-motion it shows the formed word, still, and ignores the pointer.
- It pauses off-screen and in hidden tabs, and frees its GPU memory when removed.
- Without WebGL2, on a software renderer, or on a device that can't hold a smooth frame rate even with fewer particles, it shows the word as a still image in your theme colours.
Changelog
- v1.1.0Latest
New: `paused` holds the motion still, and `captureRef` saves it as a PNG at any size.