Text & Typography Fancy Stable
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
Preview
svelte
<script lang="ts">
import { BlurReveal } from 'fancy-ui-svelte';
</script>
<BlurReveal />Installation
pnpm add fancy-ui-svelte
import { BlurReveal } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { BlurReveal } from 'fancy-ui-svelte';
</script>
<BlurReveal />Examples
Basic Usage
svelte
<script lang="ts">
import { BlurReveal } from "$lib/fancy-ui/blur-reveal";
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 "$lib/fancy-ui/blur-reveal";
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 "$lib/fancy-ui/blur-reveal";
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 "$lib/fancy-ui/blur-reveal";
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 "$lib/fancy-ui/blur-reveal";
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>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 |
Slots
| Slot | Description |
|---|---|
children | Content elements to reveal with staggered animation |
Links
Related components
Bo
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
Text & Typography Stable
Co
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions
Text & Typography Stable
Co
ContainerTextFlip
Text container that cycles through words with per-character blur animation
Text & Typography Stable