iPadOS Pointer Cursor

Interactive cursor component that highlights interactive elements with smooth animations using motion, mimicking iPadOS pointer interactions.

Hover over the buttons and links to see the cursor highlight effect

// Code for ipados-pointer-cursor/basic

// Code for ipados-pointer-cursor/basic

Installation

Loading installation instructions...

import { IPadOSPointerCursor } from "@/components/pluto-ui/ipados-pointer-cursor"

<IPadOSPointerCursor>
  <button>Click me</button>
  <a href="#">Link</a>
</IPadOSPointerCursor>

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content to wrap with cursor effect
`className`	`string`	-	Additional CSS classes
`highlightColor`	`string`	-	Custom highlight color (defaults to theme-aware)
`highlightSize`	`number`	`60`	Highlight circle size in pixels
`cursorSize`	`number`	`8`	Cursor dot size in pixels
`enableMagnetic`	`boolean`	`false`	Enable magnetic attraction to buttons
`magneticStrength`	`number`	`0.3`	Magnetic attraction strength (0-1)
`highlightRadius`	`number`	`999`	Highlight border radius (defaults to circle)

Highlight Color

Highlight Size: 80px

Cursor Size: 8px

// Code for ipados-pointer-cursor/customizable

// Code for ipados-pointer-cursor/customizable

Move your cursor near the buttons to see the magnetic attraction effect

// Code for ipados-pointer-cursor/magnetic

// Code for ipados-pointer-cursor/magnetic

Smooth Animations: Powered by motion for fluid cursor and highlight transitions
Automatic Detection: Automatically detects and highlights interactive elements (buttons, links, etc.)
Spring Physics: Uses spring animations for natural, responsive cursor movement
Magnetic Effect: Optional magnetic attraction to buttons for enhanced interactivity
Configurable: Customizable colors, sizes, and behavior through props
Theme-aware: Fully supports light and dark themes
Works Everywhere: Compatible with buttons, links, and custom interactive elements

The component uses motion's useMotionValue and useSpring hooks to create smooth, physics-based animations:

Cursor Tracking: Tracks mouse position using useMotionValue and animates the cursor dot with spring physics
Element Detection: Detects interactive elements (buttons, links, elements with cursor: pointer, etc.) at the cursor position
Highlight Animation: When hovering over interactive elements, the highlight circle scales up and follows the cursor
Magnetic Effect: Optionally applies magnetic attraction, pulling the highlight toward the center of interactive elements
Smooth Transitions: All animations use spring physics for natural, responsive movement

Cursor Movement: Spring animation with stiffness 500 and damping 28 for responsive tracking
Highlight Movement: Spring animation with stiffness 300 and damping 30 for smooth following
Scale Animation: Highlight scales from 0 to 1 when hovering interactive elements
Opacity: Highlight opacity transitions from 0 to 0.3 based on scale
Transform: Uses motion's useTransform for efficient value transformations

Requires motion as a dependency
The component hides the default cursor (cursor: none) and provides a custom cursor
Uses mix-blend-difference for the cursor dot to ensure visibility on all backgrounds
The highlight uses a radial gradient with blur for a soft, glowing effect
Magnetic effect calculates distance from cursor to element center and applies attraction within a threshold