Text & Typography Fancy Stable
ContainerTextFlip
Text container that cycles through words with per-character blur animation
Preview
svelte
<script lang="ts">
import { ContainerTextFlip } from 'fancy-ui-svelte';
</script>
<ContainerTextFlip words={["better","faster","stronger","beautiful"]} />Installation
pnpm add fancy-ui-svelte
import { ContainerTextFlip } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { ContainerTextFlip } from 'fancy-ui-svelte';
</script>
<ContainerTextFlip />Examples
Basic Usage
svelte
<script lang="ts">
import { ContainerTextFlip } from "$lib/fancy-ui/container-text-flip";
</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 "$lib/fancy-ui/container-text-flip";
</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 "$lib/fancy-ui/container-text-flip";
</script>
<ContainerTextFlip
words={["fast", "quick", "rapid", "swift"]}
interval={1500}
animationDuration={400}
/>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 |
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