Interface OverlayDefinition

interface OverlayDefinition {
    designWidth?: number;
    hide?: AnimationPhase;
    root: GroupNode | StackNode;
    show?: AnimationPhase;
}

Properties

designWidth?: number

Frame width (in design pixels) the overlay is authored against. A length of "40px" resolves to 40 * frameWidth / designWidth device pixels at render time, so the overlay scales proportionally with the actual frame width.

Default 1280 - matches a typical 720p design comp. Set to 1920 if you author against 1080p, or any other reference width that matches your design tooling.

Optional hide animation.

  • Absent -> the show phase is played backwards (its progress runs 1 -> 0). Because it is the same curve run in reverse, the easing is mirrored too: an ease-out entrance becomes an ease-in-feel exit. Interrupting a running show with hide (or vice versa) flips the direction and retraces from the current point.
  • Present -> played forward as authored, as its own independent timeline.

Tree root. Must be a structural container - GroupNode or StackNode. Position the root inside the video frame using its own inset fields (left/right/top/bottom/centerX/centerY) - the root's "parent" is the frame.

Optional show animation. If absent, the overlay appears instantly.