# Decode Text

> Text that resolves from scrambled glyphs, left to right.

A headline or status that arrives like a signal locking on. The real text sets the size from the first frame, so nothing around it moves.

- Family: Typography
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/decode-text/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add decode-text
```

It installs to `components/galactrex/decode-text.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { DecodeText } from "@/components/galactrex/decode-text";

<DecodeText as="h1" text="Signal acquired" trigger="mount" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | — | The final text. |
| `as` | `ElementType` | `"span"` | Element to render, e.g. "h1". |
| `trigger` | `"mount" \| "inView" \| "hover"` | `"inView"` | When it decodes. |
| `duration` | `number` | `900` | Ms to resolve the whole text. |
| `delay` | `number` | `0` | Ms before it starts. |
| `glyphs` | `string` | — | Characters used while scrambling. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Headline.** `as="h1"` with `trigger="mount"`.
- **Hover label.** Re-decodes each time a mouse enters.

## Accessibility

- Screen readers get the real text immediately; the scramble is aria-hidden.
- No layout shift: the real text reserves the space.

## Motion

- Frames are written to the DOM directly, about 25 per second, without React re-renders.
- Reduced motion: the text is shown as is.