Package Exports

@carpit680/react-fluid-distortion
@carpit680/react-fluid-distortion/dist/index.es.js
@carpit680/react-fluid-distortion/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@carpit680/react-fluid-distortion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Fluid Distortion for React Three Fiber

screen capture

Implementing post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber. Based on the shaders developed by Pavel Dobryakov

Try it :

codesandbox

Installation :

npm install @whatisjery/react-fluid-distortion @react-three/drei @react-three/postprocessing postprocessing leva

Example of use :

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

<Canvas
    style={{
        position: 'fixed',
        top: 0,
        left: 0,
        height: '100vh',
        width: '100vw',
        background: '#000000',
    }}>
    <EffectComposer>
        <Fluid />
        {... other effets}
    </EffectComposer>
</Canvas>;

Display configuration panel :

Show a debug panel to test options more easily.

const config = useConfig();

...

<Fluid {...config} />

Options :

Name	Type	Default Value	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.