Cursor Glow

A dithered spotlight that follows the pointer.

cursor-glow-demo.tsx

import { CursorGlow } from "@/components/cursor-glow";

export function Hero() {
  return (
    <CursorGlow className="flex h-[560px] items-end p-10">
      <h1 className="text-5xl font-semibold tracking-tight text-white">
        Light that follows the work
      </h1>
    </CursorGlow>
  );
}

Installation

pnpm dlx shadcn@latest add @gradients-pro/cursor-glow

Needs a Pro account and the Pro registry setup.

Usage

import { CursorGlow } from "@/components/cursor-glow";

<CursorGlow className="h-[560px]">{children}</CursorGlow>;

It fills its box, so give it a height. Children render on top.

Props

Prop	Type	Default	Description
`palette`	`"ultramarine" \| "ember" \| "mono"`	`"ultramarine"`	A curated ramp that follows light and dark mode. Ignored when `colors` is set.
`colors`	`string[]`	none	2 to 6 CSS colours from the faintest light to the hottest, `var(--x)` included.
`background`	`string`	`var(--background)`	The surface outside the light.
`follow`	`number`	`1`	0 to 1. How closely the light follows the pointer; 0 leaves it drifting at rest.
`softness`	`number`	`0.45`	0 to 1. A larger light.
`cell`	`number`	`4`	Cell size in CSS pixels: 2, 4, 6 up to 16.
`speed`	`number`	`0.6`	0 to 2. How fast the resting light drifts.
`scheme`	`"light" \| "dark"`	follows the page	Forces the palette's colour scheme. By default it reads a `dark` or `light` class (or `data-theme`) on `<html>`, then the system setting.
`params`	`Partial<GradientParams>`	none	Any other engine param, applied last.
`className`, `style`			The outer box. Give it a size.
`children`	`ReactNode`	none	Drawn above the light.