{"id":14981325,"url":"https://github.com/whatisjery/react-fluid-distortion","last_synced_at":"2025-04-04T13:05:24.879Z","repository":{"id":220872217,"uuid":"752807599","full_name":"whatisjery/react-fluid-distortion","owner":"whatisjery","description":"Post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber.","archived":false,"fork":false,"pushed_at":"2025-03-26T22:39:44.000Z","size":18339,"stargazers_count":114,"open_issues_count":7,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T12:05:00.063Z","etag":null,"topics":["fluid","glsl","react","react-three-fiber","shaders","three-js","webgl"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/github/whatisjery/react-fluid-distortion","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whatisjery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-04T21:12:04.000Z","updated_at":"2025-03-26T22:39:47.000Z","dependencies_parsed_at":"2024-02-10T21:20:07.972Z","dependency_job_id":"19307084-49d8-4bab-ba0b-d61ac117e1eb","html_url":"https://github.com/whatisjery/react-fluid-distortion","commit_stats":{"total_commits":65,"total_committers":1,"mean_commits":65.0,"dds":0.0,"last_synced_commit":"757c0b470617b42bc30d377f4b5590775d17be6c"},"previous_names":["jeremienallet/post-fluid-distortion","whatisjery/post-fluid-distortion","whatisjery/react-fluid-distortion"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatisjery%2Freact-fluid-distortion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatisjery%2Freact-fluid-distortion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatisjery%2Freact-fluid-distortion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatisjery%2Freact-fluid-distortion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whatisjery","download_url":"https://codeload.github.com/whatisjery/react-fluid-distortion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247181179,"owners_count":20897368,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fluid","glsl","react","react-three-fiber","shaders","three-js","webgl"],"created_at":"2024-09-24T14:03:19.761Z","updated_at":"2025-04-04T13:05:24.843Z","avatar_url":"https://github.com/whatisjery.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Version](https://img.shields.io/npm/v/@whatisjery/react-fluid-distortion?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/@whatisjery/react-fluid-distortion)\n\n# Fluid Distortion for React Three Fiber\n\n![screen capture](./src/assets/screen_capture.png)\n\nImplementing post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber.\nBased on the shaders developed by [Pavel Dobryakov](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation)\n\n## Try it :\n\n[codesandbox](https://codesandbox.io/p/github/whatisjery/react-fluid-distortion)\n\n## Installation :\n\n```bash\nnpm install @whatisjery/react-fluid-distortion @react-three/drei @react-three/postprocessing postprocessing leva\n```\n\n## Example of use :\n\n```jsx\nimport { Fluid } from '@whatisjery/react-fluid-distortion';\nimport { EffectComposer } from '@react-three/postprocessing';\nimport { Canvas } from '@react-three/fiber';\n\n\u003cCanvas\n    style={{\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        height: '100vh',\n        width: '100vw',\n        background: '#000000',\n    }}\u003e\n    \u003cEffectComposer\u003e\n        \u003cFluid /\u003e\n        {... other effets}\n    \u003c/EffectComposer\u003e\n\u003c/Canvas\u003e;\n```\n\n## Display configuration panel :\n\nShow a debug panel to test options more easily.\n\n```jsx\nconst config = useConfig();\n\n...\n\n\u003cFluid {...config} /\u003e\n```\n\n## Options :\n\n| Name                   | Type        | Default Value | Description                                                                                    |\n| ---------------------- | ----------- | ------------- | ---------------------------------------------------------------------------------------------- |\n| `fluidColor`           | hexadecimal | `#005eff`     | Sets the fluid color. Effective only when `rainbow` is set to `false`.                         |\n| `backgroundColor`      | string      | `#070410`     | Sets the background color. Effective only when `showBackground` is `true`.                     |\n| `showBackground`       | boolean     | `false`       | Toggles the background color's visibility. If `false` it becomes transprent.                   |\n| `blend`                | number      | `5`           | Blends fluid into the scene when `showBackground` is true. Valid range: `0.00` to `10.0`.      |\n| `intensity`            | number      | `10`          | Sets the fluid intensity. Valid range: `0` to `10`.                                            |\n| `force`                | number      | `2`           | Multiplies the mouse velocity to increase fluid splatter. Valid range: `0.0` to `20`.          |\n| `distortion`           | number      | `2`           | Sets the distortion amount. Valid range: `0.00` to `2.00`.                                     |\n| `radius`               | number      | `0.3`         | Sets the fluid radius. Valid range: `0.01` to `1.00`.                                          |\n| `curl`                 | number      | `10`          | Sets the amount of the curl effect. Valid range: `0.0` to `50`.                                |\n| `swirl`                | number      | `20`          | Sets the amount of the swirling effect. Valid range: `0` to `20`.                              |\n| `velocityDissipation`  | number      | `0.99`        | Reduces the fluid velocity over time. Valid range: `0.00` to `1.00`.                           |\n| `densitionDissipation` | number      | `0.95`        | Reduces the fluid density over time. Valid range: `0.00` to `1.00`.                            |\n| `pressure`             | number      | `0.80`        | Controls the reduction of pressure. Valid range: `0.00` to `1.00`.                             |\n| `rainbow`              | boolean     | `true`        | Activates color mode based on mouse direction. No range applicable as this is a boolean value. |\n\n## Usage with nextjs\n\nIf you're working with an older version of Next.js, you may get this type of error:\n\n```javascript\nTypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')\n```\n\nTo fix it, you can enable package transpilation in your next.config file. Here’s how:\n\n```javascript\nconst nextConfig = {\n    transpilePackages: ['@whatisjery/react-fluid-distortion'],\n};\n\nmodule.exports = nextConfig;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhatisjery%2Freact-fluid-distortion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhatisjery%2Freact-fluid-distortion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhatisjery%2Freact-fluid-distortion/lists"}