Particle Text

hot

Text rasterised into thousands of particles that scatter from your pointer and spring home. Clicks blow the letters apart.

canvaspointerclick5 files · 440 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/particle-text.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs particle-text

import { ParticleText } from "@/components/opus/text/particle-text";

<ParticleText text="OPUS" className="h-96" />

Prop	Type	Default	Description
text	string	—	Text to sample.
colors	string[]	—	Left→right gradient.
fontWeight / fontFamily	number / string	800 / "inherit"	Sampling font (auto-fitted).
density	number	4	Sampling step (px) — lower = more particles.
size / radius	number	1.6 / 90	Particle size and repel radius (px).