@slithy/math-particles

@slithy/math-particles

Animated math equations particle overlay for React. Equations drift outward from the center of the container, scaling and fading over time. No animation library — the loop runs in a Web Worker via OffscreenCanvas, keeping the main thread free.

Installation

npm install @slithy/math-particles

Peer dependencies: react@^17 || ^18 || ^19, react-dom@^17 || ^18 || ^19

Vite setup

This package ships a Web Worker and is incompatible with Vite's dependency optimizer. Add it to optimizeDeps.exclude in your Vite config:

// vite.config.ts
optimizeDeps: {
  exclude: ['@slithy/math-particles']
}

The same applies to electron-vite projects — the exclusion goes under renderer.optimizeDeps.exclude.

MathParticlesOverlay

Fills its nearest positioned ancestor. Give the parent position: relative and defined dimensions.

import { MathParticlesOverlay } from '@slithy/math-particles'

<div style={{ position: 'relative', width: '100%', height: 480 }}>
  <MathParticlesOverlay />
</div>

Props:

Prop	Type	Default	Description
backgroundColor	string	"#07070f"	Background fill color of the container
blur	boolean	true	Applies a soft blur at the start and end of each particle's lifecycle
colors	string[]	ColorBrewer RdYlBu	Array of colors to pick from randomly per particle
density	number	1	Multiplier on the auto-calculated particle count. 0.5 = half, 2 = double. Fixed at mount — use a key prop to reinitialize.
fadeIn	boolean	true	Fades the canvas in on mount
fadeInDuration	number	800	Duration of the mount fade-in in milliseconds
reverse	boolean	false	Reverses the animation: equations start large and drift inward rather than starting small and drifting outward
speed	number	1	Multiplier on particle animation speed. 0.5 = half speed, 2 = double.

Equations

16 equations are included: Euler's identity, Euler's formula, Pythagorean theorem, Pythagorean trig identity, quadratic formula, Einstein mass-energy, Fourier transform, Schrödinger equation, Gaussian integral, Taylor series, Navier-Stokes, Maxwell's first equation, Riemann zeta function, Bayes' theorem, integration by parts, and Heisenberg uncertainty.

Examples

Custom colors

<MathParticlesOverlay colors={["#e63946", "#457b9d", "#f1faee"]} />

Reduced density

<MathParticlesOverlay density={0.5} />

Reversed direction

<MathParticlesOverlay reverse />

No blur

<MathParticlesOverlay blur={false} />

No fade-in

<MathParticlesOverlay fadeIn={false} />

Transparent background

<div style={{ position: 'relative', width: '100%', height: 480, background: 'your-bg' }}>
  <MathParticlesOverlay backgroundColor="transparent" />
</div>