Text & Typography Fancy Stable
TerminalText
Terminal-style text streamer with per-character animation, blinking cursor, and glitch effect
Preview
svelte
<script lang="ts">
import { TerminalText } from 'fancy-ui-svelte';
</script>
<TerminalText lines={["$ npm install fancy-ui","Installing...","Done!"]} />Installation
pnpm add fancy-ui-svelte
import { TerminalText } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { TerminalText } from 'fancy-ui-svelte';
</script>
<TerminalText />Examples
Basic Usage
svelte
<script lang="ts">
import { TerminalText } from "$lib/fancy-ui/terminal-text";
</script>
<div class="rounded-lg border bg-black p-5 text-green-400">
<TerminalText
lines={[
"[INFO] boot sequence complete",
"[WARN] memory fragmentation at sector 0x4A2F",
"[INFO] kernel patch applied successfully",
"[OK] all systems nominal",
]}
speed={25}
/>
</div>No Cursor
svelte
<script lang="ts">
import { TerminalText } from "$lib/fancy-ui/terminal-text";
</script>
<div class="rounded-lg border bg-black p-5 text-cyan-400">
<TerminalText
lines={["> ping 8.8.8.8 — 3ms", "> traceroute complete", "> done."]}
speed={15}
cursor={false}
/>
</div>With Glitch
Enable glitch effect.
svelte
<script lang="ts">
import { TerminalText } from "$lib/fancy-ui/terminal-text";
</script>
<div class="rounded-lg border bg-black p-5 text-green-400">
<TerminalText
lines={[
"> scanning network topology...",
"> found 1,337 vulnerable endpoints",
"> deploying countermeasures...",
"> done. the matrix has you.",
]}
speed={50}
glitch={true}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines * | string[] | - | Array of lines to stream character by character |
speed | number | 40 | Delay between each character in ms |
delay | number | 0 | Initial delay before streaming starts in ms |
cursor | boolean | true | Show blinking cursor |
cursorChar | string | "█" | Character used as the cursor |
glitch | boolean | false | Enable random character glitch effect after streaming |
onComplete | () => void | - | Callback fired when all lines finish streaming |
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