# TerminalText

> Terminal-style text streamer with per-character animation, blinking cursor, and glitch effect.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, terminal, animation, typewriter, glitch, code
- Docs: https://fancy-ui.rama.app/docs/components/terminal-text
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/terminal-text

## Import

```svelte
<script lang="ts">
  import { TerminalText } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { TerminalText } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lines` (required) | `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 |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { TerminalText } from "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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>
```