Animation Library

Particle Text

Typography sampled into interactive particles — pointer repulsion, brownian drift, and click scatter on canvas.

TextCanvasParticlesInteraction
Asset previewStage · 16 : 10
Web · React + CanvasLive
canvas · particlespointer repulsion
01 · About

Text is rasterized to a canvas mask, then sampled on a grid into particles that spring back to home positions with elasticity and damping.

Text is rasterized to a canvas mask, then sampled on a grid into particles that spring back to home positions with elasticity and damping.

Pointer proximity applies chaotic repulsion; clicks add outward scatter impulses.

02 · Metadata
Status
Production ready
Category
Text
Engine
Custom
Platforms
Web
Last updated
May 2026· v1.0.0
03 · Technical notes
Implementation

Canvas 2D with ResizeObserver for responsive sizing.

Supports pointer and touch; static render when prefers-reduced-motion is set.

04 · Use cases

  • Hero headlines

    Turn a wordmark into a tactile, playable moment.

  • Featured library cards

    Compact preview of particle typography in the atlas grid.