# Animated Text

## Example

```svelte
<script lang="ts">
	import { AnimatedText, Box, Button } from '@foxui/all';

	const fonts = ['caveat', 'italianno', 'tangerine', 'parisienne'] as const;
	const texts = ['Hello world', 'Fancy handwriting', 'Sweet & Tangy', 'Elegant script'];

	let index = $state(0);
	let runId = $state(0);

	const font = $derived(fonts[index]);
	const text = $derived(texts[index]);

	function next() {
		index = (index + 1) % fonts.length;
		runId++;
	}
</script>

<Box class="not-prose flex flex-col items-center gap-8 py-8">
	<div class="flex h-24 w-full items-center justify-center">
		{#key runId}
			<AnimatedText {text} {font} loop={false} speed={3} style="font-size: 64px" />
		{/key}
	</div>

	<Button onclick={next}>Next font ({font})</Button>
</Box>
```

## Documentation

## Usage

Animated handwriting text powered by [tegaki](https://github.com/KurtGokhan/tegaki). Text draws itself stroke by stroke.

```svelte
<AnimatedText text="Hello world" font="caveat" style="font-size: 64px" />
```

### Built-in fonts

Four handwriting fonts are bundled: `caveat`, `italianno`, `tangerine`, `parisienne`.

```svelte
<AnimatedText text="Elegant script" font="parisienne" speed={1.5} />
```

### Controlled progress

Drive the animation yourself by binding progress (0 → 1):

```svelte
<AnimatedText text="Scrub me" mode="controlled" progress={0.5} />
```

## API Reference

### AnimatedText
Animated handwriting text. Any font draws itself stroke by stroke, powered by tegaki.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| text | `string` | `-` | The text to animate. |
| font | `'caveat' | 'italianno' | 'tangerine' | 'parisienne'` | `'caveat'` | Built-in handwriting font to use. You can also pass a custom tegaki font bundle. |
| speed | `number` | `1` | Animation speed multiplier (uncontrolled mode). |
| loop | `boolean` | `true` | Whether to loop the animation (uncontrolled mode). |
| mode | `'uncontrolled' | 'controlled'` | `'uncontrolled'` | Use 'controlled' to drive the animation progress yourself via the progress prop. |
| progress | `number` | `0` | Progress from 0 to 1. Only used when mode is "controlled". |