I am constantly surprised and inspired by so many websites on awwwards.com, many of which frequently feature cool cursors and various effects.

In these series, I’ll break down the process of making custom cursors and try to experiment with various cool visual effects based on them, all using React.js and Framer Motion.

Basic Custom Cursor

First, let’s start by defining some basic structure and styling for our custom cursor, which will just be a black circle and be placed in a fixed position at the top: 0; left: 0; corner for now.

function App() {
  return (
    <div className="App">
      <div className="cursor" />
    </div>
  )
}
---------------------------------
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: black;
}

Now that we have the custom cursor let’s bring it to life with some JavaScript. First, we need to capture the mousemove events and define a listener function which will animate our cursor to a correct position.

Since we’ll be using a functional component we need to define our listener in a useEffect hook.

import React, { useState, useEffect } from "react"

function App() {
  const [cursorXY, setCursorXY] = useState({ x: -100, y: -100 })
  useEffect(() => {
    const moveCursor = (e) => { }
    window.addEventListener('mousemove', moveCursor)
    return () => {
      window.removeEventListener('mousemove', moveCursor)
    }
  }, [])
  return (
    ...
  )
}
...

#framer-motion #css #cursor #react #react native