{"repo":"whatisjery/react-fluid-distortion","free":true,"listed":false,"github":"https://github.com/whatisjery/react-fluid-distortion","clone":"git clone https://github.com/whatisjery/react-fluid-distortion.git","description":"Post-processing fluid distortion effects for React-Three-Fiber. Better version available at atelier-ui.com","language":"TypeScript","stars":196,"topics":["react","react-three-fiber","fluid","webgl","three-js","glsl","shaders"],"license":"MIT","category":"ui-components","readme_excerpt":"[!IMPORTANT] A better version of this effect is available as part of Atelier UI. 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 --- Demo - Atelier UI - CodeSandbox Installation : Example of use : 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","default_branch":null,"files":null,"tree":[],"storefront":"/r/whatisjery","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/whatisjery/react-fluid-distortion/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}