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.
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
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
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
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
Hamim Reza
