https://github.com/whatisjery/react-fluid-distortion
Post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber.
https://github.com/whatisjery/react-fluid-distortion
fluid glsl react react-three-fiber shaders three-js webgl
Last synced: about 1 year ago
JSON representation
Post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber.
- Host: GitHub
- URL: https://github.com/whatisjery/react-fluid-distortion
- Owner: whatisjery
- Created: 2024-02-04T21:12:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-26T22:39:44.000Z (about 1 year ago)
- Last Synced: 2025-03-28T12:05:00.063Z (about 1 year ago)
- Topics: fluid, glsl, react, react-three-fiber, shaders, three-js, webgl
- Language: TypeScript
- Homepage: https://codesandbox.io/p/github/whatisjery/react-fluid-distortion
- Size: 17.5 MB
- Stars: 114
- Watchers: 2
- Forks: 16
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@whatisjery/react-fluid-distortion)
# Fluid Distortion for React Three Fiber
Implementing post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber.
Based on the shaders developed by [Pavel Dobryakov](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation)
## Try it :
[codesandbox](https://codesandbox.io/p/github/whatisjery/react-fluid-distortion)
## Installation :
```bash
npm install @whatisjery/react-fluid-distortion @react-three/drei @react-three/postprocessing postprocessing leva
```
## Example of use :
```jsx
import { Fluid } from '@whatisjery/react-fluid-distortion';
import { EffectComposer } from '@react-three/postprocessing';
import { Canvas } from '@react-three/fiber';
{... other effets}
;
```
## Display configuration panel :
Show a debug panel to test options more easily.
```jsx
const config = useConfig();
...
```
## 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:
```javascript
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:
```javascript
const nextConfig = {
transpilePackages: ['@whatisjery/react-fluid-distortion'],
};
module.exports = nextConfig;
```