Spring: Follow Cursor

Introduction

The Spring: Follow Cursor example shows how to create a smooth, spring-based animation that follows your cursor around the screen. Instead of snapping instantly to the pointer position, the ball bounces and settles naturally, mimicking real-world physics.

This example uses three core Motion APIs: springValue creates animated values with spring physics, styleEffect automatically applies those values to element styles, and animate provides the underlying animation engine.

Spring animations are perfect for cursor followers because they create natural-feeling motion. Unlike linear animations that move at a constant speed, springs accelerate and decelerate smoothly, creating more organic and visually appealing movement.

Get started

Let's start with the basic HTML structure and styling for the ball that will follow our cursor:

<div class="ball"></div>

<script type="module">
    const ball = document.querySelector(".ball")
</script>

<style>
    /** Copy styles from example source code */
</style>

We've created a circular element with a pink background. The overflow: hidden on the body prevents scrollbars from appearing when the ball moves beyond the viewport edges.