LineReveal
Staggered line-by-line text reveal with lines computed by pretext instead of DOM splitting
Preview
<script lang="ts">
import { LineReveal } from "fancy-ui-svelte";
</script>
<div class="resize-x overflow-auto rounded border border-dashed p-4" style="max-width: 100%">
<LineReveal
text="Text measurement and layout, without touching the DOM. Every line you see here was computed by pretext and revealed one by one."
font="700 32px Helvetica, Arial, sans-serif"
/>
<p class="text-muted-foreground mt-3 text-xs">
Drag the resize handle — lines re-wrap instantly without replaying the animation.
</p>
</div>Installation
Usage
<script lang="ts">
import { LineReveal } from 'fancy-ui-svelte';
</script>
<LineReveal />Examples
Basic Usage
Resize the container — lines re-wrap without replaying the animation.
<script lang="ts">
import { LineReveal } from "$lib/fancy-ui/line-reveal";
</script>
<div class="resize-x overflow-auto rounded border border-dashed p-4" style="max-width: 100%">
<LineReveal
text="Text measurement and layout, without touching the DOM. Every line you see here was computed by pretext and revealed one by one."
font="700 32px Helvetica, Arial, sans-serif"
/>
<p class="text-muted-foreground mt-3 text-xs">
Drag the resize handle — lines re-wrap instantly without replaying the animation.
</p>
</div>Custom Stagger & Duration
Slow down the per-line stagger and transition.
<script lang="ts">
import { LineReveal } from "$lib/fancy-ui/line-reveal";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative w-full">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<LineReveal
text="A slower, more dramatic reveal: each line waits a quarter second for the previous one."
font="400 26px Georgia, serif"
stagger={0.25}
duration={1.2}
/>
{/key}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text * | string | - | Text to reveal |
font | string | '600 32px "Helvetica Neue", Helvetica, Arial, sans-serif' | CSS font shorthand used for both measurement and rendering |
lineHeight | number | 1.2 × font size | Line height in pixels |
stagger | number | 0.08 | Delay between lines in seconds |
duration | number | 0.7 | Animation duration per line in seconds |
delay | number | 0 | Initial delay in seconds |
once | boolean | true | Animate only on first viewport entry |
class | string | - | Additional CSS classes |
Links
Related components
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
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
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