Spotlight Border

A border that answers the pointer. Pair it with usePointer on any surface; SpotlightCard is built from it.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add spotlight-border

Usage

Example

import { SpotlightBorder } from "@/components/galactrex/spotlight-border";

const p = usePointer();

<div {...p.handlers} className="relative rounded-xl border border-gxui-line p-6">
  <SpotlightBorder x={p.x} y={p.y} active={p.active} />
  Settings
</div>

Source

Installs to components/galactrex/spotlight-border.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`x, y`	`MotionValue<number>`	—	Pointer position in px, from usePointer() on the parent.
`active`	`boolean`	—	Whether the pointer is over the parent.
`size`	`number`	`180`	Radius of the lit area in px.
`width`	`number`	`1`	Border width in px.
`color`	`string`	`var(--gxui-glow)`	Light colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

On any surface. Spread `usePointer().handlers` on the parent and pass its x, y and active.

Accessibility

Decorative only and aria-hidden.
Off on touch: there is no hover to follow.

Motion and reduced motion

The light moves through motion values, with no React re-render per pointer move.
Fades in and out over 250 ms.