Dev 203: Gooey mouse cursor

X min read Learn about XXX and XXX.

↓ Skip to the finished result

Welcome! This is a post in my Dev series, where I attempt to explain and recreate interesting front-end dev techiniques I run across on the web. In this post, we'll recreate the gooey mouse cursor seen on https://www.deplacemaison.com/.

At-a-glance we can see a couple of interesting features:

  1. The gooey trail
  2. The organic shape morphing when the cursor isn't moving

First up, let's work on getting a simple custom cursor. The gooey effects will come after.

Part 1: Customizing the cursor

Markup and initial positioning

We'll use a single <div> for our custom cursor which will be a 24px black circle to start.

We position it so the center of the circle is at the 0, 0 coordinate in the viewport. We do this by offsetting the circle by its radius. Make sure to use position: fixed rather than absolute, this will prevent our cursor from moving with the page scroll.

See the Pen Gooey Cursor - 1.0 - Cursor in the corner by Lokesh Dhakar (@lokesh) on CodePen.

We now have our circle in the top left corner, ready to animate.

Following the mouse

We'll be moving the cursor around using CSS transforms rather than updating the top and left values. To learn more about why we're using transforms, check out my Dev 201 post which goes into detail about performant animations.

To keep our custom cursor in sync with the mouse, we listen for any mouse movement and grab the mouse's x and y position values.

function onMouseMove(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

document.addEventListener('mousemove', onMouseMove, false);

Then on every frame, we update the cursor position with a CSS tranform.

function updateCursor() {  
  cursor.style.transform = `translate(${mouseX}px, ${mouseY}px)`;  
  requestAnimationFrame(updateCursor)
}

updateCursor();

Last thing, we hide the native cursor. And now we have our custom cursor, check it out below.

See the Pen Gooey Cursor - 1.1 - Follow the mouse by Lokesh Dhakar (@lokesh) on CodePen.

Part 2: Add the trail

At least two ways of doing it.

Canvas

SVG

Part 3: Make it gooey

Part $: Make it organic

We need to make sure clicks works.

Turn it off on mobile and other touch devices.

Clicks should work

Don't use on touch devices

🏁 Gooey cursor

See the Pen Stripe - Logo Bubble 3.1 - Perlin noise by Lokesh Dhakar (@lokesh) on CodePen.

I hope you enjoyed this post and learned something new. If you did enjoy it, check out the full listing of posts for more from the Dev series.

And send me your thoughts while they are fresh in your mind. What parts did you like? What parts were confusing? What would you like to learn about next?

And lastly, follow me on Twitter to find out when the next post is up.