Spotlight Card

A soft light on the face and a brighter one on the nearest border. Use it for feature grids, pricing and settings sections; with `href` the whole card is one link.

Install

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

Terminal

npx @galactrex/ui add spotlight-card

Usage

Example

import { SpotlightCard } from "@/components/galactrex/spotlight-card";

<SpotlightCard href="/pricing/">
  <h3>Creative</h3>
  <p>Everything in Essential, plus the coding apps.</p>
</SpotlightCard>

Source

Installs to components/galactrex/spotlight-card.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
`children`	`ReactNode`	—	Card content.
`href`	`string`	—	Makes the whole card a link.
`size`	`number`	`320`	Radius of the light in px.
`intensity`	`number`	`0.08`	Strength of the surface light, 0 to 1.
`className`	`string`	—	Extra classes for the outer element.

Variants

Card. Content surface.
Link card. With `href`, focusable with a visible ring.

Accessibility

With href it is one link with a focus ring; without, a plain container.
Light effects are aria-hidden and off on touch.

Motion and reduced motion

Pointer light through motion values; no re-render per move.
Fades over 300 ms.