About Interactive Fluid
Elevate your landing pages with interactive WebGL fluid typography and reactive particle dynamics that respond seamlessly to cursor physics, ambient motion, and cinematic lighting.
Features
Real-time GPU fluid velocity and pressure projection
Dynamic text displacement linked with particle field physics
Interactive cursor wake and fluid splat interaction
Automatic idle motion with customizable drift speed
Cinematic chromatic aberration and rainbow spectral rim lighting
Multi-line typographic canvas atlas with custom typography support
Integrated prefers-reduced-motion accessibility support
Zero external dependencies, CDNs, or heavy 3D asset loaders
Frame-rate throttling and automatic off-screen render pausing
Full static renderer fallback support for instant SEO indexing
Customization Options
Live preview toggle for instant canvas feedback
Multi-line text contents with individual line support
Custom font family, weight, style, and letter spacing
Font size, line height, and text box width controls
Fluid pointer force, brush radius, and damping speed
Fluid swirl turbulence, memory recovery, and distortion intensity
Field bulge radius, count, curvature, and idle speed
Particle dot spacing, radius, brightness, and glow intensity
Fluid hue shifting and custom text color/opacity
Simulation grid resolution, solver iterations, and pixel ratio
How to Use
Drop the component directly onto your Framer canvas
Type your custom text or toggle it off to use the fluid canvas alone
Select your desired brand font, color, and particle glow
Tune fluid force and swirl for subtle ripples or high-energy distortion
Publish to deliver a silky-smooth, interactive WebGL experience
Use Cases
High-converting SaaS hero sections
Creative developer and designer portfolios
Futuristic AI and Web3 landing pages
Interactive brand statements and digital manifestos
Dark mode UI feature showcases
Immersive section dividers and interactive backgrounds
