Skip to content

How to Add a Follow Circle Cursor in WordPress?

Updated On : September 28, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Nexter Blocks Pro includes the Mouse Cursor block, and the Follow Circle type is enabled under Nexter > Blocks in the WordPress dashboard.
  • Mouse Cursor sets Cursor Area to Body, Type to Follow Circle, Circle Cursor Type to Predefined, and Circle Style to Border for a plain circle with no image or text.
  • Transition Duration controls how far the circle lags behind the pointer, starting at 0.3 seconds, while Transform CSS can make the circle grow or rotate over links.
Table of Contents

The circle trailing the pointer is the most recognisable custom cursor on the web, and the least intrusive.

The Follow Circle type gives you that, plus two variations: a scroll progress ring and a blended circle.

For every Mouse Cursor setting in one place, see the Mouse Cursor block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Pro — the Mouse Cursor block is part of Nexter Blocks Pro.
  • Block to enable: Mouse Cursor, switched on under Nexter > Blocks in your WordPress dashboard.
  • Nothing beyond the block itself — the plain circle needs no image or text.

Steps

  1. Add the Mouse Cursor block and click Design from Scratch.
  1. Set Cursor Area to Body.
The Cursor Area dropdown with Body, Row, Column and Block
  1. Set Type to Follow Circle and leave Circle Cursor Type on Predefined.
  1. Leave Circle Style on Border for the plain circle.
Circle Style with Border, Progress and Blend
  1. Set Circle Max Width and Circle Max Height, then colour it in the Follow Circle panel on the Style tab.
  1. Publish and move the mouse.

The other two Circle Styles have their own guides: Progress turns the circle into a scroll indicator, and Blend mixes it into whatever is underneath.

How It Behaves

  • It follows the pointer. Measured: the circle moved from (285, 285) to (885, 585) as the mouse moved from (300, 300) to (900, 600), at 50 by 50 pixels.
  • Transition Duration sets how much it lags behind the pointer, which is what gives the effect its feel. It starts at 0.3 seconds.
  • Transform CSS takes a raw CSS transform, so the circle can grow or rotate over links.
  • List of Tags for Hover Effect decides which elements trigger the hover state; it starts as a.

Limitations

  • Pro only.
  • A large circle covers what the visitor is pointing at. Keep it modest, or make it a thin outline.
  • Transform CSS is a raw CSS field with no validation — a typo simply does nothing.
  • The lag that makes it feel good also makes precise clicking harder if you set it too high.
  • Touch screens have no cursor, so phone and tablet visitors see none of this.

Troubleshooting

No circle appears

Move the pointer over your content — over blank page background the normal pointer returns. Also check Cursor Area against where the block sits.

The circle is invisible against my page

Set its Background Color in the Follow Circle panel, or try ” + a(BLEND_DOC, “the blend style”) + “, which adapts to what is underneath.

It lags too far behind

Lower Transition Duration.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding a follow circle cursor in WordPress?

Nexter Blocks Pro is the key requirement, because the Mouse Cursor block lives under Nexter > Blocks in the WordPress dashboard. The plain Follow Circle setup does not need an image or text, which keeps it lightweight and simple to style. That matters if you want the effect without extra assets getting in the way. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the block itself.

How do I make the follow circle cursor track the whole page instead of one section?

Set Cursor Area to Body so the effect follows pointer movement across the page content rather than a smaller container. That choice matters because the page notes that over blank background the normal pointer returns, so body-level targeting is what makes the cursor feel consistent while you move through content. Nexter Blocks Pro enables this through the Mouse Cursor block in Nexter, Nexter WP, NexterWP, nexterwp.com.

Why is my follow circle cursor not showing on part of the page?

The most common reason is that you are hovering over blank page background instead of content. The circle appears over your content, while the normal pointer returns on empty background. Cursor Area also has to match where the block sits, so a mismatch can make it look broken even when it is working. In practice, this is usually a placement issue rather than a styling issue.

How do I keep the follow circle cursor from lagging too much?

Lower Transition Duration. That setting controls how far behind the pointer the circle trails, and it starts at 0.3 seconds. A higher value makes the motion feel softer but also less precise for clicking, so if it feels sluggish or hard to target links, reducing that delay is the cleanest fix.

What are the limitations of a follow circle cursor in WordPress?

The effect is Pro only, and touch screens have no cursor at all, so phone and tablet visitors will not see it. A large circle can also cover what people are pointing at, which is why a thin outline or modest size works better in real use. Transform CSS is raw CSS with no validation too, so typos simply do nothing.

Should I use Follow Circle, Progress cursor, or Blend cursor?

Follow Circle is best when you want a plain trailing ring that stays least intrusive. Progress turns that same circle into a scroll indicator, while Blend mixes it into whatever is underneath. If visibility against your page is the problem, Blend can help because it adapts to what sits behind it; if you want a simple pointer trail, Follow Circle stays cleaner.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53