Effects
Every effect in the library, live on this page — hover the demos with a mouse or trackpad, and copy the exact markup that reproduces each one. The examples build up from the simplest real-world shapes: each is a pattern the plugin itself ships for Elementor widgets.
Magnetic
The element carries one JSON attribute; the engine pulls the cursor onto it while the pointer is near. What the cursor does while pulled is the design decision — the two shapes below are the ones the plugin ships for icons and buttons.
An icon the cursor traps
"scale": "target" sizes the ring to the element's real rendered size — exactly the icon's circle. On hover the icon's own barely-visible border fades out (one CSS rule keyed on the has-cursor-follower class the engine sets on <html>), and the ring takes its place at the same radius: the circle appears to come alive and hold the icon. On touch devices there is no ring, so the border stays.
<a href="#" class="demo-magnetic-icon" data-arts-cursor-follower-target='{"magnetic":true,"scale":"target"}'>
<svg width="26" height="26" viewBox="0 0 20 20" fill="none">
<path d="M5 15 15 5M7 5h8v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>A button the cursor collapses on
A button draws its own outline — a ring sitting across it reads as two shapes arguing. So the cursor collapses ("scale": "0px") while the magnet pulls, and the button's own hover state is the feedback. This is exactly the payload the plugin ships for the Elementor Button widget.
"elementScale": 0.95 adds the other half of that feedback: the button itself gives a little, from its center, for as long as the magnet holds it. Set it site-wide under Site Settings → Magnetic → Element Scale, or per element as here. While the mouse button is down the press ratio takes over the same property, so a press stays one consistent depth rather than compounding.
These demos need a mouse or trackpad — cursor effects stay off on touch devices.
<button type="button" class="demo-magnetic-button" data-arts-cursor-follower-target='{"magnetic":true,"scale":"0px","elementScale":0.95}'>
Magnetic button
</button>Highlight
The freebie: links and buttons need no attribute at all — anything interactive gets the highlight automatically. Opt an element out with the no-cursor-highlight class, or tune the highlight per element through the payload.
These demos need a mouse or trackpad — cursor effects stay off on touch devices.
<a href="#">A plain link</a>
<button type="button">A plain button</button>
<a href="#" class="no-cursor-highlight">Opted out</a>
<a href="#" data-arts-cursor-follower-target='{"highlight":{"scale":"140px"},"backgroundColor":"rgb(128 128 128 / 0.35)"}'>Tuned per element</a>Labels
A label names what a click will do. On its own it rides the follower as text; with "shape": "pill" it becomes the labeled pill the plugin ships for linked images, portfolio cards and slides.
These demos need a mouse or trackpad — cursor effects stay off on touch devices.
<a href="#" data-arts-cursor-follower-target='{"label":"Play Reel"}'>Showreel 2026</a>These demos need a mouse or trackpad — cursor effects stay off on touch devices.
<a href="#" class="demo-card" data-arts-cursor-follower-target='{"shape":"pill","label":"View Project"}'>
<span class="demo-card__media"></span>
<span class="demo-card__title">Aurora — brand identity</span>
</a>Drag hint
The payload the plugin writes for every carousel track and the lightbox: a pill promising a drag, arrows joining in while the gesture is held. Press and drag the strip.
These demos need a mouse or trackpad — cursor effects stay off on touch devices.
<div class="demo-drag-strip" data-arts-cursor-follower-target='{"shape":"pill","label":"Drag","drag":{"arrows":"horizontal"}}'>
Slides would live here — press and drag
</div>Anchor redirection
The hover zone and the pull target don't have to be the same element: "anchor" is a selector resolved inside the carrying element, and the magnet pulls toward it. This is how a wide edge-navigation strip magnetizes to its small glyph.
These demos need a mouse or trackpad — cursor effects stay off on touch devices.
<div class="demo-anchor-zone" data-arts-cursor-follower-target='{"magnetic":true,"anchor":".demo-anchor-dot"}'>
Hover anywhere in this zone
<span class="demo-anchor-dot"></span>
</div>Programmatic states
Everything above is markup. The same engine is scriptable through window.artsCursor — sessions stack and release cleanly. The button runs exactly the module shown below.
import type { ICursorSession } from '@engine'
let session: ICursorSession | null = null
export function toggleLoading(): void {
if (session) {
session.release()
session = null
return
}
session = window.artsCursor?.get()?.loading() ?? null
}More on sessions, events and the rules filter in the Developer Reference.