Package Exports

@whatisjery/react-fluid-distortion
@whatisjery/react-fluid-distortion/dist/index.es.js
@whatisjery/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 (@whatisjery/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

From the react-three-fiber documentation :

[!WARNING]
Three-fiber is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc. @react-three/fiber@8 pairs with react@18, @react-three/fiber@9 pairs with react@19.

Try it :

codesandbox

Installation :

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

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>
        {... other effets}
        <Fluid />
    </EffectComposer>
</Canvas>;

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.

Usage with nextjs

If you're working with an older version of Next.js, you may get this type of error:

TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')

To fix it, you can enable package transpilation in your next.config file. Here’s how:

const nextConfig = {
    transpilePackages: ['@whatisjery/react-fluid-distortion'],
};

module.exports = nextConfig;