cursorkit

Builtfor
Interaction.

Spring physics · Variant stack · Plugin system.
Zero dependencies.

$npm i @izhann/cursorkit
v1.0.0version
MITlicense
0dependencies
scroll
Spring PhysicsVariant StackClick EffectsInk TrailCursorLensMagnetic CursoruseCursorIdleCursorSpotlightuseCursorZoneemitCursorEventTheme SystemCustom SVGsSpring PhysicsVariant StackClick EffectsInk TrailCursorLensMagnetic CursoruseCursorIdleCursorSpotlightuseCursorZoneemitCursorEventTheme SystemCustom SVGs

—— what it is

Built for the
moment you hover.

Three interlocking systems. Any cursor state, any effect, composable.

01

Spring Physics

A Velocity Verlet integrator runs every animation frame. Stiffness, damping, and mass are per-variant — so your link cursor can feel airy while your button cursor snaps.

default
link
button
view

02

Variant Stack

Nested hover zones push variants onto a stack. Leaving an element pops back to the previous state — no global state management, no stale cursors.

TrailConfettiSpotlightRevealDrawLens

03

Plugin System

Additive canvas plugins slot in next to the cursor — trails, confetti, spotlight, reveal, freehand draw. Each is a single component, zero configuration required.

—— cursor variants

Every state,
considered.

Hover any card to see the variant live. Each has independent spring parameters.

default

8px dot, instant spring

link

Airy 44px ring

click

button

60px with label

text

2px I-beam caret

view

view

76px slow orbit

drag

drag

Green drag indicator

close

Red deletion zone

invert

mix-blend-mode: difference

square

38px rounded rect

spot

130px ambient glow

—— plugin system

Effects that
sell themselves.

14 variants across trails, click effects, and canvas overlays. One component each.

Trailfollows the cursor continuously
Click Effectfires on every click
Canvasfull-page overlay

← select a plugin above

—— theme system

One line.
Any look.

Click a theme below — the cursor changes live across the entire page.

—— custom cursors

Beyond the arrow.

SVG and animated element cursors, ready to use. Hover any card.

Crosshair

Precision reticle with tick marks.

Pointer

Hand-drawn arrow with depth shadow.

Spinning Star

4-point star, rotates continuously.

Blinking Eye

Anatomical eye, blinks every 4 s.

Grab Hand

Distinct fingers for draggable zones.

Gradient Disc

Conic rainbow, spinning glow.

Pulse Rings

Two rings breathing in phase.

—— hooks

Feel the data.

Four hooks that expose cursor state to your components.

useVelocityCursor

EMA-smoothed speed, angle, and component velocities. Idle decay built in.

speed0 px/s
vx0
vy0
angle0°
idle

useMagnetic

Elements that attract the cursor within a configurable radius.

Pull me
And me
Us too

useCursorIdle

Fires after a configurable idle timeout. Good for screensavers or nudges.

moving — stop 2 s to trigger

useCursorZone

Observe a ref and auto-switch the variant when it enters the viewport.

scroll here

Hover to preview the "view" variant.
useCursorZone switches it automatically on scroll.

—— CursorLens

See closer.

Real DOM-duplication magnifier. Cursor hides while hovering — pure lens focus. Move over the table.

proptypedefaultdescription
sizenumber180Lens diameter in px
scalenumber2.2Zoom multiplier
borderstring"1.5px solid"CSS border shorthand
zIndexnumber9995Stack order
childrenReactNodeContent to magnify
strengthnumber0.35useMagnetic pull force
distancenumber80useMagnetic trigger radius
timeoutnumber2000useCursorIdle delay ms
variantstring"spot"useCursorIdle variant
thresholdnumber0.5useCursorZone visibility %
idleThresholdnumber50useVelocity idle speed
colorstring"rgba(...)"Trail / effect color
radiusnumber160Spotlight radius
fadeTimenumber800Trail fade duration ms
spreadnumber60Spark spread angle
elongatebooleanfalseCursor elongate on move
hideNativebooleantrueHide OS cursor
particleCountnumber12Burst / confetti count
<CursorLens size={170} scale={2.2}><YourContent /></CursorLens>

—— emitCursorEvent

Effects without
clicking.

Programmatically fire the active plugin at any position. No real user interaction needed.

emitCursorEvent("click", { x, y }) // fires cursor:click CustomEvent

—— get started

Start building.

$npm i @izhann/cursorkit
cursorkit · @izhann/cursorkit
MIT LicenseZero DependenciesTypeScript