--- title: "Sneakers Text Decode — standalone source" description: "Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers." canonical: "https://fx.statico.io/effects/sneakers-text.html" doc_version: "0.1.0" last_updated: "2026-07-27" date_modified: "2026-07-27T19:06:35-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Sneakers Text Decode — standalone source Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers. This is the raw, runnable artifact. The writeup, live preview and credit live on the demo page: (Markdown: ). ## Code ```html Sneakers Text Decode

Sneakers Text Decode

Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers.

How it works

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.

How to use this file

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.

Source and credit

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.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

``` ## Source & credit Effect seen on — credit to Infisical. Independent recreation, built from scratch for educational use. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups