Text & Typography Fancy Stable
TextGenerateEffect
Typewriter-style text reveal that fades in words one by one with optional blur
Preview
svelte
<script lang="ts">
import { TextGenerateEffect } from 'fancy-ui-svelte';
</script>
<TextGenerateEffect words="The quick brown fox jumps over the lazy dog" />Installation
pnpm add fancy-ui-svelte
import { TextGenerateEffect } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { TextGenerateEffect } from 'fancy-ui-svelte';
</script>
<TextGenerateEffect />Examples
Basic Usage
svelte
<script lang="ts">
import { TextGenerateEffect } from "$lib/fancy-ui/text-generate-effect";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<TextGenerateEffect
words="Svelte is a radical new approach to building user interfaces. It shifts work from the browser to a compile step that happens when you build your app."
/>
{/key}
</div>Without Blur
Disable the blur effect.
svelte
<script lang="ts">
import { TextGenerateEffect } from "$lib/fancy-ui/text-generate-effect";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<TextGenerateEffect
words="This text fades in without the blur effect, using a simple opacity transition."
filter={false}
/>
{/key}
</div>Fast Reveal
Quick word appearance.
svelte
<script lang="ts">
import { TextGenerateEffect } from "$lib/fancy-ui/text-generate-effect";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<TextGenerateEffect
words="Quick reveal with a short duration and tight stagger between words."
duration={0.3}
stagger={80}
/>
{/key}
</div>Slow Dramatic
Slow, dramatic reveal.
svelte
<script lang="ts">
import { TextGenerateEffect } from "$lib/fancy-ui/text-generate-effect";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<TextGenerateEffect
words="Each word appears slowly with a long pause between them for dramatic effect."
duration={1.5}
stagger={500}
class="text-2xl font-semibold"
/>
{/key}
</div>Delayed Start
Add initial delay.
svelte
<script lang="ts">
import { TextGenerateEffect } from "$lib/fancy-ui/text-generate-effect";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<TextGenerateEffect
words="This text waits one second before starting to reveal."
delay={1000}
/>
{/key}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
words * | string | - | Text to reveal word by word |
filter | boolean | true | Apply blur filter during reveal animation |
duration | number | 0.7 | Fade-in duration per word in seconds |
delay | number | 0 | Initial delay before animation starts in ms |
stagger | number | 200 | Delay between each word 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