012
AI ready

Cursor Trail Effect

£5

A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, colour morphs, and touch previews.

intermediate
4 more details
cursor-effectshover-effectvelocity-trailmicro-interaction
Cursor Trail Effect - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Cursor Trail Effect demo in new tab

About this effect

A responsive custom cursor effect that turns ordinary portfolio and editorial links into tactile interaction moments. A precise dot and delayed ring follow the pointer while fast movement releases fading rings and dots; targets expand the ring into contextual View, Play, Open or Drag labels, and a target can fill the ring with its own colour. Coarse pointers receive a tap-positioned label pulse instead of a dead hover state.

What's included

9 items
  • Independent dot and ring tracking with smooth, elastic, and snappy presets
  • Velocity-responsive afterimage trail made from reusable dots and rings
  • Context labels driven by data-cursor-text on any hover target
  • Per-target accent changes with data-cursor-color, and a filled ring with data-cursor-fill
  • Elastic size and shape morphs with click feedback
  • Optional parked cursor at load with data-cursor-park, so the first frame shows it
  • Tap label pulses for coarse-pointer devices
  • Optional spotlight mask, sizing controls, and blend mode
  • Keyboard focus mirroring, reduced-motion fallback, refresh, and full cleanup

Perfect for

5 use cases
  • Editorial portfolios with contextual project actions
  • Creative studio sites with expressive selected-work grids
  • Film and motion showcases with PLAY cursor labels
  • Agency case-study indexes with per-project accent colors
  • Campaign landing pages needing branded pointer feedback

How it works

1 section

A single CursorTrail instance discovers documented data hooks and creates its visual layers outside the buyer's content. The dot and ring follow at separate rates, pointer speed is tracked each frame, and a small afterimage pool is recycled only when movement crosses the speed threshold. Hover and focus tween the ring's size, shape, colour and text, while taps on a touch screen create a short-lived label pulse at the contact point. Colours come from the stylesheet, so the cursor retokens with the page. Cleanup is explicit and documented: a public destroy() and refresh(), with every listener and tween torn down.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Cursor Trail Effect opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add your container and targets to <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

The effect requires only a container with data-cursor-trail and, when target morphs are wanted, interactive descendants with data-cursor-hover. The script queries only these documented data hooks; your layout, class names, typography, photographs, and target styling are independent of the effect.

Copy the Core cursor styles block from assets/style.css: .cursor-trail, its generated child elements, the spotlight, tap pulse, fine-pointer gate, and reduced-motion rules. The studio index around it (masthead, project rows, the reel strip and its inline drag script, footer links, page tokens) is the demo's own and can be deleted. Keep the generated cursor fixed, above the page, and pointer-events: none. Do not apply cursor: none without the included .cursor-trail-active gate; the gate preserves a native cursor when JavaScript is unavailable or reduced motion is requested.

Colours live in the stylesheet, not the script. .cursor-trail sets --cursor-color (the dot, the afterimages, the filled ring) from your page's --accent, and the ring border and label read --ink and --page so they sit on whatever ground you use; the demo's dark tokens are only defaults. A data-cursor-color on the container or a target overrides the accent per instance. The label is set in the page's own body face (--font-sans) at 12px, sentence case.

Targets should be real links or buttons so keyboard focus can mirror pointer hover. On coarse pointers, tapping a marked target displays its label as a short pulse at the contact point; the custom cursor itself is never built there.

Options

Container options

Attribute Values Default Description
data-cursor-trail Boolean — Initializes the effect within this container
data-cursor-dot Pixel number 8 Dot diameter
data-cursor-ring Pixel number 40 Resting ring diameter
data-cursor-ring-hover Pixel number 60 Target ring diameter; text labels use at least 76
data-cursor-color Any CSS color Stylesheet --cursor-color (--accent, violet #6d4cff in the demo) Base cursor and trail color
data-cursor-ease smooth, elastic, snappy smooth Tracking and settle character
data-cursor-park "x y", each a % of the container or a pixel number Empty Seats the cursor at that point on load, sweeping in from the left so the first frames show the afterimages. Empty keeps it hidden until the pointer enters, the original behaviour. The first real pointer move takes over; if that move is outside the container the cursor hides
data-no-blend Boolean — Disables mix-blend-mode: difference
data-spotlight Boolean — Adds a radial spotlight mask
data-spotlight-size Pixel number 100 Spotlight radius

Target options

Attribute Values Default Description
data-cursor-hover Boolean — Enables hover, focus, and coarse-pointer feedback
data-cursor-text Text Empty Morphs the ring into a contextual label
data-cursor-color Any CSS color Container color Changes the cursor and afterimage accent over this target
data-cursor-fill Boolean — Fills the ring with the cursor colour and sets the label in --accent-ink; the demo uses it for the "Drag" state over the reel. The tap pulse fills the same way

Accessibility

  • Pointer targets should be semantic <a> or <button> elements.
  • Keyboard focus moves the custom ring to the target center and applies the same text, size, and color morph as hover.
  • prefers-reduced-motion: reduce keeps all page content visible, restores the native cursor, and disables generated cursor motion (a parked cursor is never built).
  • Without JavaScript, the .cursor-trail-active gate is never added, so the native cursor remains available.
  • Generated visual elements use aria-hidden="true" and never intercept pointer events.
  • Coarse pointers receive a tap-positioned text pulse rather than a hover-only dead state.

Browser Support

Modern browsers with ES6, Pointer Events, CSS custom properties, and matchMedia. color-mix() improves generated-layer tinting; the bordered cursor remains usable if that tint is unsupported.

Dependencies

  • GSAP 3.12+ (demo uses 3.15.0)
  • No GSAP plugins
  • Demo photographs are baked derivatives in assets/img/ (see assets/img-manifest.json); the effect itself needs no images

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

Custom Cursor Effects for WordPress

Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.