Interaction

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

States

Trace actual glyph contours, then wipe the fill upward within the glyph.

Enter and exit

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

Content and parameters

Saved settings: {"kind":"outline-trace","text":"Outline","fontSize":150,"fontWeight":800,"color":"#171717","strokeColor":"#171717","strokeWidth":2.5,"stagger":3,"fill":true,"keepStroke":false}. Typography uses a 1280×720 reference canvas with proportional preview scaling.

Timing

Duration basis 1467 ms; delay 0 ms. Scale the full timeline so every character completes.

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.

Glyph coverage

Built-in Inter ExtraBold Latin and Noto Sans SC Chinese contours: 7,738 glyphs. Fixed 800 weight. Unsupported characters are reported by the editor.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "outline-trace",
  "durationMs": 1467,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "typography": {
    "kind": "outline-trace",
    "text": "Outline",
    "fontSize": 150,
    "fontWeight": 800,
    "color": "#171717",
    "strokeColor": "#171717",
    "strokeWidth": 2.5,
    "stagger": 3,
    "fill": true,
    "keepStroke": false
  }
}

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.