Fluid Image Flow

Fluid Image Flow transforms static images into a dynamic, interactive fluid experience. Move your cursor across the canvas to create liquid-like distortion, swirling motion, and flowing transitions between two images.

Built with WebGL and a real-time fluid simulation, it combines image displacement, velocity, dye diffusion, pressure solving, and vorticity to create a smooth interactive visual effect.

Great For

• Creative agency websites

• Portfolio and personal websites

• Photography and editorial layouts

• Fashion and luxury websites

• Hero sections

• Interactive image galleries

• Product showcases

• Art and experimental websites

• Landing pages

• WebGL-focused experiences

• Interactive transitions

• Motion-heavy Framer projects

Live Preview: https://fluidimageflow.framer.website/

Features

• Real-time WebGL fluid simulation

• Interactive cursor and touch movement

• Smooth image displacement

• Transition between two images

• Automatic fluid movement

• Four built-in fluid presets

• Custom simulation controls

• Adjustable fluid curl and force

• Adjustable dye and velocity dissipation

• Adjustable displacement strength

• Adjustable pointer strength

• Adjustable automatic flow speed

• Low, Medium, and High quality modes

• Responsive canvas sizing

• Retina/DPR-aware rendering

• Reduced-motion support

• Static renderer fallback for Framer

• Intersection-based rendering optimization

• WebGL context-loss handling

• Automatic resource cleanup

• Responsive image controls

• Touch-friendly interaction

Support

Need help setting up the component or customizing the effect?

X: @karimsaif

Email: karimsaif010@gmail.com