Customise Cursor

Here's some context before we start.
Got inspired to customise the typical cursor we all use. Googled, researched, watched videos but found nothing worthwhile.

So here's an article on building your own fancy cursor.

---

Here's what we are building today.

Custom Cursor - Watch Video

Let's Begin:

Here's the overview:

• The fancy cursor you see above is nothing but 2 divs styled in a way to appear like a ring & a dot.
• Track the position of the original cursor.
• Displace your customised cursor as per the position of the original cursor.
• And finally, hide the original cursor.

Yes, it is that simple.

---

The CustomCursor Component:

Reverse Engineering it.
We will be importing our CustomCursor Component in the app.js in the following manner:

import "./App.css";
import CustomCursor from "./components/customCursor";

function App() {
  return (
    <div className="App">
      <CustomCursor />
       {/* Rest of your code */}
    </div>
  );
}

export default App;

Now, let's build our component.

---

Track the position:

Firstly, we need to track the position of our original cursor and hence we will displace our custom cursor with respect to the position tracked.

• Use the mousemove event listener to grab x & y co-ordinates of the original cursor.

• Store them in a state variable using useState. Here we are naming it position.

  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
  document.addEventListener("mousemove", (event) => {
      const { clientX, clientY } = event;
      setPosition({ x: clientX, y: clientY });
    })
  })
  

clientX & clientY are the X & Y Position Coordinates extracted from event

Tip: console.log to check if you are able to access the co-ordinates

---

Build a Basic Custom Cursor:

• Create a div(will style it as desired later).
• Displace it using the positionstate variable(extracted from the event listener above).
  • To move the div around we'll use top & left CSS properties combined with position:fixed
  • position:fixed will remove the div from the normal document flow.

<div style={{ left: position.x, top: position.y, position:fixed}}>
  Cursor
</div>

Put the pieces together and you'll get a cursor like this 👇

Basic Custom Cursor - Watch Video

That's some good progress. Let's keep going.

---

Style the Custom Cursor:

It's time to beautify our cursor. Use all of your creativity and design a fancy cursor.

I'll just be styling the divs to appear like a ring & dot

Here's how the jsx looks like.

<div className="cursor ring" style={{ left: position.x, top: position.y }} />
<div className="cursor dot" style={{ left: position.x, top: position.y }} />

And here's the CSS styling.

.cursor {
  position: fixed;
}

.ring {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(165, 160, 160, 0.808);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  will-change: width, height, transform, border;
  z-index: 999;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: rgb(100, 94, 94);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
  transition-duration: 10ms;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

And there we are! We have a beautiful custom cursor followed by the original cursor.

Custom Cursor

---

Hide the Original Cursor

We are almost done.
We just have to hide the original cursor.

It's quite simple. Here's how we do it.

html {
  cursor: none;
}

---

That's all! We are done.
Now you can see a beautifully customized cursor with a smooth transition.

Final Cursor - Watch Video

Here's the code altogether.

function CustomCursor() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    document.addEventListener("mousemove", (event) => {
      const { clientX, clientY } = event;
      setPosition({ x: clientX, y: clientY });
    });
  }, []);

  return (
  <>
  <div className="cursor ring" style={{ left: position.x, top: position.y }}/>
  <div className="cursor dot" style={{ left: position.x, top: position.y }}/>
  </>
  );
}

---

Hope you found this valuable.
A huge shoutout to my friend Udit , The customised cursor on his portfolio got me inspired to build one.

PS: Don't just stop here, as you now know the technique go ahead and use your creativity to the fullest to design a fancy cursor.
Tip: Try adding animations on the click of the mouse.

---

That's it from my side today. Let me know your thoughts in the comment section.
If you liked the article give it a thumbs up.

Hope you enjoyed it, and if you did, consider supporting me 👇. It will make my day :)