Interaction

Detail previews reveal once; click text or Play to replay. Catalog hover demonstrates and leaving restores readable text. Enter/Space replays the focused text.

States

Text "Lorem ipsum"; charset "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?", noise #999999 → text #171717, font 16px. Whitespace and Unicode code points are preserved; noise never changes glyph-cell widths.

Timing

Reveal 550 ms total, 50 ms per code point, noise updates 50 ms, delay 0 ms. Retain original text on completion. This visual effect provides no data encryption.

Enter and exit

Unrevealed characters change until their turn to settle. Completion retains the source; replay restarts the reveal.

Repeated input and interruption

Pause, inactive previews and hidden pages freeze clocks; resume continues. Content and parameters drive preview, descriptions, Motion, JSON and exports. Focus, typed input, live selection, progress and observation speed remain transient.

Reduced motion

Reduced motion presents readable text or target states immediately, retains native input/menu/keyboard behavior and disables automatic repetition.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "encrypted-text",
  "durationMs": 550,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "encryptedText": {
    "text": "Lorem ipsum",
    "charset": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?",
    "flipDelayMs": 50,
    "fontSize": 16,
    "revealedColor": "#171717",
    "encryptedColor": "#999999"
  }
}

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.