FluidFlow Background isn't just a visual effect; it's an interactive physics engine embedded directly into your design. By implementing advanced Navier-Stokes solvers with BFECC (Back and Forth Error Compensation and Correction), it delivers professional-grade fluid simulation that rivals standalone physics applications-all while maintaining smooth 60FPS performance and zero layout shift.
Key architectural highlights:
Navier-Stokes Physics Solver: Real-time simulation of fluid velocity, pressure, and momentum using industry-standard computational fluid dynamics.
BFECC Advection Algorithm: High-fidelity motion preservation that prevents the "blurring" and "dissipation" common in basic fluid simulations, keeping your visuals sharp and detailed over time.
Viscous Flow Simulation: Optional thickness control that transforms the fluid from water-like to honey-like, enabling organic "slow motion" aesthetics.
Three.js WebGL Core: Leverages GPU acceleration and robust state management for cross-browser compatibility and optimized rendering pipelines.
Automated Demo Mode: Intelligent "ghost" cursor that creates subtle movement during idle states, ensuring the scene never feels static or frozen.
Features:
Real-Time Interaction: Fluid responds instantly to mouse and touch input with physically accurate momentum, drag, and dissipation.
Custom Color Palettes: Map multi-stop gradients to fluid velocity -slow areas show cooler tones, fast areas burst with vibrant highlights.
Performance Optimized: Adjustable resolution scaling (0.1x to 1x) lets you balance visual detail with device capability, from mobile to 4K displays.
Physics Customization: Fine-tune viscosity, time step (dt), boundary behavior (bounce vs. fade), and iteration counts for complete control over the simulation's "feel."
Responsive & Resilient: Automatically adapts to container resizing, pauses when off-screen, and resumes seamlessly without losing simulation state.
Zero Dependencies: Self-contained implementation—no external physics libraries or bloated npm packages required.
Customisation Options:
Visuals:
Palette: Define your own gradient array. Colors map from low to high velocity, creating dynamic chromatic shifts as the fluid moves.
Resolution: Control the simulation grid density. Lower values (0.25) run blazing-fast on mobile; higher values (1.0) deliver razor-sharp detail on desktop.
Physics:
Mouse Force: How aggressively the cursor "pushes" the liquid. Higher values create explosive splashes; lower values feel gentle and floaty.
Cursor Size: The radius of interaction influence. Larger sizes create broad, sweeping movements; smaller sizes allow precision.
Viscosity: Enable the "Viscous" toggle to simulate thick fluids like honey, lava, or syrup. Adjust the slider for sluggish, cinematic trails.
Bounce: Toggle boundary behavior. When on, fluid bounces off edges like contained liquid. When off, it fades into the walls like smoke.
Automation:
Auto Demo: Activates an automated "wanderer" when no user interaction is detected, keeping the scene alive during idle states.
Auto Speed: Control the velocity of the automated movement. Slow for zen-like ambiance, fast for energetic motion.
Set up:
1. Drag the FluidFlow Background component into your Canvas.
2. Set the Width and Height to Fill for full-screen or full-container effects.
3. Adjust the Resolution slider to find the sweet spot for your design 0.25 to 0.5 typically balances performance and visual fidelity perfectly.
4. Customize the Palette array to match your brand's color aesthetic. Use 2-5 colors for best results.
5. (Optional) Enable Viscous and increase the viscosity slider if you want a luxurious, slow-moving flow with trailing momentum.
6. (Optional) Tune Mouse Force and Cursor Size to dial in the perfect interaction intensity for your audience.
MotionIQ Studio
