# LineReveal

> Staggered line-by-line text reveal with lines computed by pretext instead of DOM splitting.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `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 |

## Examples

### Basic Usage

Resize the container — lines re-wrap without replaying the animation.

```svelte
<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>
```

### Custom Stagger & Duration

Slow down the per-line stagger and transition.

```svelte
<script lang="ts">
	import { LineReveal } from "fancy-ui-svelte";
	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>
```