# Spotlight Card

> Card lit by a soft spotlight that follows the pointer, catches its edge and reaches nearby cards.

A card with a soft light that trails the pointer, glows along the card edge and swells while the card is pressed. With `proximity` the light starts to reach the card before the pointer enters, so a grid of cards shares one light. Keyboard focus moves the light to the focused control.

<demo-spotlight-card>



</demo-spotlight-card>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/spotlight-card.json"
```

## Usage

```vue
<script setup lang="ts">
  import SpotlightCard from '~/components/ui/spotlight-card/SpotlightCard.vue';
</script>

<template>
  <div class="grid gap-4 sm:grid-cols-2">
    <SpotlightCard class="text-white" shape="beam" :proximity="120">
      <h3 class="text-lg font-medium">Shared light</h3>
      <p class="text-sm text-white/60">Neighbouring cards catch the glow.</p>
    </SpotlightCard>
    <SpotlightCard class="text-white" shape="beam" :proximity="120">
      <h3 class="text-lg font-medium">Beam shape</h3>
      <p class="text-sm text-white/60">Light pours down from the top edge.</p>
    </SpotlightCard>
  </div>
</template>
```

The card ships with `rounded-3xl p-8` and a surface, border and shadow taken from `theme`. Override padding and radius with classes, and the colours with the `--spotlight-card-surface` and `--spotlight-card-border` CSS variables.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        spotlight-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Colour of the light. Any CSS colour, alpha is respected. Defaults to white on dark cards, near black on light.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.15
      </code>
    </td>
    
    <td>
      Brightness of the light on the card surface, 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spotlight-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        240
      </code>
    </td>
    
    <td>
      Radius of the light in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        softness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.7
      </code>
    </td>
    
    <td>
      How gradually the light fades. 0 is a crisp disc, 1 a soft glow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        'circle' | 'beam'
      </code>
    </td>
    
    <td>
      <code>
        'circle'
      </code>
    </td>
    
    <td>
      Round light around the pointer, or a beam pouring down from the top edge toward it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How much the card edge catches the light, 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        proximity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        80
      </code>
    </td>
    
    <td>
      Distance in px outside the card at which the light starts to reach it. 0 lights the card only on hover.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        smoothing
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.3
      </code>
    </td>
    
    <td>
      How far the light floats behind the pointer. 0 sticks to it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ambient
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Lets the light drift across the card while nothing points at it, useful on touch screens.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flare
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The light swells and brightens while the card is pressed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Film grain inside the light, 0 to 1. A little removes banding in large soft gradients.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      Surface, border and light treatment for dark or light pages.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the card. Other attributes fall through to the root <code>
        div
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Content of the card.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The light layers are decorative and marked `aria-hidden`.
- When a control inside the card gets keyboard focus (`:focus-visible`), the light moves to it.
- With `prefers-reduced-motion: reduce` the light jumps to the pointer without easing, the press flare is off and the ambient drift stops.

## Credits

- Ported from [React Bits](https://reactbits.dev/components/spotlight-card) by David Haz.