Particles
Quiet dots float through space, drawing faint connections as they pass. Presence without distraction.
Preview
Usage
import { createParticles } from 'syaivo';
const effect = createParticles({
color: '#a5f3fc',
count: 120,
mouseInteraction: true,
});
effect.mount(document.getElementById('hero')!);Options
| Option | Type | Default | Description |
|---|---|---|---|
color | string | string[] | "rgba(255,255,255,0.6)" | Particle color(s) |
backgroundColor | string | "transparent" | Canvas background |
count | number | 80 | Number of particles |
minRadius | number | 1 | Min particle radius (px) |
maxRadius | number | 3 | Max particle radius (px) |
maxSpeed | number | 30 | Max speed (px/s) |
mouseInteraction | boolean | false | Enable mouse repulsion |
mouseRadius | number | 100 | Repulsion radius (px) |
animated | boolean | true | Enable animation |
respectReducedMotion | boolean | true | Honor prefers-reduced-motion |
Dynamic Updates
effect.update({ count: 200, color: '#f0abfc' });Example
Introducing your product
Build something
people remember
A polished experience starts with the details. Ship interfaces that feel considered from the first pixel.
Get startedDocumentation