Particle Text

Interactive canvas-based dot particle text with starry twinkling shimmer and cursor hover dispersion physics.

1import { ParticleText } from "@/components/particle-text";
2 
3export default function ParticleTextDemo() {
4  return (
5    <div className="w-full flex items-center justify-center py-6">
6      <ParticleText
7        text="Skills"
8        enableHover={true}
9        enableTwinkle={true}
10        fontSize={160}
11      />
12    </div>
13  );
14}

Installation

bunx --bun shadcn@latest add https://ashutoshtiwari.me/r/particle-text.json

Usage

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

1<ParticleText text="Skills" />

API Reference

Prop	Type	Default	Description
`text`	string	required	Text string to render as a matrix of interactive dots.
`fontSize`	number	200	Font size in pixels (automatically auto-clamped to fit container).
`fontFamily`	string	"Inter"	Font family used to rasterize the text glyphs on the canvas.
`particleSize`	number	1.5	Radius in pixels of each individual dot.
`particleDensity`	number	6	Grid spacing step between dots. Lower numbers create denser dots.
`color`	string	currentColor	Custom dot color. Defaults to automatic light/dark mode theme color.
`enableHover`	boolean	true	Enables interactive cursor repulsion and spring return physics.
`enableTwinkle`	boolean	true	Enables sporadic starry twinkling opacity shimmer.
`minOpacity`	number	0.3	Minimum opacity for the dimmest twinkle state (0.05 to 0.8).
`twinkleSpeed`	number	0.01	Speed multiplier for twinkle opacity transitions.
`randomness`	number	0.25	Probability factor (0.0 to 1.0) controlling twinkle frequency.
`dispersionStrength`	number	0.05	Repulsion force multiplier when hovered by the cursor.
`returnSpeed`	number	0.08	Spring physics return speed back to original coordinates.
`interactionRadius`	number	100	Distance in pixels around the mouse cursor within which particles react.
`className`	string	""	Additional CSS classes applied to the canvas container.