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.
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