# ColourfulText

> Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` | — | Text to animate |
| `colors` | `string[]` | `[10 preset colors]` | Array of colors to cycle through |
| `startColor` | `string` | `"rgb(255, 255, 255)"` | Initial color before animation |
| `duration` | `number` | `0.5` | Transition duration in seconds for each character |

## Examples

### Basic Usage

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

<h2 class="text-foreground text-4xl font-bold">
	Make things <ColourfulText text="colourful" />
</h2>
```

### Custom Colors

Define a custom color palette.

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

<h2 class="text-foreground text-4xl font-bold">
	<ColourfulText
		text="Ocean Vibes"
		colors={["#0ea5e9", "#06b6d4", "#14b8a6", "#3b82f6", "#6366f1"]}
	/>
</h2>
```

### Transition Speed

Control color change speed.

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

<div class="space-y-6">
	<div class="text-center">
		<p class="text-muted-foreground mb-2 text-xs">Fast (0.2s)</p>
		<h2 class="text-3xl font-bold">
			<ColourfulText text="Lightning" duration={0.2} />
		</h2>
	</div>
	<div class="text-center">
		<p class="text-muted-foreground mb-2 text-xs">Slow (1.5s)</p>
		<h2 class="text-3xl font-bold">
			<ColourfulText text="Smooth Flow" duration={1.5} />
		</h2>
	</div>
</div>
```

### Longer Text

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

<p class="text-center text-2xl font-semibold">
	<ColourfulText text="Every character gets its own colour!" />
</p>
```