npm install @caustics/particles <script> import { ParticleField } from '@caustics/particles'; </script> <ParticleField preset="network" />
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "network" | Named preset. Overrides individual props when set. |
| speed | number | 1.0 | Animation speed multiplier. 0 = static. |
| intensity | number | 0.5 | Effect intensity. Range: 0–1. |
| colors | string[] | undefined | Override palette. Accepts hex, hsl, or CSS custom properties. |
| reducedMotion | 'pause' | 'static' | 'static' | Behavior when prefers-reduced-motion is active. |
| class | string | undefined | Additional CSS classes applied to the root element. |
caustics-particles/ ├── svelte/ ParticleField.svelte · index.ts · types.ts ├── react/ ParticleField.tsx · index.ts · types.ts ├── vanilla/ particles.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md MIT, commercial use included └── package.json
Particle Field delivers configurable particle backgrounds that look great out of the box and configure down to the detail. It uses Canvas 2D for simple 2D fields and optionally WebGL for high-count 3D particle effects.
Unlike tsParticles (212M+ monthly CDN requests), Particle Field is lean, typed, and designed to integrate cleanly with modern frameworks.