# Spotlight Card

> A card with a soft highlight that follows the pointer.

Source: https://ngwr.dev/bits/spotlight-card  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrSpotlight, WrSpotlightCard } from 'ngwr/bits/spotlight-card';

@Component({ imports: [WrSpotlight, WrSpotlightCard] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/spotlight-card';
```

## Playground

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

```angular-ts
import { Component } from '@angular/core';

import { WrSpotlightCard } from 'ngwr/bits/spotlight-card';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrSpotlightCard],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Directive variant ([wrSpotlight])

`[wrSpotlight]` writes the pointer position to `--wr-spotlight-x` and `-y`; paint it with your own gradient.

```angular-ts
import { WrSpotlight } from 'ngwr/bits/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%),
//   color-mix(in srgb, var(--wr-color-primary) 15%, transparent),
//   transparent 60%
// );
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `radius` | Where the spotlight fades out (% of the gradient). | `number` | `80` |
| `spotlightColor` | Highlight colour. Unset, it follows the theme. | `string \| null` | `null` |
| `[wrSpotlight]` | Writes `--wr-spotlight-x` / `-y` (in `%`) on any element. Pair with a gradient in your CSS. | `directive` | `—` |
| `[wrSpotlight].resetX / .resetY` | Default coordinates when no pointer is over the host. | `string` | `'50%'` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/spotlight-card`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-spotlight-card-border` | `var(--wr-border-base)` | `.wr-spotlight-card` |
| `--wr-spotlight-card-padding` | `var(--wr-space-xl)` | `.wr-spotlight-card` |
| `--wr-spotlight-card-radius` | `var(--wr-border-radius-lg)` | `.wr-spotlight-card` |
| `--wr-spotlight-color` | `light-dark(color-mix(in srgb, var(--wr-color-on-surface) 15%, transparent), color-mix(in srgb, var(--wr-color-on-surface) 22%, transparent))` | `.wr-spotlight-card` |
| `--wr-spotlight-x` | `50%` | `.wr-spotlight-card` |
| `--wr-spotlight-y` | `50%` | `.wr-spotlight-card` |

## See also

- [Card](https://ngwr.dev/reference/components/card) — A surface that groups related content.
- [Border Glow](https://ngwr.dev/bits/border-glow) — A card whose border glows where the pointer is.
- [Tilt Card](https://ngwr.dev/bits/tilt-card) — A card that tilts in 3D toward the pointer.
- [Star Border](https://ngwr.dev/bits/star-border) — Light rays that run along the edges of a box.