Fluid Distortion

A GPU-accelerated fluid distortion effect that reacts to cursor movement

Installation

npx atelier-ui add fluid-distortion

Usage

Imports

import { FluidDistortion } from 'react-fluid-distortion'
import { Canvas } from '@react-three/fiber'
import { EffectComposer } from '@react-three/postprocessing'

Usage

<Canvas>
    <EffectComposer>
        <FluidDistortion />
    </EffectComposer>
</Canvas>

API

Name	Type	Default	Description
`fluidColor`	hexadecimal	`#005eff`	Sets the fluid color. Effective only when `rainbow` is set to `false`.
`backgroundColor`	string	`#070410`	Sets the background color. Effective only when `showBackground` is `true`.
`showBackground`	boolean	`false`	Toggles the background color's visibility. If `false` it becomes transprent.
`blend`	number	`5`	Blends fluid into the scene when `showBackground` is true. Valid range: `0.00` to `10.0`.
`intensity`	number	`10`	Sets the fluid intensity. Valid range: `0` to `10`.
`force`	number	`2`	Multiplies the mouse velocity to increase fluid splatter. Valid range: `0.0` to `20`.
`distortion`	number	`2`	Sets the distortion amount. Valid range: `0.00` to `2.00`.
`radius`	number	`0.3`	Sets the fluid radius. Valid range: `0.01` to `1.00`.
`curl`	number	`10`	Sets the amount of the curl effect. Valid range: `0.0` to `50`.
`swirl`	number	`20`	Sets the amount of the swirling effect. Valid range: `0` to `20`.
`velocityDissipation`	number	`0.99`	Reduces the fluid velocity over time. Valid range: `0.00` to `1.00`.
`densitionDissipation`	number	`0.95`	Reduces the fluid density over time. Valid range: `0.00` to `1.00`.
`pressure`	number	`0.80`	Controls the reduction of pressure. Valid range: `0.00` to `1.00`.
`rainbow`	boolean	`true`	Activates color mode based on mouse direction. No range applicable as this is a boolean value.

Features

GPU-accelerated via WebGL: runs entirely on the graphics card, zero JS physics overhead
Rainbow mode: automatically derives fluid color from cursor direction
Customizable fluid dynamics: curl, swirl, pressure, velocity, and density dissipation
Transparent background: renders over any scene without a background layer
Frame-rate independent: runs at consistent speed regardless of your monitor's refresh rate

Credits

WebGL shaders inspired by Pavel Dobryakov's WebGL Fluid Simulation.

API

Name	Type	Default	Description
`fluidColor`	hexadecimal	`#005eff`	Sets the fluid color. Effective only when `rainbow` is set to `false`.
`backgroundColor`	string	`#070410`	Sets the background color. Effective only when `showBackground` is `true`.
`showBackground`	boolean	`false`	Toggles the background color's visibility. If `false` it becomes transprent.
`blend`	number	`5`	Blends fluid into the scene when `showBackground` is true. Valid range: `0.00` to `10.0`.
`intensity`	number	`10`	Sets the fluid intensity. Valid range: `0` to `10`.
`force`	number	`2`	Multiplies the mouse velocity to increase fluid splatter. Valid range: `0.0` to `20`.
`distortion`	number	`2`	Sets the distortion amount. Valid range: `0.00` to `2.00`.
`radius`	number	`0.3`	Sets the fluid radius. Valid range: `0.01` to `1.00`.
`curl`	number	`10`	Sets the amount of the curl effect. Valid range: `0.0` to `50`.
`swirl`	number	`20`	Sets the amount of the swirling effect. Valid range: `0` to `20`.
`velocityDissipation`	number	`0.99`	Reduces the fluid velocity over time. Valid range: `0.00` to `1.00`.
`densitionDissipation`	number	`0.95`	Reduces the fluid density over time. Valid range: `0.00` to `1.00`.
`pressure`	number	`0.80`	Controls the reduction of pressure. Valid range: `0.00` to `1.00`.
`rainbow`	boolean	`true`	Activates color mode based on mouse direction. No range applicable as this is a boolean value.

Features

GPU-accelerated via WebGL: runs entirely on the graphics card, zero JS physics overhead

Rainbow mode: automatically derives fluid color from cursor direction

Customizable fluid dynamics: curl, swirl, pressure, velocity, and density dissipation

Transparent background: renders over any scene without a background layer

Frame-rate independent: runs at consistent speed regardless of your monitor's refresh rate