Cursor Trail Effect
Premium dot + ring cursor with smooth following, hover states, and spotlight reveals. Desktop-focused effect using GSAP quickTo for 60fps performance.
About This Effect
A premium custom cursor system featuring a dot and ring that follow the mouse with independent easing speeds. The ring expands on interactive elements, shrinks on click, and can reveal content through a spotlight mode. Built with GSAP quickTo for consistent 60fps performance, this desktop-focused effect transforms the default cursor into a refined, branded interaction layer.
What's Included
- Dual-element cursor: precise dot + trailing ring
- Independent easing for dot and ring movement
- Hover state detection with configurable ring expansion
- Click feedback with ring scale animation
- Spotlight reveal mode with configurable radius
- Mix-blend-mode support for automatic color inversion
- Three easing presets: smooth, elastic, and snappy
- CSS custom properties for color and size customization
Perfect For
- Portfolio and agency websites seeking premium feel
- Product showcase pages with spotlight reveals
- Creative studio homepages and landing pages
- Interactive presentations and pitch decks
- Brand microsites and campaign landing pages
How It Works
Two absolutely-positioned elements — a small dot and a larger ring — follow the cursor using GSAP quickTo for smooth interpolation. The dot tracks with minimal delay while the ring follows with more easing, creating a layered trailing effect. Event listeners on interactive elements trigger ring scale animations. Spotlight mode adds a radial gradient mask that reveals content only around the cursor position.