Fluid Particle Text

Interactive WebGL particle text FX

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.