# BlurReveal

> Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number` | `1` | Animation duration in seconds |
| `delay` | `number` | `0.2` | Stagger delay between children in seconds |
| `blur` | `string` | `"20px"` | Initial blur amount (CSS value) |
| `yOffset` | `number` | `20` | Initial vertical offset in pixels |
| `mode` | `"blur" \| "hard"` | `"blur"` | Reveal style: blur softens in with blur/translate, hard snaps opacity with no easing |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content elements to reveal with staggered animation |

## Examples

### Basic Usage

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<BlurReveal>
			<h3 class="mb-4 text-2xl font-bold">Welcome to the future</h3>
			<p class="text-muted-foreground mb-3">
				This paragraph fades in after the heading, with a slight delay.
			</p>
			<p class="text-muted-foreground">And this one follows with another staggered delay.</p>
		</BlurReveal>
	{/key}
</div>
```

### Custom Duration

Control reveal speed.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<BlurReveal duration={1.5} delay={0.4}>
			<h3 class="mb-4 text-2xl font-bold">Slow reveal</h3>
			<p class="text-muted-foreground mb-3">Duration is 1.5s with 0.4s stagger between elements.</p>
			<p class="text-muted-foreground">The effect is more dramatic with longer timings.</p>
		</BlurReveal>
	{/key}
</div>
```

### Heavy Blur

Stronger initial blur.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<BlurReveal blur="40px" yOffset={40}>
			<h3 class="mb-4 text-2xl font-bold">Bold entrance</h3>
			<p class="text-muted-foreground mb-3">
				40px blur with 40px vertical offset makes the reveal much more pronounced.
			</p>
			<p class="text-muted-foreground">Great for hero sections and landing pages.</p>
		</BlurReveal>
	{/key}
</div>
```

### Staggered Cards

Multiple items with stagger.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<BlurReveal delay={0.15} class="grid grid-cols-1 gap-4 sm:grid-cols-3">
			<div class="bg-background rounded-lg border p-6">
				<h4 class="mb-2 font-semibold">Design</h4>
				<p class="text-muted-foreground text-sm">Beautiful interfaces built with care.</p>
			</div>
			<div class="bg-background rounded-lg border p-6">
				<h4 class="mb-2 font-semibold">Develop</h4>
				<p class="text-muted-foreground text-sm">Clean code that scales with your needs.</p>
			</div>
			<div class="bg-background rounded-lg border p-6">
				<h4 class="mb-2 font-semibold">Deploy</h4>
				<p class="text-muted-foreground text-sm">Ship fast with confidence and reliability.</p>
			</div>
		</BlurReveal>
	{/key}
</div>
```

### Hard Snap

mode="hard": no blur or easing, opacity snaps in stepped.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<BlurReveal mode="hard">
			<h3 class="mb-4 text-2xl font-bold">Snaps into place</h3>
			<p class="text-muted-foreground mb-3">
				No blur, no translate softening — opacity jumps in via a stepped timing function.
			</p>
			<p class="text-muted-foreground">Suited to hard-edge art directions.</p>
		</BlurReveal>
	{/key}
</div>
```