# TextRevealCard

> Card that reveals text on horizontal mouse drag with animated star particles.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `starsCount` | `number` | `130` | Number of star particles in the background |
| `starsClass` | `string` | `""` | CSS classes for the stars container |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content rendered above the reveal area (e.g., title) |
| `text` | Text shown in the revealed layer (dragged to reveal) |
| `revealText` | Text visible in the background star layer |

## Examples

### Basic Usage

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

<TextRevealCard>
	<p class="mb-4 text-lg font-bold text-white">Move your mouse to reveal</p>
	{#snippet text()}
		<p
			class="bg-gradient-to-b from-white to-neutral-300 bg-clip-text py-6 text-[2rem] font-bold text-transparent md:text-[3rem]"
		>
			I know the secret
		</p>
	{/snippet}
	{#snippet revealText()}
		<p class="py-6 text-[2rem] font-bold text-white/10 md:text-[3rem]">Hover me to see</p>
	{/snippet}
</TextRevealCard>
```

### Fewer Stars

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

<TextRevealCard starsCount={40}>
	<p class="mb-4 text-sm text-neutral-400">Fewer stars, same effect</p>
	{#snippet text()}
		<p
			class="bg-gradient-to-b from-white to-neutral-300 bg-clip-text py-6 text-[2rem] font-bold text-transparent md:text-[3rem]"
		>
			Less is more
		</p>
	{/snippet}
	{#snippet revealText()}
		<p class="py-6 text-[2rem] font-bold text-white/10 md:text-[3rem]">Minimalist</p>
	{/snippet}
</TextRevealCard>
```