(
Loading visualLoading visualLoading visualLoading visualLoading visualLoading visualLoading visualLoading visualLoading visual
)
loading.

Unlock Unlimited Access

Sign in for free to copy all GSAP components, remix full templates, and save your favorites.

Crosshair Cursor with Smooth Tracking

A minimal SVG overlay that tracks pointer coordinates with real-time horizontal and vertical targeting guides. Motion is smoothed via linear interpolation inside an optimized requestAnimationFrame loop, producing fluid cursor glides with zero input jitter while giving full control over stroke width, color, and damping factor.

Crosshair Cursor with Smooth Tracking

A minimal SVG overlay that tracks pointer coordinates with real-time horizontal and vertical targeting guides. Motion is smoothed via linear interpolation inside an optimized requestAnimationFrame loop, producing fluid cursor glides with zero input jitter while giving full control over stroke width, color, and damping factor.

CategoryCursor
TagGSAP, Cursor, QuickTo, SVG, Interactive, Minimal
Guide: How to UseView Guide

API References

PropTypeDefault
cursorColorColor of the crosshair targeting guidelines#000000
strokeWidthStroke thickness of the targeting lines in pixels2
smoothnessPointer tracking responsiveness (higher value tracks faster)0.15
hideDefaultCursorWhether to hide the native operating system mouse cursorfalse
width / heightBounding container dimensions200 / 100

Related components