npm install @caustics/particles <script> import { ParticleField } from '@caustics/particles'; </script> <ParticleField preset="cartograph" />
npm install @caustics/particles import { ParticleField } from '@caustics/particles/react'; return <ParticleField preset="cartograph" />;
npm install @caustics/particles import { mount } from '@caustics/particles'; mount(document.querySelector('#hero'), { preset: 'cartograph' });
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "cartograph" | 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. |
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 is the house’s living technical drawing: crisp ink marks — rings, crosses, ticks, glyphs — spring-tethered into constellations that breathe, wheeling as real flocks, streaming from emitters, drifting on seeded curl currents. Nine curated presets led by the Cartograph, a seeded star-atlas; dashed hairline links in OKLab-blended colours; trails, additive glow, vignette and grain; PNG, WebM and replayable-JSON export.
Rendered on Canvas 2D by design — no WebGL context, so a dozen fields coexist on one page (the package ships an FPS harness so you can measure the claim, not take it). Everything is seeded and deterministic, ~20 KB gzipped with zero dependencies, and every new capability defaults to a no-op guarded by 19 regression gates.
Caustics Commercial License · lifetime updates within v1