Return

Text Assembly

Renders text as a particle mesh by sampling pixel data from an offscreen canvas. On mount, particles scatter outward then spring back to their home positions. Cursor proximity repels particles away, creating an interactive dissolution effect.

text-assembly-preview

HELLO

Why it helps: Particle text creates a memorable, interactive hero element that draws attention. The physics-based repulsion gives a tactile feel that static text cannot match.

Also good to know:

  • -High node count (up to 14000) means significant CPU usage on weaker devices
  • -Relies on canvas pixel sampling, so custom fonts must be fully loaded before the first paint
  • -Long or very small text may require adaptive step adjustments that reduce visual fidelity

Source

components/live/TextAssembly.tsx
// Loading source...

Usage

HeroSection.tsx
import { TextAssembly } from "./components/live/TextAssembly";

<TextAssembly
  text="Your Name"
  className="h-[42vh]"
  font='"Inter", system-ui, sans-serif'
  fontWeight={800}
  sampleStep={3}
  color="#ffffff"
/>

Props

textHELLO
string

The text string to render as particles.

color#ffffff
string

Color of the particle dots.

bgColortransparent
string

Background color. Use 'transparent' for none.

fontsystem-ui, -apple-system, sans-serif
string

Font family used to rasterize the text.

fontWeight900
number

Font weight for the rasterized text.

sampleStep3
number

Pixels between samples. Lower = denser mesh. 2-4 is the sweet spot.

stiffness0.06
number

Spring stiffness for particles returning home.

damping0.86
number

Velocity damping factor. Lower values slow particles faster.

repelStrength14
number

Force applied to particles near the cursor.

repelRadius110
number

Pixel radius around the cursor that repels particles.

scatterRadius520
number

How far particles start from home on mount, in px.

className-
string

Additional CSS classes for the container div.