{"_id":"@carpit680/react-fluid-distortion","name":"@carpit680/react-fluid-distortion","dist-tags":{"latest":"1.3.2"},"versions":{"1.3.2":{"name":"@carpit680/react-fluid-distortion","description":"A react-three-fiber component for creating fluid distortion effects","author":{"name":"Jeremie Nallet"},"private":false,"version":"1.3.2","type":"module","main":"dist/index.umd.js","module":"dist/index.es.js","types":"dist/lib/index.d.ts",".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"},"scripts":{"build":"vite build --mode library","build:app":"vite build --mode app","dev":"vite","preview":"vite preview"},"license":"MIT","peerDependencies":{"@react-three/fiber":"*","leva":"*","postprocessing":"*","react":"*","react-dom":"*","three":"*"},"devDependencies":{"@types/node":"^20.11.25","@types/react":"^18.2.64","@types/react-dom":"^18.2.21","@types/three":"^0.160.0","@typescript-eslint/eslint-plugin":"^6.21.0","@typescript-eslint/parser":"^6.21.0","@vitejs/plugin-react":"^4.2.1","clang-format":"^1.8.0","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","react":"^18.2.0","react-dom":"^18.2.0","react-router-dom":"^6.22.2","tunnel-rat":"^0.1.2","typescript":"^5.4.2","vite":"^5.1.5","vite-plugin-dts":"^3.7.3","vite-plugin-glsl":"^1.2.1","vite-tsconfig-paths":"^4.3.1","postprocessing":"6.34.1","leva":"^0.9.35","three":"^0.160.1","@react-three/postprocessing":"^2.16.2","@react-three/drei":"^9.101.0","@react-three/fiber":"^8.15.19"},"publishConfig":{"access":"public"},"keywords":["react","fluid","react three fiber","webgl","postprocessing","three js","hover effect","shaders","glsl"],"bugs":{"url":"https://github.com/whatisjery/react-fluid-distortion/issues"},"repository":{"type":"git","url":"git+https://github.com/whatisjery/react-fluid-distortion.git"},"homepage":"https://github.com/whatisjery/react-fluid-distortion#readme","_id":"@carpit680/react-fluid-distortion@1.3.2","_nodeVersion":"22.2.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-6F1UxuXWseSAN8xVYwPXQ9P4bmvF6KIEAMmKgJt2oJ+4RmXjYLu9sOoOghp/utQKaAjniS/0FVWRk26B6cx9mA==","shasum":"24d1421fd3959b89a4da408d9d7cd292a86a9a16","tarball":"https://registry.npmjs.org/@carpit680/react-fluid-distortion/-/react-fluid-distortion-1.3.2.tgz","fileCount":34,"unpackedSize":291257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwafvSIq+FJvyXDB5Tx1d4zQCVXFoUMJiyE4IwMcxV1gIhAK/TLBiahL4Q2cXjjoSHPKsYRJKBkfo+GqAR/LZbNlRD"}]},"_npmUser":{"name":"carpit680","email":"carpit680@gmail.com"},"directories":{},"maintainers":[{"name":"carpit680","email":"carpit680@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-fluid-distortion_1.3.2_1730888910242_0.12020880600416284"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-06T10:28:30.145Z","1.3.2":"2024-11-06T10:28:30.452Z","modified":"2024-11-06T10:28:30.717Z"},"maintainers":[{"name":"carpit680","email":"carpit680@gmail.com"}],"description":"A react-three-fiber component for creating fluid distortion effects","homepage":"https://github.com/whatisjery/react-fluid-distortion#readme","keywords":["react","fluid","react three fiber","webgl","postprocessing","three js","hover effect","shaders","glsl"],"repository":{"type":"git","url":"git+https://github.com/whatisjery/react-fluid-distortion.git"},"author":{"name":"Jeremie Nallet"},"bugs":{"url":"https://github.com/whatisjery/react-fluid-distortion/issues"},"license":"MIT","readme":"[![Version](https://img.shields.io/npm/v/@whatisjery/react-fluid-distortion?style=flat&colorA=000000&colorB=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\n \n \n {... other effets}\n \n;\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\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","readmeFilename":"README.md"}