how can we create a fluid mouse cursor movement like we have in www.buttermax.net in R3F
I tried to create using https://github.com/whatisjery/react-fluid-distortion/
but there are 2 thing, there is no white background and black movement
and 2nd thing is there is no blend thing if I mouse over the text if showBackground=false.
this is the code in nextjs
'use client'
import { Canvas } from '@react-three/fiber';
import { EffectComposer } from '@react-three/postprocessing';
import { Html } from '@react-three/drei'; // Import Html from drei
import { Fluid } from '@whatisjery/react-fluid-distortion';
import { Text as DreiText } from '@react-three/drei';
import { useEffect, useState } from 'react';
const YourComponent = () => {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMouseMove = (event) => {
setMousePosition({
x: event.clientX,
y: event.clientY,
});
};
// Add the event listener
window.addEventListener('mousemove', handleMouseMove);
// Clean up the event listener when the component unmounts
return () => {
window.removeEventListener('mousemove', handleMouseMove);
};
}, []);
return (
<div className="text-9xl flex justify-center items-center h-[100vh]">
<Canvas
style={{
position: 'fixed',
top: 0,
left: 0,
height: '100vh',
width: '100vw',
// background: '#000',
}}
>
<EffectComposer>
<Fluid
radius={0.5}
curl={0}
swirl={0}
distortion={0.05}
force={2}
pressure={0.1}
densityDissipation={0.97}
velocityDissipation={0.9}
intensity={0.3}
rainbow={false}
blend={-5}
showBackground={false}
fluidColor='#f00'
/>
<DreiText
letterSpacing={-0.07}
fontSize={0.94}
position-y={0.8}
color='#fff'
material-toneMapped={false} // Disable tone mapping for sharp contrast
material-depthWrite={false} // Disable depth write
material-depthTest={false} // Disable depth test for blending
>
REACT POST
</DreiText>
{/* <Html>
<span>Hello</span>
</Html> */}
</EffectComposer>
</Canvas>
</div>
);
};
export default YourComponent;
the blend prop only works when showBackground=true, but we can achieve this effect with showBackground as false only.
can anyone help me to achieve the same mouse flow effect which is in buttermax.net
Thanks in advance.