Text & Typography Fancy Stable
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
Preview
svelte
<script lang="ts">
import { ColourfulText } from 'fancy-ui-svelte';
</script>
<ColourfulText text="Colourful" />Installation
pnpm add fancy-ui-svelte
import { ColourfulText } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { ColourfulText } from 'fancy-ui-svelte';
</script>
<ColourfulText />Examples
Basic Usage
svelte
<script lang="ts">
import { ColourfulText } from "$lib/fancy-ui/colourful-text";
</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 "$lib/fancy-ui/colourful-text";
</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 "$lib/fancy-ui/colourful-text";
</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 "$lib/fancy-ui/colourful-text";
</script>
<p class="text-center text-2xl font-semibold">
<ColourfulText text="Every character gets its own colour!" />
</p>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text * | 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 |
Links
Related components
Bl
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
Text & Typography Stable
Bo
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
Text & Typography Stable
Co
ContainerTextFlip
Text container that cycles through words with per-character blur animation
Text & Typography Stable