# LetterPullup

> Staggered letter pull-up animation with wave entrance effect.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `words` (required) | `string` | — | Text to animate (each character gets its own animation) |
| `delay` | `number` | `0.05` | Delay between each letter animation in seconds |

## Examples

### Basic Usage

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<LetterPullup words="Letter Pullup" />
	{/key}
</div>
```

### Slower Stagger

Increase delay between letters.

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

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

<div class="relative">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<LetterPullup words="Slow Wave" delay={0.1} />
	{/key}
</div>
```

### Custom Styling

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

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

<div class="relative rounded-xl bg-slate-950 p-12">
	<ReplayButton onclick={() => replayKey++} />
	{#key replayKey}
		<LetterPullup words="Styled Text" class="text-5xl text-purple-400" />
	{/key}
</div>
```