Particle text animation for React

9,000 particles spring between a sphere, your word and a torus knot.

Get the code · $3React · Tailwind · TypeScript
Particle Morph, preview

Use it in Next.js

"use client";
import { ParticleMorph } from "@/components/ParticleMorph";

export default function Hero() {
  return (
    <div className="h-[480px]">
      <ParticleMorph word="ACME" colorA="#C6FF3D" colorB="#8B6CFF" />
    </div>
  );
}

Install

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

Props

word
the word it forms
count
number of particles
colorA / colorB
gradient
font
font used for the word

Questions

Does the particles work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Why is it blank?

Give the parent a height. The canvas fills it.

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.