Text & Typography Fancy Stable
FlipWords
Cycling word animation with per-letter fade-in and blur effects
Preview
svelte
<script lang="ts">
import { FlipWords } from 'fancy-ui-svelte';
</script>
<FlipWords words={["beautiful","animated","interactive","composable"]} />Installation
pnpm add fancy-ui-svelte
import { FlipWords } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { FlipWords } from 'fancy-ui-svelte';
</script>
<FlipWords />Examples
Basic Usage
svelte
<script lang="ts">
import { FlipWords } from "$lib/fancy-ui/flip-words";
</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 "$lib/fancy-ui/flip-words";
</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 "$lib/fancy-ui/flip-words";
</script>
<h2 class="text-foreground text-2xl font-bold">
<FlipWords words={["open source", "developer friendly", "production ready", "fully typed"]} />
</h2>Props
| Prop | Type | Default | Description |
|---|---|---|---|
words * | string[] | - | Array of words to cycle through |
duration | number | 3000 | Time each word stays visible in ms |
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
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
Text & Typography Stable