Editorial Scramble Decode text animation: the word aimotions animated in this style
106KineticCSS

Editorial Scramble Decode

A text scramble effect: every letter slot shuffles through glyphs from different typefaces, then locks into an elegant serif one by one. A clean, editorial take on the decode reveal for magazines, fashion and culture brands.

Prompt · replace [TEXT]

Tool-agnostic
Reveal [TEXT] with an editorial glyph scramble, not a hacker terminal. Lay out a warm off-white magazine page: thin black rules, small caption text, an issue number and a figure note. The word sits huge in the middle in a high-contrast italic display serif, each letter in a fixed-width slot. At first every slot shuffles rapidly through random letters, numerals and typographic symbols (ampersand, section sign, pilcrow, dagger) borrowed from different typefaces: serif italic, monospace, bold grotesque. Then each slot briefly shows the correct letter in the wrong typeface, and finally locks into the serif, left to right, with a tiny downward settle and a short oxblood underline that fades. Hold the finished word, then shuffle it apart from the right end and loop.

Visual DNA

  • Fixed letter slots shuffling serif, mono, grotesque and italic glyphs
  • Near-miss phase: the right letter in the wrong typeface before it locks
  • Locks left to right with a small settle and an oxblood marker
  • High-contrast italic serif on warm paper with magazine rules and captions
  • Reverse shuffle from the right end closes the loop
Category
Kinetic Typography
Demo built with
CSS
Energy
Lively
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Editorial Scramble Decode look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

107KineticCanvas

Shatter & Rewind

shattering text · glass break text effect · text explode and reassemble · broken glass typography

Details →
109KineticCSS

Slice & Split

sliced text animation · split text effect · text slice transition · horizontal band split

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥