# Text Scramble

> Resolve one short headline from random glyphs — a techy decode reveal. One short line only; keep it fast. The resolved text is the real, accessible content; under prefers-reduced-motion it appears instantly with no scramble. Avoid on body copy and calm/luxury tones.

- Skill: `xpert-ai/text-scramble` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/text-scramble`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/text-scramble/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/text-scramble

---


# text-scramble

A line of text that resolves from random glyphs. Part of
[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`. Technique
popularized by Codrops, reimplemented dependency-free.

## When to use it
- A hero word / short headline with a technical or futuristic tone; cycling a few phrases on one line.

## When NOT to use it (restraint)
- Long text or body copy — unreadable while scrambling. **One short line.**
- Calm / editorial / luxury tones (feels gimmicky).

## How to apply
1. Copy `text-scramble.js` into the project and link it.
2. Mark the element:
   ```html
   <span class="scramble" data-text="motion, anything"></span>
   ```
3. Auto-plays `data-text` on load. To change the phrase later: `scrambleTo(el, "next phrase")`.

## Accessibility & performance
- Under `prefers-reduced-motion` the final text appears instantly (no scramble). The resolved
  `data-text` is always the real content.
- Swaps text content on rAF; keep the line short so it stays cheap.

## Framework notes
- React: keep a ref and call `scrambleTo(ref.current, text)` on mount / when the phrase changes.