How do I install the Text Scramble skill?

Run npx skillmds@latest add xpert-ai/text-scramble in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Text Scramble safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Text Scramble?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Text Scramble free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Text Scramble?

xpert-ai (@xpert-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Text Scramble by xpert-ai — Agent Skill

Name: Text Scramble
Author: xpert-ai

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.

xpert-ai 96af8d1 4 files · 7.5 KB Updated Sep 17, 2026

File contents

text-scramble

A line of text that resolves from random glyphs. Part of 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

Copy text-scramble.js into the project and link it.

Mark the element:

<span class="scramble" data-text="motion, anything"></span>

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.

Frequently asked questions