# ContainerTextFlip

> Text container that cycles through words with per-character blur animation.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `words` | `string[]` | `["better","modern","beautiful","awesome"]` | Array of words to cycle through |
| `interval` | `number` | `3000` | Time between word changes in ms |
| `animationDuration` | `number` | `700` | Per-character animation duration in ms |
| `textClass` | `string` | `""` | CSS classes for the text content span |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { ContainerTextFlip } from "fancy-ui-svelte";
</script>

<div class="flex items-center gap-4">
	<span class="text-foreground text-4xl font-bold md:text-7xl">Build</span>
	<ContainerTextFlip />
</div>
```

### Custom Words

```svelte
<script lang="ts">
	import { ContainerTextFlip } from "fancy-ui-svelte";
</script>

<div class="flex items-center gap-4">
	<span class="text-foreground text-4xl font-bold md:text-7xl">Make it</span>
	<ContainerTextFlip words={["stunning", "brilliant", "perfect", "legendary"]} />
</div>
```

### Fast Interval

Shorter flip interval.

```svelte
<script lang="ts">
	import { ContainerTextFlip } from "fancy-ui-svelte";
</script>

<ContainerTextFlip
	words={["fast", "quick", "rapid", "swift"]}
	interval={1500}
	animationDuration={400}
/>
```