Interaction

Play once on detail entry; click, Enter, Space or Play to replay. Catalog hover demonstrates; leaving retains readable text.

States

Reveal Unicode code points at a fixed rate; a deterministic block cursor blinks every 500ms.

Enter and exit

Complete the full entrance and retain readable text; replay restarts the entrance.

Content and parameters

Saved settings: {"kind":"typewriter-text","text":"Hello, World!","fontSize":72,"fontWeight":600,"color":"#171717","charsPerSecond":22,"cursor":true,"cursorColor":"#171717"}. Typography uses a 1280×720 reference canvas with proportional preview scaling.

Timing

Duration basis 4000 ms; delay 0 ms. Type at 22 code points/second; finish all characters even when longer than the duration basis.

Repeated input and interruption

Replay restarts the text entrance. Pause, inactive previews and background pages freeze the clock. Observation speed and progress are transient. Text and parameter edits drive previews, descriptions, Motion, JSON and exports.

Reduced motion

Show the complete, readable text immediately. Skip entrance animation and cursor blinking while retaining content and reading layout.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "typewriter-text",
  "durationMs": 4000,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "typography": {
    "kind": "typewriter-text",
    "text": "Hello, World!",
    "fontSize": 72,
    "fontWeight": 600,
    "color": "#171717",
    "charsPerSecond": 22,
    "cursor": true,
    "cursorColor": "#171717"
  }
}

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.