Particle textPro

Text sampled into points that part around the pointer and settle back on a critically damped spring.

Markdown

On this page

ProMove the pointer through the words: points part and settle back without a bounce.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/particle-text

Usage

tsx

import { ParticleText } from "@/components/ui/chatcn/pro/particle-text"

<ParticleText text="Ask anything" className="text-[5rem]" />

Font family and size come from the element, so size it with a text class. density is the spacing between sampled points: 3 px gives about five thousand points for a large heading, which the canvas draws in under a millisecond.

Examples

Density and script

ProSparse and dense sampling, no intro and accent ink.

Props

Prop	Type	Notes
`text`	`string`	The words, and the accessible name
`density`	`number`	Px between points. Default 3
`dot`	`number`	Dot size in px. Default 1.6
`radius`	`number`	Pointer push radius. Default 72
`settle`	`number`	Seconds to settle back. Default 0.6
`intro`	`boolean`	Gather from a scatter on mount. Default true
`ink`	`string`	Dot color. Default `var(--chatcn-fg)`

Accessibility

The block is an image named by text, so it reads as the words.
Under forced-colors the canvas hides and the words show as plain text.

Motion

Every point follows a critically damped spring: it returns without overshoot, never a bounce.
The loop runs only while something moves or the pointer is inside, and stops on its own once the points rest. Offscreen it never starts.
Under reduced motion the points draw once in place and ignore the pointer.