Skip to content

feat: add cursorColor and cursorColorOnTarget props to TargetCursor#993

Open
calebephrem wants to merge 2 commits into
DavidHDev:mainfrom
calebephrem:feat/target-cursor-color
Open

feat: add cursorColor and cursorColorOnTarget props to TargetCursor#993
calebephrem wants to merge 2 commits into
DavidHDev:mainfrom
calebephrem:feat/target-cursor-color

Conversation

@calebephrem

@calebephrem calebephrem commented Jun 20, 2026

Copy link
Copy Markdown

In Short

Added two new optional props to TargetCursor for customizing cursor color:

  • cursorColor: sets the dot/corner color at rest
  • cursorColorOnTarget: changes the cursor color to this color while hovering a .cursor-target element, and back to cursorColor on leave

Why

Currently the cursor is hardcoded to white, with no way to make it match a website's accent colors

Changes

  • Added cursorColor / cursorColorOnTarget props (both optional and backward compatable)
  • Color transitions handled via gsap.to(..., { borderColor / backgroundColor }) on enter/leave, with a short 0.15s duration to keep it subtle
  • Scoped existing gsap.killTweensOf(corner) calls to x,y so they no longer clobber the new color tweens

Usage

<TargetCursor cursorColor="#ffffff" cursorColorOnTarget="#818cf8" />

Tested

  • Verified hover enter/leave color transitions on multiple .cursor-target elements in sequence
  • Verified default behavior is unchanged when cursorColor/cursorColorOnTarget are omitted
  • Verified corner position animations (drag-to-corner, parallax) still work correctly alongside the new color tweens

Happy to adjust durations, naming or anything else if you want.
Let me know if so!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant