TS

Tsparticles

tsparticles

Full-featured tsParticles bundle — create stunning particle, confetti and fireworks animations with all official plugins and presets included. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inf

Animation
front-end
frontend
tsparticles
particles.js
particlesjs
particles
particle
canvas
jsparticles
xparticles
Stars
9.0k
Weekly
99k
Open issues
23
Bundle
~40 kB

Installation

npm install tsparticles

Code example

import { motion } from "tsparticles";

export function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35 }}
    >
      <h2>Animated with Tsparticles</h2>
    </motion.div>
  );
}

Pros & cons

Pros

  • Actively maintained by Matteo Bruni
  • 99k weekly downloads. Battle tested
  • First-class TypeScript definitions
  • MIT licensed

Considerations

  • Adds roughly ~40 kB to your bundle
  • Needs client-only rendering in SSR frameworks
  • Not supported in React Native
  • 23 open issues on GitHub

FAQs

Alternatives & similar libraries