Interaction

Enter the ASCII canvas to run the flow. Pointer movement creates local disturbances. Leaving freezes the phase and clears pointer energy; keyboard focus also plays. Detail previews flow automatically. Pause freezes accumulated phase; Play resumes the same phase, without a reverse return.

States

[data-part="ascii"] / asciiPhase: 0 → 6.283185307; [data-part="root"] / x: 0 → 0; [data-part="root"] / y: 0 → 0; [data-part="root"] / scale: 1 → 1.

Timing

Total duration 4000 ms; trigger delay 0 ms; cubic-bezier(0, 0, 1, 1). Each track follows its configured start / span and times.

Enter and exit

Run the flow field while inside; leaving freezes the current phase and clears disturbances. Flow continuously while inside.

Repeated input and interruption

Re-entering or replaying starts at the configured phase. Editing the flow while inside preserves the current phase. Accumulated phase makes loop wrapping continuous. Actions do not queue.

Reduced motion

Follow prefers-reduced-motion: skip delay, loops and animation and show the target state immediately. Preview speed is observation state and is never saved in the configuration.

ASCII settings

Characters "cyslap"; glyph opacity multiplier 77%; font size 6.8 px; density 110%; speed 2.8×; field rotation 65°; twist 2; wave compactness 0.4; color #212121; pointer strength 1×; radius 100 px.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "ascii-wave",
  "durationMs": 4000,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "ascii",
      "property": "asciiPhase",
      "values": [
        0,
        6.283185307
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "ascii": {
    "characters": "cyslap",
    "opacity": 0.77,
    "fontSize": 6.8,
    "density": 1.1,
    "speed": 2.8,
    "direction": 65,
    "twist": 2,
    "tension": 0.4,
    "color": "#212121",
    "pointerStrength": 1,
    "pointerRadius": 100
  }
}

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: Ariadne. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.