Motion

SpotlightCard

A Card with the brand glow trailing the cursor, on a spring. It takes everything a Card takes and holds the hook itself, so a server page can use it as is. Its children keep the Card's layout and gap, over the glow. For tiles that should feel alive: a dashboard's numbers, a call to action.

view .md

Preview

balancemove the cursor

this month

$12,045.80

Up +7.4%

Start building.

The glow follows the cursor a beat late, so it reads as light.

Installation

terminal

bash

npx @entrepta/cli@latest add spotlight-card

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

spotlight-card.tsx

tsx

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

<SpotlightCard>
  <Metric label="balance" value={<Amount value={balance} />} />
</SpotlightCard>

<SpotlightCard variant="featured" size="xl" glow={800}>
  <CardTitle>Start <em>building.</em></CardTitle>
</SpotlightCard>

Props

Prop	Type	Default	Description
glow	number	640	Diameter of the glow in px
variant, size	Card's	-	default, featured, terminal or data; sm, md or xl