Skip to content
Pinky UI

text

Text Scramble

A brief decorative decode effect.

  • text

Live preview

Quick usage

usage
import { TextScramble } from "@pinky-ui/effects";

<TextScramble />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

TextScramble briefly decodes a short label or heading into its final text. It is a restrained accent for a status word, navigation detail or creative hero label.

Use it sparingly, resolve it in under about 600ms, and use a small character set. Do not use it for body copy, alerts, prices, form labels or anything that must be read while it changes; scrambling becomes noise quickly.

The accessible aria-label is always the final text while the visual child changes. Reduced motion resolves immediately, and timers are cleaned up. Never let the effect determine whether a control is available or understandable.

Open this skill on its own page