Fluid cursor mouse movement in reactjs

Questions
1

how can we create a fluid mouse cursor movement in R3F
I tried to create using GitHub - whatisjery/react-fluid-distortion: Post-processing fluid distortion effects in response to cursor interactions for React-Three-Fiber.
but there is one 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.