# <motion-spotlight>

Mouse-tracked radial-gradient spotlight overlay. Wrap any content; the
spotlight fades in on hover and springs toward the cursor for a smooth,
weightful feel rather than locking 1:1 to the pointer.

**Use it for:** a soft glow that follows the pointer over cards, feature
panels or a hero section, as a decorative touch.

**Avoid it for:** anything that carries meaning, because keyboard, touch
and reduced motion users may never see it. To move or lift the element
itself on hover, use `motion-hover` or `motion-tilt`.

**Accessibility:** the glow layer has `aria-hidden="true"` and ignores the
pointer, so it does not change what screen readers read or what people can
click. When content inside it takes keyboard focus, the glow fades in at the
last pointer position, or at the center when the pointer is not over it.

**Reduced motion:** the glow does not show and does not follow the pointer.

**Common mistakes:** setting `border-radius` on the inner card only; the
glow copies the radius of `motion-spotlight`, so round the host too. Using
a strong `--mc-spotlight-color` over text; the glow sits on top of the
content and can lower the text contrast.

Docs: https://www.motion-components.dev/docs/components/motion-spotlight/

## Install

```js
import 'motion-components/motion-spotlight'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-spotlight.js/+esm"></script>
```

## Example

```html
<motion-spotlight size="500" style="--mc-spotlight-color: rgba(96,165,250,0.25)">
  <div class="card">…</div>
</motion-spotlight>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `400` | Diameter of the spotlight in pixels. |
| `duration` | `number` | `0.35` | Spring duration of the follow and the fade, in seconds. Higher trails the cursor more. |
| `bounce` | `number` | `0` | Spring bounciness of the follow (0 = no overshoot). |

## Slots

| Slot | Description |
| --- | --- |
| (default) | The content the spotlight overlays. |

## CSS custom properties

| Property | Description |
| --- | --- |
| `--mc-spotlight-color` | Center color of the radial gradient. Default `rgba(255,255,255,0.18)`. |