Components

Spotlight

Full-section pointer spotlight: a soft circle of lumen trails the cursor on a spring, fading in on entry and out on exit, like a hand-held light passing over the content.

Move your cursor across this surface.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add spotlight

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Spotlight } from "@lumora/ui/components/spotlight";
// or from the barrel:
import { Spotlight } from "@lumora/ui";

Props worth knowing

size sets the light's diameter in px (default 480). Wrap a section; the lumen circle trails the pointer on the drift spring and fades on enter/leave. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.