For a recent highly interactive project I was building in Next.js (React), I made an animated cursor component to compliment the branded experience.

It’s a neat little feature, so afterwards I baked in some options and made the component available on NPM as react-animated-cursor.

Creating a Custom Cursor

Creating a custom cursor is actually pretty simple. At a baseline, you:

• Hide default custom on links via cursor: none;
• Create a div to house and style your custom cursor.
• Write event listeners that follow the mouse’s x/y coordinates, using those values to update your custom cursor position.

Of course, you can have more fun with it, adding additional effects, click interactions, colors, shapes, etc.

React Animated Cursor

React Animated Cursor is a functional component, making use of hooks like useEffect. The component is comprised of the following:

• An inner dot (cursorInner)
• An outer dot or circle (cursorOuter), with slight opacity based on the dot/primary color.
• A slight trailing animation of the outer dot/circle.
• A feedback interaction that inversely scales the inner and outer dots on click and link hover.
• Options for modifying the color, dot sizes, animation speed, and scaling amounts of the cursor elements

It can look a little something like:

Usage

Install package from npm

npm i react-animated-cursor

Import the component within a layout

import React from "react";
import AnimatedCursor from "react-animated-cursor"

export default function App() {
  return (
    <div className="App">
    <AnimatedCursor
      innerSize={8}
      outerSize={8}
      color='193, 11, 111'
      outerAlpha={0.2}
      innerScale={0.7}
      outerScale={5}
    />
    </div>
  );
}

That’s it. You should be good to go.

Demo

Here’s a demo of the component in action. The demo can be found in the repo build as well.

Right Here

Repo

Here’s React Animated Cursor on Github. See the readme for addition docs and the available options.

React Animated Cursor on Github

Caveats

Next.js

With Next, at one time you needed leverage a Dynamic Imports to set ssr:false for the component to work. For example

import dynamic from 'next/dynamic'

const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
  ssr: false
});

<AnimatedCursor/>

However, I think Next addressed this issue around v2.1.5, so you should be good to go.