Skip to main content
Sync UI offers a variety of custom pointer styles to enhance user interaction and provide engaging feedback when users hover over interactive elements.

Variants

Glowing Dot

A simple glowing dot that follows the cursor with a subtle glow effect.

Following Ring

A ring that follows the cursor with spring physics for smooth movement.

Magnetic Arrow

A rotating arrow that magnetically points and animates with a drawn path effect.

Trailing Dots

A series of dots that create a trail behind the cursor.

Emoji Follower

An animated emoji that follows the cursor and changes randomly.

Gradient Blob

A soft gradient blob that follows the cursor with a subtle pulsating animation.

Features

  • Smooth cursor tracking
  • Spring physics for natural movement
  • Multiple visual styles
  • Customizable animations
  • Pointer event handling
  • Performance optimized

Usage

Custom pointers are perfect for:
  • Interactive sections
  • Hero areas
  • Call-to-action elements
  • Creative portfolios
  • Product showcases
  • Engaging landing pages

Implementation Notes

All pointer variants:
  • Hide the default cursor with cursor: "none"
  • Track mouse position with onMouseMove
  • Show/hide on hover with onMouseEnter/onMouseLeave
  • Use pointerEvents: "none" to prevent interference
  • Leverage Framer Motion for smooth animations

Customization

Each pointer can be customized by modifying:
  • Size and shape
  • Colors and gradients
  • Animation timing and physics
  • Trail length and opacity
  • Spring stiffness and damping

Build docs developers (and LLMs) love