# Spotlight Border

> Lights only the stretch of border nearest the pointer.

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

- Family: Chrome
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/spotlight-border/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add spotlight-border
```

It installs to `components/galactrex/spotlight-border.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
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>
```

## 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

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