Fluid Particle Text

This component converts your text into an interactive particle system that reacts to the cursor in real time, fully customizable to match your brand.

Features:

• WebGL particle field generated directly from your text, using any font available in Framer

• Cursor-driven displacement with adjustable radius, force strength, and return speed

• Adjustable particle size, sample quality, and max displacement for finer or looser effects

• Fit modes (Off / Fit / Fill) with adjustable padding and min/max scale so text always sizes to its container

• Full text controls — alignment, vertical alignment, max lines, and an optional outline with independent stroke and fill opacity

• Fully customizable text color and canvas background

• Alpha threshold control to fine-tune which pixels become particles

• Automatic static fallback for the Framer canvas, exports, and reduced-motion preferences

• Pauses rendering when off-screen to avoid unnecessary CPU/GPU load

• Graceful recovery from GPU context loss, so the effect never gets stuck blank

Use cases:

• Hero sections and landing page headlines that want a memorable, interactive first impression

• Portfolio and agency sites looking to showcase a headline or tagline with some personality

• Product launch and "coming soon" pages where a single word or phrase is the centerpiece

• Any site where static text feels flat and a subtle interactive touch would stand out

Component Demo

Refund Policy: This is a digital product, so refunds aren't available once purchased. If you're unsure it's the right fit, feel free to message meon X or email me, I'm happy to help.