ParticleText X

Interactive text rendered as individual particles that scatter away from the cursor and spring back to position. Touch and mouse support, full typography controls, and smooth 60fps canvas animation. Built for hero sections, portfolios, and creative landing pages that need an unforgettable first impression.

Features

• Text rendered as individual canvas particles

• Particles disperse away from cursor and touch on proximity

• Spring-like return to original position when interaction ends

• Subtle idle micro-movement for organic feel at rest

• 120px interaction radius with distance-based force falloff

• Full mouse and touch support — desktop and mobile

• Configurable particle size, density, dispersion strength and return speed

• Full font controls — family, size, weight, style

• Text color and background color controls

• ResizeObserver for responsive canvas behavior

• Static preview in Framer canvas — no performance drain

• No dependencies

Property Controls

Content — text input

Font — family, size, weight, style

Particles — size (0.5–5px), density (1–10), dispersion strength (5–50), return speed (0.01–0.2)

Colors — text color, background color

Technical Details

• Canvas API with device pixel ratio support

• Physics simulation — repulsion force, spring return, velocity damping

• RequestAnimationFrame for smooth 60fps animation

• useIsStaticRenderer for Framer canvas optimization

• ResizeObserver for responsive behavior

• startTransition for React 18 performance

Use Cases

Hero sections · Interactive headlines · Portfolio showcases · Creative landing pages · Brand presentations · Interactive art installations

SEO Keywords

framer particle text · framer interactive text · framer cursor effect · framer text animation · framer particle animation · framer canvas component · framer mouse interaction · framer text effect · framer interactive typography · framer creative component · framer code component · framer hero text