PlumUI

Spotlight

A soft light that follows the cursor and catches the border. Group cards to light up their neighbors too.

Motion

Hobby

For side projects.

$0 /mo

  • 1 project
  • Community support
  • Basic analytics

Pro

Popular

For growing teams.

$20 /mo

  • Unlimited projects
  • Preview deployments
  • Advanced analytics

Scale

For serious traffic.

$80 /mo

  • SSO & audit logs
  • 99.99% SLA
  • Dedicated support

Playground

Tweak the props, the preview and the code follow.

Analytics
Move your cursor around
Deploys
Move your cursor around
Logs
Move your cursor around
Props
360
import { Spotlight, SpotlightGroup } from "@/components/ui/spotlight"

<SpotlightGroup className="grid grid-cols-3 gap-3">
  <Spotlight className="rounded-xl border p-5">…</Spotlight>
  <Spotlight className="rounded-xl border p-5">…</Spotlight>
</SpotlightGroup>

Installation

npx @plumsydev/plum-ui add spotlight

Usage

import { Spotlight, SpotlightGroup } from "@/components/ui/spotlight"
<SpotlightGroup className="grid grid-cols-3 gap-3">
  <Spotlight className="rounded-xl border p-5">…</Spotlight>
  <Spotlight className="rounded-xl border p-5">…</Spotlight>
</SpotlightGroup>

Examples

Single card

One card on its own, halo and border.

Preview every pull request

Each branch gets its own URL, so reviewers click a link instead of pulling code. Move your cursor across the card.

Bordered grid

border={false} on cells of a gap-px grid for a quieter look.

Edge functions

Run code 50ms from every user.

Global CDN

Assets cached in 120 regions.

Firewall

Block bots before they hit your app.

Observability

Logs, traces and metrics in one place.

API Reference

Spotlight

Extends div.

PropTypeDefault
size

Diameter of the light in px.

number360
border

Light up the border near the cursor.

booleantrue
fill

Show the halo inside the card.

booleantrue

SpotlightGroup

Tracks the cursor for every Spotlight inside it, so borders of nearby cards glow as you approach.

Notes

  • Pointer tracking writes CSS variables directly — no React re-render per mouse move.
  • Give the Spotlight a rounded-* class; the border light inherits the radius.
PreviousSpinnerNextStepper