Particle Text⁽⁰¹⁹⁾

Interactive canvas particle physics rendering text as thousands of interactive points.

HoverClick

Installation

$npx kibo add particle-text

Usage

1import { ParticleText } from "@/components/kibo/particle-text/component";
2 
3export default function Example() {
4  return (
5    <ParticleText />
6  );
7}

Props Reference

Prop	Type	Default	Description
`text`	`string`	'React Bits'	The text content to display and animate.
`particleSize`	`number`	2	Controls the particle size for the component animation.
`density`	`number`	4	Controls the density for the component animation.
`color`	`string`	'#ffffff'	Text or primary fill color.
`highlightColor`	`string`	'#8b5cf6'	Controls the highlight color for the component animation.
`scatter`	`number`	180	Controls the scatter for the component animation.
`gatherDuration`	`number`	1600	Controls the gather duration for the component animation.
`stagger`	`number`	420	Stagger delay in seconds between individual characters/elements.
`pointerRepel`	`number`	40	Controls the pointer repel for the component animation.
`repelRadius`	`number`	120	Controls the repel radius for the component animation.
`idleDrift`	`number`	0.7	Controls the idle drift for the component animation.
`trigger`	`'mount' \| 'hover' \| 'click'`	'mount'	Controls the trigger for the component animation.
`fontSize`	`number \| string`	'clamp(3rem, 12vw, 8rem)'	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`number \| string`	800	Font weight (e.g., 400, 700, 900, 'bold').
`fontFamily`	`string`	'inherit'	Custom font family to apply to the rendered typography.
`glow`	`boolean`	true	Controls the glow for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`CSSProperties`	-	Controls the style for the component animation.