That's it. Your site now has particle field.

npm install @caustics/particles

<script>
  import { ParticleField } from '@caustics/particles';
</script>

<ParticleField preset="network" />

npm install @caustics/particles

import { ParticleField } from '@caustics/particles/react';
return <ParticleField preset="network" />;

npm install @caustics/particles

import { mount } from '@caustics/particles';
mount(document.querySelector('#hero'), { preset: 'network' });

Sensible defaults. Documented types.

Prop

Type

Default

Description

preset

string

"network"

Named preset. Overrides individual props when set.

colors

string[]

undefined

Override palette. Accepts hex, hsl, or CSS custom properties.

reducedMotion

'pause' | 'static'

'pause'

Behavior when prefers-reduced-motion is active.

class

string

undefined

Additional CSS classes applied to the root element.

A zip. Everything else lives at caustics.dev.

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  Caustics Commercial License
└── package.json

Particle Field delivers configurable particle backgrounds that look great out of the box and configure down to the detail. Six built-in presets — network, starfield, fireflies, constellation, snow, bubbles — plus full control over count, color, speed, link lines, and cursor reactivity. Rendered on Canvas 2D for universal compatibility and a tiny footprint.

Unlike tsParticles (212M+ monthly CDN requests), Particle Field is lean, typed, and designed to integrate cleanly with modern frameworks — the whole engine is 7 KB gzipped.

That's it. Your site now has particle field.

Sensible defaults. Documented types.

A zip. Everything else lives at caustics.dev.

Ready to ship?