Skip to content

Decode Scramble

Headline that resolves out of random glyphs, one character at a time, when it enters the screen and again on hover.

  • character scramble
  • staggered resolve
  • replay on hover
  • in-view trigger
decode-scramble.prompt.md
# Build: "Decode Scramble" text effect

You are a senior creative front-end engineer. Build this reusable text effect exactly as specified.

## Target stack
React + Tailwind CSS v4 + Framer Motion

## Concept
A headline that looks like it is being decoded. Every character cycles through random glyphs and then locks into the real letter. Characters lock at different moments, so the line resolves unevenly from roughly left to right. It plays when the headline scrolls into view and again whenever the pointer enters it.

## Content
- Text: "Motion is the new typography"
- Glyph set: symbols (`!<>-_\/[]{}—=+*^?#%&@$`)

## Design tokens
- Background: #06110D (demo stage, centered, min-height 380px)
- Resolved text: #E8FFF4
- Scrambling glyphs: #2BFF88 with a `0 0 12px` glow in the same color
- Font: a monospace font, semibold, line-height 1.1, size `min(56px, 11cqw)`, centered, max-width ~56rem

## Algorithm
1. For each character i, choose `start = rand(0, 24/2) + floor(i/3)` and `end = start + rand(0, 24) + 4`, measured in frames.
2. Run a timer every 34ms and increase `frame` each tick:
   - Spaces, and any character where `frame ≥ end`, show the real character in the resolved color.
   - Before `start`, show a non-breaking space.
   - Otherwise, show a random glyph in the scramble color.
3. Stop the timer once every character is resolved. Restarting cancels any run in progress.
4. Trigger the run when 60% of the element is in view, and on pointer enter.

## Accessibility
- The heading carries the real text in `aria-label`. The per-character spans are `aria-hidden`.
- Under `prefers-reduced-motion`, render the final text immediately and never scramble.
- Clear the timer on unmount.
0