Also called Cursor: Adaptive caret size
The text caret grows or shrinks to match the size of the character it sits beside.
Use for
Editors, typing effects
Add an "Adaptive Caret" effect (also called adaptive caret size) to [where].
The text caret should move in front of the character nearest the pointer and quickly stretch or shrink to match that character's height, with a smooth, snappy resize and no bounce.
Keep the text itself from shifting, and let the caret follow keyboard movement the same way it follows the pointer.
Also called Difference cursor, Inverting cursor
A circle cursor inverts the colors beneath it using mix-blend-mode difference.
Use for
Creative portfolios
Add a "Blend-Mode Cursor" (also called a difference cursor or inverting cursor) to [where].
Replace the pointer with a solid circle that sits directly under it with no lag and inverts the colors of the text and shapes it passes over.
Keep the blending contained to that area so it does not mix with the rest of the page, make sure it still inverts clearly in dark mode, and keep the normal cursor on touch devices.
Also called Following Pointer, Smooth Cursor, Cursor follow, Spring follow cursor
A shape or label trails the pointer with a spring or eased delay.
Use for
Custom cursors, tooltips
Add a "Cursor Follower" (also called a following pointer or smooth cursor) to [where].
A small round marker should trail the pointer with a soft, eased delay and glide to a stop right where the pointer rests, without bouncing.
Keep the real pointer visible, never let the marker block clicks, and leave it out on touch devices.
Also called Hover image follow, Image preview on hover
A preview image follows the pointer while hovering a text list item.
Use for
Project lists, menus
Add a "Cursor Image Hover" effect (also called hover image follow or image preview on hover) to [where].
While the pointer is over a text list item, a small preview image of that item should float beside the pointer, following it with a slight smooth lag and sliding to the next image when the pointer moves to another item.
The preview must never block clicks on the list, and the list should stay fully usable without it on touch and keyboard.
Also called Flashlight cursor, Spotlight effect
A circle of light around the pointer reveals content while the rest stays dark.
Use for
Hero sections, reveal effects
Add a "Cursor Spotlight" effect (also called a flashlight cursor or spotlight effect) to [where].
A soft circle of light should follow the pointer and reveal the content under it while the rest of the area stays dimmed.
On touch devices, where there is no pointer to follow, show the content fully lit instead.
A fading string of shapes is left behind the pointer as it moves.
Use for
Playful landing pages
Add a "Cursor Trail" effect (also called a mouse trail) to [where].
As the pointer moves, it should leave a short string of small dots behind it that each shrink and fade away quickly, so the trail stays short and smoothly traces the path.
Only draw the trail while the pointer is moving, never let it block clicks, and leave it out on touch devices and for users who prefer reduced motion.
Also called Animated cursor, Cursor replacement
The default arrow is replaced by a styled dot or ring that changes over interactive elements.
Use for
Portfolio and agency sites
Add a "Custom Cursor" (also called an animated cursor or cursor replacement) to [where].
Replace the default arrow with a small dot that tracks the pointer exactly and a ring that follows a little behind, and let the ring grow smoothly while it is over links and buttons.
Keep the normal cursor on touch devices and in text fields, and never let the custom cursor block clicks.
Also called Magnetic target, Magnetic hover
The element is pulled toward the pointer as it comes close, then snaps back when it leaves.
Use for
CTA buttons, nav icons
Add a "Magnetic Button" effect (also called a magnetic target or magnetic hover) to [where].
As the pointer comes close, the button should be pulled a little toward it with its label moving slightly further, and when the pointer leaves it should spring back to its place with a small bounce.
Keep the surrounding layout from shifting, and turn the pull off on touch devices and for users who prefer reduced motion.
A field of small lines rotates to point at the pointer, like iron filings around a magnet.
Use for
Creative backgrounds
Add a "Magnetic Filings" effect to [where].
A grid of short lines should each turn to point straight at the pointer right away, like iron filings around a magnet, and all face the center when there is no pointer.
Keep it a decorative background that never blocks clicks, and leave the lines still for users who prefer reduced motion.