Basic steps
- Pick a level (Basic, Intermediate, Advanced, Advanced+ or Characters) and choose an effect
- Move the mouse over the sample page, including over links and buttons
- Change the color, size and delay in the settings
- Press "Copy code" and paste it into your site (for Characters, also download the image)
Levels
| Level | Uses | Good for |
|---|---|---|
| Basic | CSS and a few lines of JavaScript | Trying your first one. Paste it and it works |
| Intermediate | Plain JavaScript | Adding particles, trails and other flourishes |
| Advanced | GSAP (loading line included) | Smooth motion such as magnetic buttons and metaballs |
| Advanced+ | Three.js (WebGL), loading included | Moving the screen and images themselves: Fluid, Glitch, Mask Reveal, Dissolve |
| Characters | Sprite sheets rendered in Blender (directions and action frames) | Friendly sites with characters that walk, hop and sleep |
How to paste
The easiest way is to paste the "All in one" code right before </body>.
Styles and scripts are bundled together, so you don't need to touch anything else.
If your site keeps CSS and JavaScript in separate files, switch tabs and copy HTML, CSS and JS separately into each file. The Advanced code includes the line that loads GSAP from a CDN in the HTML; skip it if your site already loads GSAP.
For Characters, put the image you get from "Download asset" in an images folder next to the page.
If you put it elsewhere, change images/… in the code to match.
Advanced+ loads Three.js from a CDN, so it is heavier than the other levels (it does not run on phones).
Glitch, Mask Reveal and Dissolve work on img elements and on elements with a background image that have the data-stalker-gl attribute.
Set the second image for Mask Reveal with data-stalker-reveal="images/second.webp" on the element (without it, a grayscale version of the same image is revealed).
Reacting to more elements
Grow on Links, Text Circle and Magnetic Cursor change shape over a and button.
To make other elements such as cards react, add the data-stalker attribute to them.
<div class="card" data-stalker>…</div>FAQ
How do I add a mouse stalker to WordPress?
Paste the "All in one" code right before </body> in your theme's footer.php, or into the footer field of a plugin that lets you add code to the header and footer.
If you edit the theme directly, use a child theme so updates don't overwrite it.
What happens on phones?
Nothing. The exported code only runs on devices with a mouse (hover: hover and pointer: fine), so phones and tablets show the page as usual.
It also does nothing for visitors who have turned on reduced motion.
Will it slow down my site?
Positions are updated inside requestAnimationFrame and only change transform, so the page layout is not recalculated.
Particle effects only spawn particles after the cursor moves a set distance and remove them when they fade.
Should I hide the default arrow?
Either is fine. Hiding it looks cleaner but can make clickable areas less obvious. If you hide it, pair it with an effect that changes shape over links, such as Grow on Links, Text Circle or Magnetic Cursor.
Is GSAP free to use?
Yes. Since 2025 GSAP is free to use, including on commercial sites. The Advanced code includes the line that loads it from a CDN, so you can paste it as is.
Can I use the Character images on commercial sites?
Yes. They are free for personal and commercial use and no credit is required. Redistributing or selling the images themselves as assets is not allowed.
How do I make my own logo or image follow the cursor?
Choose Emoji or Image in Basic and replace the content of the span in the HTML with an img element; the image follows with the same motion.
To switch frames by direction or rotation, prepare a sprite sheet like the Characters level and swap the background URL in the CSS.