Back to Gallery
Cursor Trail Effect
£5 Standard License Unlimited projects
A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, color morphs, and touch previews.
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, or OPEN labels. Coarse pointers receive a tap-positioned label pulse instead of a dead hover state.
What's Included
- 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
- Elastic size and shape morphs with click feedback
- 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
- 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
A single CursorTrail instance discovers documented data hooks and creates its visual layers outside the buyer's content. A GSAP ticker interpolates the dot and ring at separate rates, measures pointer velocity, and recycles a small afterimage pool only when movement crosses the speed threshold. Hover and focus events tween ring dimensions, shape, color, and text, while coarse-pointer taps create a short-lived label pulse at the contact point. gsap.context(), gsap.matchMedia(), a listener Map, and the public destroy() and refresh() methods provide predictable lifecycle cleanup.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
