Text & Typography Fancy Stable
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
Preview
svelte
<script lang="ts">
import { BoxReveal } from 'fancy-ui-svelte';
</script>
<BoxReveal />Installation
pnpm add fancy-ui-svelte
import { BoxReveal } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { BoxReveal } from 'fancy-ui-svelte';
</script>
<BoxReveal />Examples
Basic Usage
svelte
<script lang="ts">
import { BoxReveal } from "$lib/fancy-ui/box-reveal";
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 "$lib/fancy-ui/box-reveal";
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 "$lib/fancy-ui/box-reveal";
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>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 |
Slots
| Slot | Description |
|---|---|
children | Content to reveal |
Links
Related components
Bl
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
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