cluster-loaders
Parametric, continuous mathematical loading animations rendered in pure SVG & HTML5 Canvas. Zero dependencies.
Installation & Setup Guide
Installing cluster-loaders in React is seamless via npm or our instant CLI component generator.
[01]
Create your project
Start by creating a new React project if you don't have one set up already. The recommended approach is using Vite.
Terminal
1npm create vite@latest my-app -- --template react-ts2cd my-app[02]
Install cluster-loaders
Install
cluster-loadersfrom npm, or copy a single loader's source straight into your project with the CLI.Terminal
1npm install cluster-loaders23# Or copy one loader's source into your codebase:4npx cluster-loaders add astroid56# Not sure which one? List every preset id:7npx cluster-loaders list[03]
Import and render
Import
CurveLoader and look a preset up by its id, or pass a config object of your own.App.tsx
1import { CurveLoader, curveById } from "cluster-loaders";23const astroid = curveById("astroid")!;45export default function App() {6 return (7 <div className="w-32 h-32 text-[#CBA6F7]">8 <CurveLoader config={astroid} />9 </div>10 );11}Interactive Gallery
Copy the instant CLI command directly from any loader card, or click a card to customize live speed, particles, and view full code options.
Parametric Curves
Fundamental 2D parametric mathematical curves : astroids, epicycloids, rose petals, and Lissajous figures.
Motion & Waves
Wave equations, chaos attractors, multi-arm epicycles, and continuous organic motion.
3D & Spatial
Topographic heightfield contours, spacetime gravity wells, braided 3D helixes, and spin phase transitions.
Geometry Loaders
Mathematically precise geometric forms : spirals, standing waves, sonar sweeps, and real gear tooth profiles.
Particle Systems
Dynamic particle fields, organic tessellations, and reaction-diffusion simulations.