∞ forever components

Text Effects

Scramble Decode

Gold monospace text resolves from random glyphs left-to-right with a tracking caret, holds with micro-flickers, then re-scrambles through a 6-phrase loop.

canvasmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Hacker/terminal aesthetic hero sections, loading screens, or reveal animations where text identity emerges from noise.

When not to

Contexts requiring immediate legibility — text is unreadable during scramble. Avoid when motion-sensitive audiences are primary users.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change PHRASES to ['LAUNCH','IGNITE','DEPLOY'], set ACC to '#00ffaa', and slow decode to DEC=1.2 for a more dramatic reveal. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • PHRASES array (word list)
  • ACC color (#f5d76e gold)
  • DEC/HOLD/OUT timing constants
  • GLYPHS charset string
  • glyphSize ratio (0.22 height / 0.78 width)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion staticFrame() guard
  • visibilitychange pause/resume
  • DPR-aware canvas sizing
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Phrase cycling is fully automatic — no click-to-advance
  • BG color hardcoded in both JS constant and CSS; must change both
  • Cell width factor (0.62) may mis-align without a true monospace system font

typographyscrambledecodemonospaceglitchcanvasloop

More Text Effects components

  • Stagger RiseGold serif letters rise through a clipped baseline one by one, hold as a word, then exit upward in a staggered loop.
  • Gradient WipeBold headline in dim steel; a bright gold sheen band sweeps across via background-clip:text with a soft bloom glow pulsing beneath at center crossing.
  • Weight WaveA bell-curve wave of font-weight travels left-to-right across the word WEIGHT; crest letters bulge bold, lift slightly, and warm to gold glow.
  • Block RevealGold block sweeps left-to-right over stacked uppercase words, pauses, then retracts right to reveal the text. Loops with a faint underline rule.
  • Glitch SplitBold word renders with red/cyan RGB channel-split; periodic bursts trigger horizontal slice displacement and scanline glints over a dark background.