Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers.
Extracted from Infisical's React component in module 49899 of pages/index-4fc63f88002b15b5.js (HAR: https://infisical.com/_next/static/chunks/pages/index-4fc63f88002b15b5.js). The component is registered as s.A on the index page and applied to section-break labels (font-v2-mono uppercase), button text (cipher:true, cipherOnMount:true), and product-tab headings.
The character pool is exactly 76 chars: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*?/<>+=-. The timing parameters (all extracted verbatim) are: stagger = 70 ms, revealPerChar = 220 ms (the initial hold before char 0 resolves), glyphInterval = 80 ms (how often each pending glyph swaps), and maxDuration = 1500 ms (a cap that compresses stagger for long strings via r = (1500 - 220 - 200) / len). An IntersectionObserver with threshold: 0.4 triggers the animation once the element enters the viewport.
The reveal algorithm runs in a single requestAnimationFrame loop. On every frame it rebuilds the element's text content character-by-character: if elapsed time s >= index × r + 220 the real character is shown; otherwise the stored glyph is emitted and, if s - lastSwap >= 80, a new random glyph is sampled and the swap timestamp is updated. Spaces bypass the scramble entirely. When s exceeds the total duration, textContent is snapped to the final real string.
This rebuild is all DOM text (manipulating textContent of <div> and <span> elements) in a monospace font so glyph-width churn does not shift surrounding layout. The demo orchestrates an eyebrow → headline → secondary → eight grid-label cascade with 120 ms inter-label stagger, looping through three content sets drawn from real Infisical copy.
This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/sneakers-text.md. Full writeup and live preview: https://fx.statico.io/demos/sneakers-text.
Effect originally seen on Infisical (https://infisical.com/) — credit to Infisical. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.
Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.