Interaction

Hover the catalog preview to scan; detail previews start automatically. Hover or focus a decoded word to clear nearby noise and hold the clock. Click blank canvas or Shuffle to restart with another deterministic arrangement. The detail toolbar pauses and resumes the same forward cycle without a reverse return.

States

[data-part="wall"] / glyphPhase: 0 → 1; [data-part="root"] / x: 0 → 0; [data-part="root"] / y: 0 → 0; [data-part="root"] / scale: 1 → 1.

Timing

Scan 2600 ms; hold 5000 ms; dissolve 650 ms; rest 800 ms. Full cycle 9050 ms. Initial delay 0 ms.

Enter and exit

Scan the glyph grid and decode words as the band reaches them. Hold the readable words, dissolve and rest. Focus clears nearby noise and dims other words while holding the clock. Repeat the full cycle; shuffle follows the saved setting.

Repeated input and interruption

Pause preserves scan phase, noise and decode progress; Play resumes the same clock. Hover or keyboard focus holds the clock until leaving or blurring. Clicking blank canvas restarts a new layout; parameter edits restart from the new settings. Actions do not queue. Seed, focus and observation speed are transient and excluded from JSON.

Reduced motion

Show all words immediately; no scan, scramble, delay or loop.

Text wall settings

Words "HELLO|TUNESHAPE|EXPLORE|CREATE|IDEA|OROCOA"; layout scatter; direction down; charset letters; font 14 px; density 0.7; base noise opacity 0.1; scramble 12 Hz; decode span 0.5; scan band half-width ratio 0.09; shuffle true; word color #171717; noise color #777777.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "glyph-wall",
  "durationMs": 2600,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "wall",
      "property": "glyphPhase",
      "values": [
        0,
        1
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "wall": {
    "words": "HELLO|TUNESHAPE|EXPLORE|CREATE|IDEA|OROCOA",
    "layout": "scatter",
    "direction": "down",
    "charset": "letters",
    "fontSize": 14,
    "density": 0.7,
    "wallOpacity": 0.1,
    "scrambleHz": 12,
    "holdMs": 5000,
    "restMs": 800,
    "stagger": 0.5,
    "bandWidth": 0.09,
    "shuffle": true,
    "color": "#171717",
    "noiseColor": "#777777"
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.