# TextGenerateEffect

> Typewriter-style text reveal that fades in words one by one with optional blur.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `words` (required) | `string` | — | Text to reveal word by word |
| `filter` | `boolean` | `true` | Apply blur filter during reveal animation |
| `duration` | `number` | `0.7` | Fade-in duration per word in seconds |
| `delay` | `number` | `0` | Initial delay before animation starts in ms |
| `stagger` | `number` | `200` | Delay between each word in ms |

## Examples

### Basic Usage

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<TextGenerateEffect
			words="Svelte is a radical new approach to building user interfaces. It shifts work from the browser to a compile step that happens when you build your app."
		/>
	{/key}
</div>
```

### Without Blur

Disable the blur effect.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<TextGenerateEffect
			words="This text fades in without the blur effect, using a simple opacity transition."
			filter={false}
		/>
	{/key}
</div>
```

### Fast Reveal

Quick word appearance.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<TextGenerateEffect
			words="Quick reveal with a short duration and tight stagger between words."
			duration={0.3}
			stagger={80}
		/>
	{/key}
</div>
```

### Slow Dramatic

Slow, dramatic reveal.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<TextGenerateEffect
			words="Each word appears slowly with a long pause between them for dramatic effect."
			duration={1.5}
			stagger={500}
			class="text-2xl font-semibold"
		/>
	{/key}
</div>
```

### Delayed Start

Add initial delay.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<TextGenerateEffect
			words="This text waits one second before starting to reveal."
			delay={1000}
		/>
	{/key}
</div>
```