# GlareCard

> Holographic trading card effect with mouse-tracking glare and rainbow foil.

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

## Import

```svelte
<script lang="ts">
  import { GlareCard } 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 { GlareCard } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Card content rendered inside the holographic surface |

## Examples

### Basic Usage

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

<GlareCard>
	<div class="flex size-full flex-col items-center justify-center p-6 text-white">
		<h3 class="text-2xl font-bold">Holographic</h3>
		<p class="mt-2 text-sm text-slate-300">Move your mouse to see the effect</p>
	</div>
</GlareCard>
```

### Multiple Cards

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

<div class="flex flex-wrap justify-center gap-8">
	{#each ["Fire", "Water", "Earth"] as element, i}
		<GlareCard>
			<div class="flex size-full flex-col items-center justify-center p-6 text-white">
				<span class="mb-2 text-4xl">{["🔥", "💧", "🌍"][i]}</span>
				<h3 class="text-xl font-bold">{element}</h3>
				<p class="mt-1 text-xs text-slate-400">Elemental Card</p>
			</div>
		</GlareCard>
	{/each}
</div>
```