# Spotlight Card

> Cursor-tracked spotlight card. A soft radial highlight follows the pointer, fading in on hover.

Source: https://ngwr.dev/animations/spotlight-card  
Kind: Animation

## Import

```angular-ts
import { WrSpotlightCard } from 'ngwr/spotlight-card';
```

## Playground

```html
<wr-spotlight-card>
  <h3>Cursor-tracked spotlight</h3>
  <p>Move the pointer across this card.</p>
</wr-spotlight-card>
```

## Directive variant ([wrSpotlight])

```angular-ts
// Directive variant — same package, drops on any element.
import { WrSpotlight } from 'ngwr/spotlight-card';

<div wrSpotlight class="card">…</div>

// Then in your CSS:
// background: radial-gradient(
//   400px circle at var(--wr-spotlight-x, 50%) var(--wr-spotlight-y, 50%),
//   rgba(var(--wr-color-primary-rgb), 0.15),
//   transparent 60%
// );
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `radius` | Where the spotlight fades out (% of the gradient). | `number` | `80` |
| `spotlightColor` | Highlight colour on `<wr-spotlight-card>`. Any CSS colour string. | `string` | `theme-aware (dark glow on light surfaces, light glow on dark)` |
| `[wrSpotlight]` | Directive variant — writes `--wr-spotlight-x/y` (in `%`) to any host based on pointer position. Pair with a radial-gradient/mask in your CSS. | `directive` | `—` |
| `[wrSpotlight].resetX / .resetY` | Default coordinates when no pointer is over the host. | `string` | `'50%'` |