Text & Typography Fancy Stable
LetterPullup
Staggered letter pull-up animation with wave entrance effect
Preview
svelte
<script lang="ts">
import { LetterPullup } from 'fancy-ui-svelte';
</script>
<LetterPullup words="Letter Pullup" />Installation
pnpm add fancy-ui-svelte
import { LetterPullup } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { LetterPullup } from 'fancy-ui-svelte';
</script>
<LetterPullup />Examples
Basic Usage
svelte
<script lang="ts">
import { LetterPullup } from "$lib/fancy-ui/letter-pullup";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<LetterPullup words="Letter Pullup" />
{/key}
</div>Slower Stagger
Increase delay between letters.
svelte
<script lang="ts">
import { LetterPullup } from "$lib/fancy-ui/letter-pullup";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<LetterPullup words="Slow Wave" delay={0.1} />
{/key}
</div>Custom Styling
svelte
<script lang="ts">
import { LetterPullup } from "$lib/fancy-ui/letter-pullup";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative rounded-xl bg-slate-950 p-12">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<LetterPullup words="Styled Text" class="text-5xl text-purple-400" />
{/key}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
words * | string | - | Text to animate (each character gets its own animation) |
delay | number | 0.05 | Delay between each letter animation in seconds |
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