Fluid Distortion

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

Component controls

intensity

7.00

force

1.10

distortion

0.80

radius

0.50

curl

0.80

swirl

2.00

velocity-dissipation

0.98

density-dissipation

0.98

pressure

0.70

fluid-color

#b4a6ff

Check documentation below for more options

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 example

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

API

Name	Type	Default	Description
fluidColor	`hexadecimal`	`#b4a6ff`	Sets the fluid color. Effective only when `rainbow` is set to `false`.
backgroundColor	`hexadecimal`	`#070410`	Sets the background color. Effective only when `showBackground` is `true`.
showBackground	`boolean`	`false`	Toggles the background color's visibility. If `false` it becomes transparent.
blend	`number`	`5`	Blends fluid into the scene when `showBackground` is true. Valid range: `0.00` to `10.0`.
intensity	`number`	`7`	Sets the fluid intensity. Valid range: `0` to `10`.
force	`number`	`1.1`	Multiplies the mouse velocity to increase fluid splatter. Valid range: `0.0` to `20`.
distortion	`number`	`0.8`	Sets the distortion amount. Valid range: `0.00` to `2.00`.
radius	`number`	`0.5`	Sets the fluid radius. Valid range: `0.01` to `1.00`.
curl	`number`	`0.8`	Sets the amount of the curl effect. Valid range: `0.0` to `50`.
swirl	`number`	`2`	Sets the amount of the swirling effect. Valid range: `0` to `20`.
velocityDissipation	`number`	`0.98`	Reduces the fluid velocity over time. Valid range: `0.00` to `1.00`.
densityDissipation	`number`	`0.98`	Reduces the fluid density over time. Valid range: `0.00` to `1.00`.
pressure	`number`	`0.70`	Controls the reduction of pressure. Valid range: `0.00` to `1.00`.
rainbow	`boolean`	`false`	Activates color mode based on mouse direction.

Credits

Pavel Dobryakov
Creator of the original WebGL fluid simulation.

React Three Fiber
React renderer for Three.js

@react-three/postprocessing
Post-processing effects for React Three Fiber

Drei
React Three Fiber utilities.

API

Name	Type	Default	Description
fluidColor	`hexadecimal`	`#b4a6ff`	Sets the fluid color. Effective only when `rainbow` is set to `false`.
backgroundColor	`hexadecimal`	`#070410`	Sets the background color. Effective only when `showBackground` is `true`.
showBackground	`boolean`	`false`	Toggles the background color's visibility. If `false` it becomes transparent.
blend	`number`	`5`	Blends fluid into the scene when `showBackground` is true. Valid range: `0.00` to `10.0`.
intensity	`number`	`7`	Sets the fluid intensity. Valid range: `0` to `10`.
force	`number`	`1.1`	Multiplies the mouse velocity to increase fluid splatter. Valid range: `0.0` to `20`.
distortion	`number`	`0.8`	Sets the distortion amount. Valid range: `0.00` to `2.00`.
radius	`number`	`0.5`	Sets the fluid radius. Valid range: `0.01` to `1.00`.
curl	`number`	`0.8`	Sets the amount of the curl effect. Valid range: `0.0` to `50`.
swirl	`number`	`2`	Sets the amount of the swirling effect. Valid range: `0` to `20`.
velocityDissipation	`number`	`0.98`	Reduces the fluid velocity over time. Valid range: `0.00` to `1.00`.
densityDissipation	`number`	`0.98`	Reduces the fluid density over time. Valid range: `0.00` to `1.00`.
pressure	`number`	`0.70`	Controls the reduction of pressure. Valid range: `0.00` to `1.00`.
rainbow	`boolean`	`false`	Activates color mode based on mouse direction.