Cursor Glow

Add a soft amber and burgundy glow that follows the pointer with a spring.

Dependencies: motion
Size: 118 lines
Controls: 7 controls

example.tsx

1import { CursorGlow } from "@/components/onycx/cursor-glow";23export default function Example() {4  return (5    <CursorGlow6      size={380}7      color={"#8b1e2d"}8      secondaryColor={"#b56a22"}9      opacity={0.4}10      scope={"page"}11      stiffness={120}12      damping={25}13    />14  );15}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/cursor-glow.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/cursor-glow.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the cursor-glow.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
size	number	380	Diameter in px; the light is centred on the pointer (offset −size/2).
color / secondaryColor	string	"#8b1e2d" / "#b56a22"	Core at 22% and halo at 10% by 40%, clear by 70%, mixed with color-mix.
opacity	number	0.4	Layer opacity.
scope	"page" \| "container"	"page"	Page: a fixed layer listening on window (the original). Container: an absolute layer clipped to a positioned parent that fades out when the pointer leaves.
stiffness / damping	number	120 / 25	motion/react useSpring settings for the trail.
zIndex	number	30	Stacking order of the page-scope layer.