react-custom-cursor (cursor_gk)

A customizable React cursor component using Framer Motion.

Installation

npm install cursor_gk


import React from "react";
import { CustomCursor } from "cursor_gk";

function App() {
  return (
    <>
      <CustomCursor
        outerSize={50}
        innerSize={10}
        pressedScale={0.6}
        hoverScale={1.5}
        stiffness={400}
        damping={30}
        outerBorder="2px solid #ff0000"
        outerColor="rgba(255,0,0,0.1)"
        innerColor="#ff0000"
        boxShadow="0 0 12px rgba(255,0,0,0.5)"
      />

      <div style={{ padding: "100px" }}>
        <h1>Hover over buttons or links!</h1>
        <button>Click Me</button>
        <a href="#">A Link</a>
      </div>
    </>
  );
}

export default App;


Props
Prop	Type	Default	Description
outerSize	number	40	Size of the outer circle
innerSize	number	8	Size of the inner dot
pressedScale	number	0.7	Scale when mouse is clicked
hoverScale	number	1.25	Scale when hovering over buttons/links
stiffness	number	300	Spring stiffness of outer circle
damping	number	28	Spring damping of outer circle
outerBorder	string	"2px solid black"	Outer circle border style
outerColor	string	"transparent"	Outer circle background color
innerColor	string	"black"	Inner dot color
boxShadow	string	"0 0 8px rgba(0,0,0,0.3)"	Shadow when hovering/clicking
Notes

No extra CSS required; everything is inline.

Works with React 18+ and Framer Motion 10+.

Place <CustomCursor /> near the root of your app for best effect.