Nucleus Text

generates
Customize
Text color
Particle color
Particles90
Particle size1.4
Gather speed1.0
Shake1.0

Installation

pnpm dlx shadcn@latest add @clover-ui/nucleus-text

Usage

import { NucleusText } from "@/components/nucleus-text";

<NucleusText className="text-6xl font-semibold">generates</NucleusText>

The text stays visible while particles rush in once on load. The effect is skipped when reduced motion is on.

Props

PropType

Text color.

Default"#b8ff8b"

Particle color. Defaults to the text color.

Number of particles, from 12 to 320.

Default90

Particle size in pixels.

Default1.6
Default1

Shake strength. Set 0 to turn it off.

Default1