# FlipWords

> Cycling word animation with per-letter fade-in and blur effects.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `words` (required) | `string[]` | — | Array of words to cycle through |
| `duration` | `number` | `3000` | Time each word stays visible in ms |

## Examples

### Basic Usage

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

<h2 class="text-foreground text-4xl font-bold">
	Build
	<FlipWords words={["better", "faster", "stronger", "bolder"]} />
	products
</h2>
```

### Fast Cycling

Shorter interval between words.

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

<h2 class="text-foreground text-3xl font-bold">
	<FlipWords words={["React", "Svelte", "Vue", "Angular"]} duration={1500} />
</h2>
```

### Multi-Word Phrases

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

<h2 class="text-foreground text-2xl font-bold">
	<FlipWords words={["open source", "developer friendly", "production ready", "fully typed"]} />
</h2>
```