What Is the Website Animation That Follows Your Mouse?

If a website moves, scales, shifts focus, or changes depth as you move your mouse, the effect is usually described as a cursor-driven animation, mouse-tracking animation, or cursor-reactive interaction.

There is no single universal name for every version of this effect. The correct term depends on what the cursor is actually controlling: an image may follow the pointer, a card may tilt, or an entire interface may smoothly change its visual focus.

For the interaction shown in our example, where the cursor guides attention between interface panels using smooth scaling, movement, and depth, we index the pattern as Cursor-Driven Cinematic Focus Navigation.

What is that website effect where everything reacts to your mouse?

Many people notice this type of interaction before they know what it is called.

You may have seen a website where:

• a large image moves slightly when you move the mouse;
• a card becomes larger as the cursor approaches it;
• surrounding content fades or moves backward;
• different areas become the visual focus depending on cursor position;
• the interface seems to respond continuously to your mouse;
• the page feels almost like a camera moving through the interface.

These effects belong to the broader family of cursor-driven interactions.

The exact name depends on the behaviour.

This is why searching only for terms such as “hover effect” can sometimes return the wrong result.

What is a cursor-driven animation?

A cursor-driven animation is an interface animation whose visual state changes according to pointer movement.

Instead of waiting for a click, the interface continuously reads where the pointer is located and uses that information to control movement, scale, rotation, depth, opacity, or other visual properties.

A simplified interaction flow looks like this:

1. Read the pointer position.
2. Identify the relevant interface region.
3. Calculate the target visual state.
4. Smooth the movement using interpolation or easing.
5. Update transforms, scale, opacity, or depth.
6. Repeat while the pointer moves.

The important difference is that the animation is continuous, rather than simply switching between a normal state and a basic hover state.

What is the animation in this example called?

The interaction in this example combines several behaviours.

As the cursor moves across different interface regions:

1. the active region becomes the visual focus;
2. that region moves slightly forward or becomes larger;
3. surrounding cards become less visually dominant;
4. transitions are smoothed rather than snapping instantly;
5. the interface maintains a sense of depth and spatial continuity.

For the UI Interaction Finder library, we identify this pattern as:

Cursor-Driven Cinematic Focus Navigation

This is a descriptive technical label rather than a universal web standard.

Designers and developers may also describe similar effects as:

• cursor-driven interface;
• mouse-tracking UI animation;
• cinematic cursor interaction;
• cursor-controlled focus effect;
• interactive dashboard hover effect;
• mouse-responsive card animation;
• cursor-reactive layout.

Knowing several aliases is often more useful than memorising only one name.

How is this different from a normal hover animation?

A simple hover effect normally has two main states:

1. the cursor is outside the element;
2. the cursor enters the element and triggers an effect.

For example, a card might simply scale from its normal size to a slightly larger size.

A cursor-driven interaction can respond throughout the pointer movement.

The cursor's horizontal and vertical position may influence:

• translation;
• scale;
• rotation;
• perspective;
• opacity;
• blur;
• depth;
• which element has visual priority.

That creates a more continuous and spatial experience than a standard hover effect.

What is the difference between a mouse-follow effect and a cursor-driven animation?

They are related, but they are not always the same.

A mouse-follow effect usually means that an object follows the cursor itself.

For example:

cursor moves right → image follows right

A cursor-driven interaction is broader.

The cursor might instead control:

• which card is emphasised;
• how much an image rotates;
• the direction of a parallax effect;
• the position of a spotlight;
• the perspective of a scene;
• the visual focus of an entire layout.

So a mouse-follow animation is one type of cursor-driven animation, but not every cursor-driven animation literally follows the mouse.

How do developers create a website animation that follows the mouse?

A typical implementation combines pointer input with browser animation and transform-based motion.

Common implementation concepts include:

• pointermove
• pointerenter
• pointerleave
• requestAnimationFrame
• transform
• translate3d
• scale
• perspective
• interpolation
• lerp
• easing
• opacity

Raw cursor coordinates are often not applied directly to the element.

Instead, developers commonly use a flow such as:

cursor position → target position → interpolation → current visual position

This creates the smooth, slightly delayed movement commonly associated with cinematic interfaces.

When should you use this type of mouse-driven animation?

Cursor-driven cinematic interactions work best when exploration and visual presentation are part of the experience.

They are less suitable when users primarily need to complete tasks quickly and predictably.

For example, complex cursor movement may be unnecessary in:

• checkout forms;
• administrative tables;
• data-entry workflows;
• accessibility-critical controls;
• interfaces designed mainly for touchscreens.

What should I ask an AI coding tool to build?

If you do not know the technical name, avoid prompts such as:

Make a fancy hover effect.

Instead, describe what you can actually see.

For example:

Create a cursor-driven interface where moving the pointer across different cards smoothly changes the visual focus. The active card should scale slightly forward while surrounding cards subtly recede. Use pointer position, smooth interpolation, and transform-based animation rather than a simple hover scale effect.

You can make the request more precise with terms such as:

• smooth;
• cinematic;
• subtle depth;
• continuous cursor response;
• no abrupt snapping;
• slight perspective;
• soft easing.

Describing the visible behaviour is often more effective than guessing the name of the interaction.

What if I do not know the name of a UI animation?

You do not need to know it.

Start with what you can see.

For example:

The image gets bigger when my mouse approaches it.

The whole website moves slightly depending on where my cursor is.

Moving the cursor over different cards makes each one come forward.

Those descriptions can then be mapped to terms such as:

• magnetic hover;
• cursor parallax;
• cursor-follow interaction;
• 3D card tilt;
• mouse-tracking animation;
• cursor-driven focus navigation.

That visual-to-technical mapping is the core idea behind UI Interaction Finder.

Find the UI effect you saw — even if you do not know its name

You do not need to know terms such as Cursor-Driven Cinematic Focus Navigation before you start.

UI Interaction Finder is designed around a simpler workflow:

See it → Name it → Prompt it → Build it.

Explore the UI Interaction Finder homepage to see this effect in motion and discover more interactions by visual behaviour, trigger, and effect.

For designers and developers looking for more advanced, cinematic, experimental, fancy, and playful UI interactions, the Premium Lifetime Library provides access to the complete collection with a one-time purchase.

Editorial information

Author: UI Interaction Finder
Reviewed by: UI Interaction Finder
First published: 13 September 2026
Last updated: 13 September 2026

Technical references

This article is based on standard browser interaction concepts documented by MDN Web Docs, including pointer events, requestAnimationFrame, CSS transforms, and reduced-motion preferences.