just-cursor-animation

Animating the cursor through the use of canvas

Supports only React as for now

import Animate from 'just-cursor-animation'

function App() {
    return (
        <>
            {/* Your rest of the code */}
            <Animate color="#ffffff" />
        </>
    )
}

Its advised to put the Animate component in the last so that it will be able to calculate the full height of the document for the creation of its canvas.

Note

• color prop accepts only hexadecimal color or css native colors.
• By default the color is set to be black

Optional :

You could edit these default values too by passing a prop params

function App() {
  return (
    <>
      <div
        style={{
          height: "100vh",
          background:
            "linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
        }}
      />
      <Animate
        color="#ffffff"
        params={{
          widthFactor: 0.3,
        }}
      />
    </>
  );
}