# BoxReveal

> Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, animation, reveal, scroll, entrance
- Docs: https://fancy-ui.rama.app/docs/components/box-reveal
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/box-reveal

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#5046e6"` | Color of the reveal box |
| `duration` | `number` | `0.5` | Animation duration in seconds |
| `delay` | `number` | `0.25` | Delay before animation starts in seconds |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content to reveal |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { BoxReveal } from "fancy-ui-svelte";
	import ReplayButton from "$lib/components/ReplayButton.svelte";

	let replayKey = $state(0);
</script>

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<div class="max-w-md space-y-4 p-4">
			<BoxReveal>
				<h2 class="text-4xl font-bold">Box Reveal</h2>
			</BoxReveal>
			<BoxReveal delay={0.4}>
				<p class="text-muted-foreground text-lg">
					UI library for crafting beautiful landing pages.
				</p>
			</BoxReveal>
			<BoxReveal delay={0.6}>
				<div class="flex gap-2">
					<button class="bg-primary text-primary-foreground rounded-lg px-4 py-2 text-sm"
						>Get Started</button
					>
					<button class="rounded-lg border px-4 py-2 text-sm">Learn More</button>
				</div>
			</BoxReveal>
		</div>
	{/key}
</div>
```

### Custom Colors

Change the reveal box color.

```svelte
<script lang="ts">
	import { BoxReveal } from "fancy-ui-svelte";
	import ReplayButton from "$lib/components/ReplayButton.svelte";

	let replayKey = $state(0);
</script>

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<div class="max-w-md space-y-4 p-4">
			<BoxReveal color="#ff6600">
				<h2 class="text-3xl font-bold">Orange Reveal</h2>
			</BoxReveal>
			<BoxReveal color="#22c55e" delay={0.4}>
				<p class="text-lg">Green reveal with a longer delay.</p>
			</BoxReveal>
			<BoxReveal color="#8b5cf6" delay={0.6}>
				<p class="text-lg">Purple reveal stacked below.</p>
			</BoxReveal>
		</div>
	{/key}
</div>
```

### Slow Animation

Longer reveal duration.

```svelte
<script lang="ts">
	import { BoxReveal } from "fancy-ui-svelte";
	import ReplayButton from "$lib/components/ReplayButton.svelte";

	let replayKey = $state(0);
</script>

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<div class="max-w-md p-4">
			<BoxReveal duration={1} delay={0.3}>
				<h2 class="text-3xl font-bold">Slow and dramatic</h2>
			</BoxReveal>
		</div>
	{/key}
</div>
```