Micro-interactions

Shadow Cursor

A custom cursor with a shadow at its heel — a precise dot leads while a lagging blade trails on a spring, and when it crosses an interactive element the trail pools and swells around it, inverting whatever lies beneath. Scoped entirely to its own stage; the page cursor is never touched.

Cook BookSpring Follow-through Hover effect Momentum

Controls

dotSize8 px

trailSize36 px

stiffness150

damping15

cursorColor

#a855f7

blendMode

poolScale2.0 ×

Install

bun add motion

Props

Prop	Type	Default	Description
dotSize	number	8	Size of the leading precise dot.
trailSize	number	36	Size of the lagging trailing ring.
stiffness	number	150	Spring stiffness of the trailing ring — higher lags less.
damping	number	15	Spring damping of the trailing ring.
cursorColor	string (hex)	"#a855f7"	Color of the dot and trailing ring.
blendMode	"difference" \| "screen" \| "exclusion" \| "normal"	"difference"	Mix-blend-mode of the cursor over content beneath it.
poolScale	number	2	How much the trail swells when over an interactive element.

What It Demonstrates

Spring: Motion driven by physics (tension, mass, damping) rather than a set duration.
Follow-through: Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
Hover effect: Visual change when the cursor moves over an element.
Momentum: Motion that carries velocity, especially after a drag or interruption.

Related Components

Appears In

"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; import { motion, useMotionValue, useSpring } from "motion/react"; interface ShadowCursorProps { children?: ReactNode; dotSize?: number; trailSize?: number; stiffness?: number; damping?: number; cursorColor?: string; blendMode?: "difference" | "screen" | "exclusion" | "normal"; poolScale?: number; reducedMotion?: boolean; className?: string; } export default function ShadowCursor({ children, dotSize = 8, trailSize = 36, stiffness = 150, damping = 15, cursorColor = "#a855f7", blendMode = "difference", poolScale = 2, reducedMotion = false, className, }: ShadowCursorProps) { const stageRef = useRef<HTMLDivElement>(null); const [visible, setVisible] = useState(false); const dotX = useMotionValue(0); const dotY = useMotionValue(0); const trailX = useSpring(0, { stiffness, damping }); const trailY = useSpring(0, { stiffness, damping }); const trailScale = useSpring(1, { stiffness: 260, damping: 26 }); const live = useRef({ poolScale, reducedMotion }); live.current = { poolScale, reducedMotion }; const moveTo = (clientX: number, clientY: number, poolCenter?: { x: number; y: number; }) => { dotX.set(clientX); dotY.set(clientY); const tx = poolCenter ? poolCenter.x : clientX; const ty = poolCenter ? poolCenter.y : clientY; if (live.current.reducedMotion) { trailX.jump(tx); trailY.jump(ty); } else { trailX.set(tx); trailY.set(ty); } }; const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => { const stage = stageRef.current; if (!stage) return; const rect = stage.getBoundingClientRect(); const px = e.clientX - rect.left; const py = e.clientY - rect.top; const target = e.target as Element | null; const pool = target?.closest?.("[data-cursor-pool], button, a") ?? null; if (pool) { trailScale.set(live.current.poolScale); const pr = pool.getBoundingClientRect(); const cx = pr.left + pr.width / 2 - rect.left; const cy = pr.top + pr.height / 2 - rect.top; moveTo(px, py, live.current.reducedMotion ? undefined : { x: cx, y: cy }); } else { trailScale.set(1); moveTo(px, py); } }; const handlePointerEnter = (e: React.PointerEvent<HTMLDivElement>) => { const stage = stageRef.current; if (stage) { const rect = stage.getBoundingClientRect(); const px = e.clientX - rect.left; const py = e.clientY - rect.top; dotX.set(px); dotY.set(py); trailX.jump(px); trailY.jump(py); } setVisible(true); }; const handlePointerLeave = () => { setVisible(false); trailScale.set(1); }; useEffect(() => { if (reducedMotion) { trailX.jump(dotX.get()); trailY.jump(dotY.get()); } }, [reducedMotion, trailX, trailY, dotX, dotY]); return ( <div ref={stageRef} onPointerMove={handlePointerMove} onPointerEnter={handlePointerEnter} onPointerLeave={handlePointerLeave} className={[ "relative overflow-hidden cursor-none **:cursor-none", className ?? "", ].join(" ")} > {children} <motion.div aria-hidden className="pointer-events-none absolute left-0 top-0 z-50 rounded-full transition-opacity duration-200" style={{ x: trailX, y: trailY, scale: trailScale, width: trailSize, height: trailSize, marginLeft: -trailSize / 2, marginTop: -trailSize / 2, backgroundColor: cursorColor, mixBlendMode: blendMode, opacity: visible ? 1 : 0, }} /> <motion.div aria-hidden className="pointer-events-none absolute left-0 top-0 z-50 rounded-full transition-opacity duration-200" style={{ x: dotX, y: dotY, width: dotSize, height: dotSize, marginLeft: -dotSize / 2, marginTop: -dotSize / 2, backgroundColor: cursorColor, mixBlendMode: blendMode, opacity: visible ? 1 : 0, }} /> </div> ); }

Shadow Cursor

Controls

Install

Props

What It Demonstrates

Related Components

Magnetic Button

Hover List

Dial

Pixel Transition

Border Glow

Spotlight Shell

Appears In

Controls