@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>