# CardSpotlight

> Card whose radial-gradient spotlight tracks the cursor as it moves inside, fading in on hover and parking itself off-canvas when the pointer leaves, with configurable gradient size, color, and opacity.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Cards
- Tags: card, spotlight, mouse, gradient, interactive, hover
- Docs: https://fancy-ui.rama.app/docs/components/card-spotlight
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/card-spotlight

## Import

```svelte
<script lang="ts">
  import { CardSpotlight } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { CardSpotlight } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `slotClass` | `string` | `""` | CSS classes for the inner content wrapper |
| `gradientSize` | `number` | `200` | Size of the spotlight gradient in pixels |
| `gradientColor` | `string` | `"#262626"` | Color of the spotlight gradient |
| `gradientOpacity` | `number` | `0.8` | Opacity of the spotlight gradient |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Card content |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { CardSpotlight } from "fancy-ui-svelte";
</script>

<CardSpotlight class="h-64 w-80">
	<div class="p-6">
		<h3 class="text-lg font-bold">Spotlight Card</h3>
		<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
			Hover to see the spotlight effect following your cursor.
		</p>
	</div>
</CardSpotlight>
```

### Custom Colors

```svelte
<script lang="ts">
	import { CardSpotlight } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<CardSpotlight class="h-64 w-72" gradientColor="#3b82f6" gradientSize={250}>
		<div class="p-6">
			<h3 class="text-lg font-bold">Blue Spotlight</h3>
			<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">Custom blue gradient color.</p>
		</div>
	</CardSpotlight>
	<CardSpotlight class="h-64 w-72" gradientColor="#10b981" gradientSize={300}>
		<div class="p-6">
			<h3 class="text-lg font-bold">Green Spotlight</h3>
			<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
				Custom green gradient with larger radius.
			</p>
		</div>
	</CardSpotlight>
	<CardSpotlight class="h-64 w-72" gradientColor="#f59e0b" gradientOpacity={0.6}>
		<div class="p-6">
			<h3 class="text-lg font-bold">Amber Spotlight</h3>
			<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
				Lower opacity for a subtler effect.
			</p>
		</div>
	</CardSpotlight>
</div>
```