A react-tsparticles alternative for a particle hero

react-tsparticles is deprecated on npm in favour of @tsparticles/react. If what you were after was a hero where particles form your product's name, this is that hero as one React component.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/Hero.tsx

"use client";
// Before:
// <Particles id="tsparticles" init={particlesInit} options={{ particles: { number: { value: 80 }, color: { value: "#ffffff" } } }} />
import dynamic from "next/dynamic";

// three.js needs window and a GPU, so it never renders on the server
const ParticleMorph = dynamic(() => import("@/components/ParticleMorph"), {
  ssr: false,
  loading: () => <div className="h-full w-full bg-black" />,
});

export function Hero() {
  return (
    <section className="relative h-[80vh] overflow-hidden bg-black">
      <ParticleMorph word="acme" count={6000} colorA="#C6FF3D" colorB="#8B6CFF" className="absolute inset-0" />
      <div className="pointer-events-none relative z-10 mx-auto max-w-3xl pt-24 text-center text-white">
        <h1 className="text-5xl font-bold">Ship faster with Acme</h1>
      </div>
    </section>
  );
}

Good to know

npm marks react-tsparticles 2.12.2 (August 2023) as deprecated with the message "@tsparticles/react is the new version, please use that". The older react-particles-js 3.6.0 (October 2021) is deprecated "in favor of react-tsparticles", and particles.js 2.0.0 is from May 2015. npm still counted 19,359, 5,233 and 12,936 downloads for them in the last week of October 2026.
tsParticles itself is alive: @tsparticles/react 4.4.0 came out on August 31, 2026, MIT licensed. For snow, confetti, linked dots, fireworks or any preset, move to @tsparticles/react. It's free and does far more kinds of effect than this piece.
Particle Morph is one scene, not a general particle engine: 9,000 particles spring between a sphere, your word and a torus knot. A click morphs to the next shape and the pointer pushes particles away. There's no options object and no presets.
It runs on three.js, which adds bundle weight. Loading it with next/dynamic and ssr: false, as above, keeps it out of the server render and out of the first page load.
It pauses while scrolled out of view or when the tab is hidden. With Reduce Motion on, it draws each shape still and a click swaps it.
Type-checked against three 0.186 and next 16.4 with TypeScript 5.9.

What your tsParticles setup maps to

particles.number.value: count. 9,000 is the default; 4,000 to 6,000 is kinder to older phones.
particles.color: colorA and colorB, a gradient across the shape.
A text shape or a mask that drew a word: word, and font for the typeface it samples.
interactivity onHover repulse: built in, the pointer pushes particles aside.
interactivity onClick push: a click morphs to the next shape instead of adding particles.
initParticlesEngine and loadSlim or loadFull: nothing to load. The component sets up its own renderer and cleans it up on unmount.
background.color: style the parent element, like bg-black above.

Install

Copy from the zipPut react/src/components into src/, then npm uninstall react-tsparticles && npm i three && npm i -D @types/three.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

word: the text one shape spells
count: particles, 9000 by default
colorA / colorB: gradient colours
font: CSS font used to sample the word
className: size it from the parent

How qodesign compares

qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

Questions

Is tsParticles dead?

No. Only the old react-tsparticles wrapper is deprecated. The project ships as @tsparticles/react and @tsparticles/engine, and the latest release is from August 2026.

Can it do a full-page background of floating dots?

Not really. It's built to form shapes in a hero. For a calm background of dots or links, @tsparticles/react with a preset is the better tool.

Why do I get 'window is not defined'?

three.js was imported on the server. Load the component through next/dynamic with ssr: false, as in the snippet.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.