Automatic
Hover scale
Buttons, links, controls, roles, and focusable elements are recognized.
Smooth following, automatic hover feedback, velocity stretch, click ripples, magnetic targets, contextual labels, and hidden zones in one small browser utility.
01 / Core states
One orb that understands the element beneath it.
Contextual
Cursor label
The label comes directly from the target's data attribute.
orb hidden
inside
inside
Priority state
Hidden zone
Hide the orb over media, embeds, or any marked subtree.
02 / Motion stretch
Velocity turns a small circle into directional motion.
Move quickly
Sweep the pointer from side to side
03 / Click feedback
Every press can pulse the orb and release a ripple.
Filled target
Pulse + ripple
Click directly on the circular action to see both effects.
Outlined target
Exact origin
The expanding ring starts at the real pointer coordinates.
Compact target
Native interaction
Pointer feedback never captures or blocks the original click.
04 / Magnetic
The cursor leans toward the center of interactive targets.
Compact
Small target
Subtle attraction helps the orb settle over precise controls.
Balanced
Medium target
The same strength adapts naturally to a different rectangle.
Expanded
Large target
Geometry stays aligned through scrolling and layout changes.
05 / Context labels
Let the pointer explain what will happen next.
06 / Live playground
Tune the global orb, then revisit every example above.
Appearance
size + color
Motion
speed + stretch
Interaction
hover + click
Context
magnetic + label
import CursorOrb from "cursor-orb";
const orb = new CursorOrb();