# HyperText

> Text that scrambles into random uppercase letters and resolves character-by-character back to the original on hover, with a staggered per-letter reveal and an optional animate-on-load mode.

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

## Import

```svelte
<script lang="ts">
  import { HyperText } 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 { HyperText } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` | — | Text to display and scramble |
| `duration` | `number` | `800` | Total animation duration in ms |
| `animateOnLoad` | `boolean` | `false` | Whether to animate on initial load |

## Examples

### Basic Usage

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

<HyperText text="Hover me!" class="text-foreground text-4xl font-bold" />
```

### Animate on Load

Trigger animation on mount.

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

<HyperText text="Auto Start" animateOnLoad class="text-foreground text-4xl font-bold" />
```

### Slow Animation

Longer animation duration.

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

<HyperText text="Take your time" duration={2000} class="text-foreground text-3xl font-bold" />
```