@pixerate/editor 0.63.0 → 0.65.0

package/dist/animation-editor/index.d.cts

@@ -910,6 +910,77 @@ declare function motionFrameToSvg(scene: MotionScene, time: number, options?: Mo
 /** Replaces the root `viewBox` of an SVG string. */
 declare function withViewBox(svg: string, box: MotionRect): string;
 
+/**
+ * Seeing motion on a still: onion skin (faded frames either side of the playhead) and motion
+ * paths (where each node's centre travels). Frames are pure functions of time, so both are just
+ * more frames: no state, and the same picture every time.
+ */
+interface MotionOnionSkin {
+    /** Ghost frames before the playhead (default 2). */
+    before?: number;
+    /** Ghost frames after the playhead (default 0). */
+    after?: number;
+    /**
+     * Time between ghosts: ms (default 1000 / 12, every other frame at 24 fps), or `commands` to
+     * ghost the moments commands start and end around the playhead.
+     */
+    spacing?: number | 'commands';
+    /** Opacity of the nearest ghost (default 0.35); further ones fade as 1 / distance. */
+    opacity?: number;
+}
+interface MotionGhost {
+    time: number;
+    /** Negative before the playhead, positive after: 1 is the nearest. */
+    offset: number;
+    opacity: number;
+}
+/** The ghost frames for a playhead at `time`, nearest first on each side. */
+declare function motionGhosts(scene: MotionScene, time: number, onion?: MotionOnionSkin): MotionGhost[];
+interface MotionPathOptions {
+    /** From this time, ms (default 0). */
+    from?: number;
+    /** To this time, ms (default the end). */
+    to?: number;
+    /** Time between samples, ms (default 1000 / 30; at most 400 samples). */
+    step?: number;
+}
+interface MotionPath {
+    id: string;
+    /** Where the node's centre is, in document units, sample by sample. */
+    points: {
+        t: number;
+        x: number;
+        y: number;
+    }[];
+    /** Where it is when a change that moves it (or a group it is in) starts or ends. */
+    keys: {
+        t: number;
+        x: number;
+        y: number;
+    }[];
+}
+/** Ids of the nodes whose place changes (they or a group they are in move, turn, scale, follow or morph). */
+declare function motionMovingIds(scene: MotionScene): string[];
+/** Where a node's centre travels over time (its bounds as drawn, in document units). */
+declare function motionPath(scene: MotionScene, id: string, options?: MotionPathOptions): MotionPath;
+/** Motion paths as an SVG overlay: a line per node and a dot where each change starts or ends. Stroke widths follow the camera so they read the same at any zoom. */
+declare function motionPathsSvg(paths: readonly MotionPath[], camera: MotionRect, color?: string): string;
+/** What the stage can draw over a frame. */
+interface MotionOverlayOptions {
+    /** Faded frames either side of the playhead. */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel: true for every node whose place changes, or a list of ids. */
+    motionPaths?: boolean | readonly string[];
+    /** Colour of motion paths (default `#f43f5e`). */
+    motionPathColor?: string;
+}
+/**
+ * The frame at `time` as SVG with overlays: ghost frames under it (each with its own id prefix,
+ * element ids dropped so they never clash) and motion paths over it. Without overlays it is
+ * `motionFrameToSvg`.
+ */
+declare function motionStageSvg(scene: MotionScene, time: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
+
 /** Changes shorter than this (ms) are too quick to follow. */
 declare const MOTION_MIN_CHANGE_MS = 120;
 /**
@@ -1215,6 +1286,90 @@ declare function fromFlairSvgMotion(input: FlairSvgMotion, options?: FlairImport
 /** A Flair catalog `VectorEffect` as a scene: its motion, name, description, colour controls and presets. */
 declare function fromFlairVectorEffect(effect: FlairVectorEffect, options?: FlairImportOptions): FlairImportResult;
 
+/**
+ * Export to Lottie (Bodymovin JSON, v5): the scene as one shape layer whose groups mirror the
+ * artwork. Lottie players (lottie-web, rlottie, the iOS and Android libraries) then play it.
+ *
+ * - Each node is an outer group carrying its animated pose (anchor at its centre, position,
+ *   scale, rotation, opacity) around an inner group carrying its own transform. Paths keep their
+ *   own transform in their points.
+ * - Paths become `sh` shapes with solid fills (`fl`) and strokes (`st`). Drawing on becomes trim
+ *   paths (`tm`), and colours, stroke width and fill opacity animate on the fill and stroke.
+ * - The camera becomes the transform of a root group.
+ * - A change is written as keyframes with Lottie's bezier easing when a cubic-bezier ease (run
+ *   backwards for a mirrored repeat) is all that drives that property over that stretch.
+ *   Everything else is sampled at `fps` into linear keyframes: springs, elastic, behaviours,
+ *   stepped time, geometric zooms, additive layers, follows and camera moves.
+ *
+ * Gradients, dashes, reveal clips and skews of groups are not carried over; `notes` says so.
+ */
+/** A Lottie property: static (`a: 0`) or keyframed (`a: 1`). */
+type LottieValue = {
+    a: 0;
+    k: number | number[];
+} | {
+    a: 1;
+    k: LottieKeyframe[];
+};
+interface LottieKeyframe {
+    /** Frame. */
+    t: number;
+    /** Value from this key on. */
+    s: number[];
+    /** Out tangent of the ease to the next key (`x1`, `y1`). */
+    o?: {
+        x: number[];
+        y: number[];
+    };
+    /** In tangent of the ease to the next key (`x2`, `y2`). */
+    i?: {
+        x: number[];
+        y: number[];
+    };
+    /** Hold until the next key. */
+    h?: 1;
+}
+/** A Lottie shape item (group, path, fill, stroke, trim, transform): plain JSON. */
+type LottieShape = {
+    ty: string;
+    nm?: string;
+    [key: string]: unknown;
+};
+/** A Lottie animation: plain Bodymovin JSON. */
+interface LottieAnimation {
+    v: string;
+    fr: number;
+    ip: number;
+    op: number;
+    w: number;
+    h: number;
+    nm: string;
+    ddd: 0;
+    assets: [];
+    layers: Record<string, unknown>[];
+    /** One marker per shot (`cm` its label, else its id). */
+    markers: {
+        tm: number;
+        cm: string;
+        dr: number;
+    }[];
+}
+interface LottieExportOptions {
+    /** Frame rate and sampling rate (default: the scene's `fps`, else 30). */
+    fps?: number;
+    /** Decimal places (default 3). */
+    precision?: number;
+}
+interface LottieExport {
+    lottie: LottieAnimation;
+    /** Keyframes that sample changes Lottie cannot ease the same way. */
+    sampled: number;
+    /** What could not be carried over, in sentences. */
+    notes: string[];
+}
+/** A scene as a Lottie animation. */
+declare function toLottie(scene: MotionScene, options?: LottieExportOptions): LottieExport;
+
 interface AnimationEditorOptions {
     /** The scene to open (default: an empty one over a blank 800 × 450 artwork). */
     scene?: MotionScene;
@@ -1324,7 +1479,7 @@ declare class AnimationEditorController {
     /** The scene at `time` (default: the playhead). */
     frame(time?: number, options?: MotionFrameOptions): MotionFrame;
     /** The scene at `time` (default: the playhead) as SVG. */
-    toSvg(time?: number, options?: MotionSvgOptions): string;
+    toSvg(time?: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
     /** The scene as a Flair `SvgMotion`. */
     toFlairMotion(options?: FlairExportOptions): FlairMotionExport;
     /** The scene as a Flair catalog vector effect. */
@@ -1764,6 +1919,6 @@ declare function createAnimationEditorToolProvider(controller: AnimationEditorCo
  * A short authoring guide for a model writing vector animations with the animation editor's
  * tools. Static, so it caches well as part of a system prompt.
  */
-declare const ANIMATION_EDITOR_AGENT_INSTRUCTIONS = "You animate vector artwork. A scene is artwork (vector paths and groups, each with an id) plus shots.\n\nHow it plays\n- Shots play in order. A shot optionally moves the camera, plays its commands, then holds (default 600 ms).\n- Commands in a shot play one after another; give \"with\": \"previous\" to start one together with the command before, \"delay\" to wait, \"stagger\" to offset several targets.\n- Timing comes from the content: each command has a default length (enter 600 ms, move 700 ms, draw follows the path length). Only set \"duration\" to change the pace.\n- Anything that enters later is hidden until it enters. Things that never enter are visible from the start.\n- Every frame is a pure function of time: the same scene always plays the same frames.\n\nCommands\n- enter (fade, pop, grow, slide, draw) and exit (fade, shrink, slide, undraw) bring things in and out.\n- enter also reveals through a clip over the target's box: wipe (behind an edge travelling \"direction\", default right), iris (from the centre; \"shape\": circle or box) and split (from a line through the middle; \"orientation\": horizontal or vertical). exit wipe hides the same way. Reveals need a width and a height: use draw / undraw for a straight line.\n- draw draws strokes on to a fraction; move, rotate, scale and fade change the pose (about the centre); style blends solid colours and stroke width.\n- enter also has zoom (settles from larger) and rise (rises a short way, overshooting a touch); pop and zoom take a starting \"scale\".\n- morph turns a shape into another node's shape (keep the target hidden); match does the same for a whole group, part by part (Smart Animate: draw the end state as a second, hidden group whose parts share names with the first); follow moves along a path node (with \"rotate\", moves made meanwhile turn with the path).\n- Emphasis draws the eye and returns to rest: pulse (swell), shake (side to side, or \"axis\": \"vertical\"), teeter (rock), wave (bob, no settling), wiggle (seeded wander; the same seed wanders the same way) and color-pulse (tint and back).\n- Emphasis stacks on other motion: a shake during a slide shakes as it slides. Give move, rotate or scale \"blend\": \"add\" to stack them too (what they add stays); \"blend\": \"replace\" makes a change take over instead.\n- Any command but enter and exit can \"repeat\" (loop, mirror back and forth, or offset to carry on: rotate by 90, repeat 4 is a full turn); \"duration\" is one cycle.\n- Springs (\"spring-gentle\", \"spring-quick\", \"spring-bouncy\", \"spring-slow\" or { \"type\": \"spring\", \u2026 }) feel physical; leave \"duration\" out and the spring sets it.\n- To time shots to music or a voiceover: set a \"beat\" grid or \"narration\" word timings with set_animation_settings, read them with get_timing_grid, and give a shot \"at\": { \"beat\": n } or { \"word\": i }. The shot before holds until the cue; check_animation warns when a cue is missed.\n- \"steps\": 12 (on a command, or for the whole scene with set_animation_settings) holds poses \"on twos\" for a hand-drawn look. \"geometric\": true on scale or a camera zooms at an even rate.\n- Commands share their names and defaults with Flair's motion primitives (get_animation shows each one's \"flairPrimitive\"), and emphasis, reveals and follows export to Flair exactly.\n- effect tweens a numeric parameter of a live path effect already on the node (twist angle, wiggle time, zig zag size).\n\nWorking method\n1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).\n2. Plan a few shots, each one idea. Add them with insert_shots, or edit_animation to make several edits as one step (dry_run first when unsure).\n3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + \"end\") to look at the result.\n4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.\n\nKeep motion purposeful: one thing moving at a time reads best, ease-out for arrivals, ease-in for exits, and hold long enough to see each result.";
+declare const ANIMATION_EDITOR_AGENT_INSTRUCTIONS = "You animate vector artwork. A scene is artwork (vector paths and groups, each with an id) plus shots.\n\nHow it plays\n- Shots play in order. A shot optionally moves the camera, plays its commands, then holds (default 600 ms).\n- Commands in a shot play one after another; give \"with\": \"previous\" to start one together with the command before, \"delay\" to wait, \"stagger\" to offset several targets.\n- Timing comes from the content: each command has a default length (enter 600 ms, move 700 ms, draw follows the path length). Only set \"duration\" to change the pace.\n- Anything that enters later is hidden until it enters. Things that never enter are visible from the start.\n- Every frame is a pure function of time: the same scene always plays the same frames.\n\nCommands\n- enter (fade, pop, grow, slide, draw) and exit (fade, shrink, slide, undraw) bring things in and out.\n- enter also reveals through a clip over the target's box: wipe (behind an edge travelling \"direction\", default right), iris (from the centre; \"shape\": circle or box) and split (from a line through the middle; \"orientation\": horizontal or vertical). exit wipe hides the same way. Reveals need a width and a height: use draw / undraw for a straight line.\n- draw draws strokes on to a fraction; move, rotate, scale and fade change the pose (about the centre); style blends solid colours and stroke width.\n- enter also has zoom (settles from larger) and rise (rises a short way, overshooting a touch); pop and zoom take a starting \"scale\".\n- morph turns a shape into another node's shape (keep the target hidden); match does the same for a whole group, part by part (Smart Animate: draw the end state as a second, hidden group whose parts share names with the first); follow moves along a path node (with \"rotate\", moves made meanwhile turn with the path).\n- Emphasis draws the eye and returns to rest: pulse (swell), shake (side to side, or \"axis\": \"vertical\"), teeter (rock), wave (bob, no settling), wiggle (seeded wander; the same seed wanders the same way) and color-pulse (tint and back).\n- Emphasis stacks on other motion: a shake during a slide shakes as it slides. Give move, rotate or scale \"blend\": \"add\" to stack them too (what they add stays); \"blend\": \"replace\" makes a change take over instead.\n- Any command but enter and exit can \"repeat\" (loop, mirror back and forth, or offset to carry on: rotate by 90, repeat 4 is a full turn); \"duration\" is one cycle.\n- Springs (\"spring-gentle\", \"spring-quick\", \"spring-bouncy\", \"spring-slow\" or { \"type\": \"spring\", \u2026 }) feel physical; leave \"duration\" out and the spring sets it.\n- To time shots to music or a voiceover: set a \"beat\" grid or \"narration\" word timings with set_animation_settings, read them with get_timing_grid, and give a shot \"at\": { \"beat\": n } or { \"word\": i }. The shot before holds until the cue; check_animation warns when a cue is missed.\n- \"steps\": 12 (on a command, or for the whole scene with set_animation_settings) holds poses \"on twos\" for a hand-drawn look. \"geometric\": true on scale or a camera zooms at an even rate.\n- Commands share their names and defaults with Flair's motion primitives (get_animation shows each one's \"flairPrimitive\"), and emphasis, reveals and follows export to Flair exactly.\n- effect tweens a numeric parameter of a live path effect already on the node (twist angle, wiggle time, zig zag size).\n\nWorking method\n1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).\n2. Plan a few shots, each one idea. Add them with insert_shots, or edit_animation to make several edits as one step (dry_run first when unsure).\n3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + \"end\") to look at the result; add onion_skin or motion_paths to see the motion in one picture, or get_motion_path for the numbers.\n4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.\n\nKeep motion purposeful: one thing moving at a time reads best, ease-out for arrivals, ease-in for exits, and hold long enough to see each result.";
 
-export { ANIMATION_EDITOR_AGENT_INSTRUCTIONS, AnimationEditorController, type AnimationEditorOptions, type AnimationEditorSelection, type AnimationEditorState, type AnimationEditorToolProviderOptions, FLAIR_EASES, FLAIR_EXPORT_VERSION, type FlairEase, type FlairEaseName, type FlairEffectDocument, type FlairEffectOptions, type FlairExportOptions, type FlairImportOptions, type FlairImportResult, type FlairMotionExport, type FlairSpringEase, type FlairSvgAnimation, type FlairSvgMotion, type FlairVectorEffect, MOTION_ADDITIVE_PROPERTIES, MOTION_BLENDS, MOTION_CAMERA_MS, MOTION_COMMAND_SCHEMA, MOTION_COMMAND_TYPES, MOTION_DEFAULT_DURATIONS, MOTION_DEFAULT_HOLD, MOTION_DIRECTIONS, MOTION_DRAW_EFFECT_ID, MOTION_DRAW_MS_PER_UNIT, MOTION_DRAW_RANGE, MOTION_EASE_IN_OUT, MOTION_EASE_OUT, MOTION_EDIT_OPS, MOTION_ENTER_STYLES, MOTION_EXIT_STYLES, MOTION_IRIS_SHAPES, MOTION_ISSUE_CODES, MOTION_MIN_CHANGE_MS, MOTION_REPEAT_MODES, MOTION_SPEED_RANGE, MOTION_SPLIT_ORIENTATIONS, type MotionBeatGrid, type MotionCamera, type MotionClipShape, type MotionColorPulseCommand, type MotionCommand, type MotionCommandBase, type MotionCommandTiming, type MotionCommandType, type MotionControl, type MotionCue, type MotionDirection, type MotionDrawCommand, type MotionEdit, type MotionEditOp, type MotionEditResult, type MotionEffectCommand, type MotionEnterCommand, type MotionEnterStyle, type MotionExitCommand, type MotionExitStyle, type MotionFadeCommand, type MotionFit, type MotionFitOptions, type MotionFollowCommand, type MotionFrame, type MotionFrameOptions, type MotionIrisShape, type MotionIssue, type MotionIssueCode, type MotionIssueSeverity, type MotionMatch, type MotionMatchCommand, type MotionMorphCommand, type MotionMoveCommand, type MotionNarration, type MotionNodeEntry, type MotionPreset, type MotionProperty, type MotionPulseCommand, type MotionRect, type MotionReveal, type MotionRotateCommand, type MotionScaleCommand, type MotionScene, MotionSceneFormatError, type MotionSegment, type MotionShakeCommand, type MotionShot, type MotionShotTiming, type MotionSplitOrientation, type MotionStyleCommand, type MotionSvgOptions, type MotionTeeterCommand, type MotionTimeline, type MotionValue, type MotionWaitCommand, type MotionWaveCommand, type MotionWiggleCommand, activeSegment, applyMotionControlValues, applyMotionEdits, checkMotionScene, commandShapeProblems, compileMotionScene, createAnimationEditorToolProvider, createMotionScene, describeMotionElements, describeMotionShots, fitMotionRect, fitMotionScene, flairAtLeast, flairCurveFor, flairEaseFor, freshShotId, fromFlairSvgMotion, fromFlairVectorEffect, indexMotionNodes, interpolateMotionValue, isMotionCommand, isMotionShot, matchMotionNodes, motionAddTrackKey, motionBeatAt, motionBeatTime, motionClipAttrs, motionCommandDuration, motionCommandRepeat, motionCueTime, motionCycleDuration, motionFlairPrimitive, motionFollowRoute, motionFrameAt, motionFrameToSvg, motionIssue, motionIssueKey, motionIssueLine, motionNodeClips, motionNodeOffset, motionPathLength, motionRestValue, motionRevealClip, motionRevealPadding, motionSceneShapeProblems, motionSceneToJson, motionShotAt, motionShotTimeScale, motionTrackKey, namedWithSuggestion, parseMotionScene, resolveMotionCamera, segmentProgress, segmentValue, shotShapeProblems, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, trackValue, withMotionLayers, withViewBox };
+export { ANIMATION_EDITOR_AGENT_INSTRUCTIONS, AnimationEditorController, type AnimationEditorOptions, type AnimationEditorSelection, type AnimationEditorState, type AnimationEditorToolProviderOptions, FLAIR_EASES, FLAIR_EXPORT_VERSION, type FlairEase, type FlairEaseName, type FlairEffectDocument, type FlairEffectOptions, type FlairExportOptions, type FlairImportOptions, type FlairImportResult, type FlairMotionExport, type FlairSpringEase, type FlairSvgAnimation, type FlairSvgMotion, type FlairVectorEffect, type LottieAnimation, type LottieExport, type LottieExportOptions, type LottieKeyframe, type LottieShape, type LottieValue, MOTION_ADDITIVE_PROPERTIES, MOTION_BLENDS, MOTION_CAMERA_MS, MOTION_COMMAND_SCHEMA, MOTION_COMMAND_TYPES, MOTION_DEFAULT_DURATIONS, MOTION_DEFAULT_HOLD, MOTION_DIRECTIONS, MOTION_DRAW_EFFECT_ID, MOTION_DRAW_MS_PER_UNIT, MOTION_DRAW_RANGE, MOTION_EASE_IN_OUT, MOTION_EASE_OUT, MOTION_EDIT_OPS, MOTION_ENTER_STYLES, MOTION_EXIT_STYLES, MOTION_IRIS_SHAPES, MOTION_ISSUE_CODES, MOTION_MIN_CHANGE_MS, MOTION_REPEAT_MODES, MOTION_SPEED_RANGE, MOTION_SPLIT_ORIENTATIONS, type MotionBeatGrid, type MotionCamera, type MotionClipShape, type MotionColorPulseCommand, type MotionCommand, type MotionCommandBase, type MotionCommandTiming, type MotionCommandType, type MotionControl, type MotionCue, type MotionDirection, type MotionDrawCommand, type MotionEdit, type MotionEditOp, type MotionEditResult, type MotionEffectCommand, type MotionEnterCommand, type MotionEnterStyle, type MotionExitCommand, type MotionExitStyle, type MotionFadeCommand, type MotionFit, type MotionFitOptions, type MotionFollowCommand, type MotionFrame, type MotionFrameOptions, type MotionGhost, type MotionIrisShape, type MotionIssue, type MotionIssueCode, type MotionIssueSeverity, type MotionMatch, type MotionMatchCommand, type MotionMorphCommand, type MotionMoveCommand, type MotionNarration, type MotionNodeEntry, type MotionOnionSkin, type MotionOverlayOptions, type MotionPath, type MotionPathOptions, type MotionPreset, type MotionProperty, type MotionPulseCommand, type MotionRect, type MotionReveal, type MotionRotateCommand, type MotionScaleCommand, type MotionScene, MotionSceneFormatError, type MotionSegment, type MotionShakeCommand, type MotionShot, type MotionShotTiming, type MotionSplitOrientation, type MotionStyleCommand, type MotionSvgOptions, type MotionTeeterCommand, type MotionTimeline, type MotionValue, type MotionWaitCommand, type MotionWaveCommand, type MotionWiggleCommand, activeSegment, applyMotionControlValues, applyMotionEdits, checkMotionScene, commandShapeProblems, compileMotionScene, createAnimationEditorToolProvider, createMotionScene, describeMotionElements, describeMotionShots, fitMotionRect, fitMotionScene, flairAtLeast, flairCurveFor, flairEaseFor, freshShotId, fromFlairSvgMotion, fromFlairVectorEffect, indexMotionNodes, interpolateMotionValue, isMotionCommand, isMotionShot, matchMotionNodes, motionAddTrackKey, motionBeatAt, motionBeatTime, motionClipAttrs, motionCommandDuration, motionCommandRepeat, motionCueTime, motionCycleDuration, motionFlairPrimitive, motionFollowRoute, motionFrameAt, motionFrameToSvg, motionGhosts, motionIssue, motionIssueKey, motionIssueLine, motionMovingIds, motionNodeClips, motionNodeOffset, motionPath, motionPathLength, motionPathsSvg, motionRestValue, motionRevealClip, motionRevealPadding, motionSceneShapeProblems, motionSceneToJson, motionShotAt, motionShotTimeScale, motionStageSvg, motionTrackKey, namedWithSuggestion, parseMotionScene, resolveMotionCamera, segmentProgress, segmentValue, shotShapeProblems, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, toLottie, trackValue, withMotionLayers, withViewBox };

package/dist/animation-editor/index.d.ts

@@ -910,6 +910,77 @@ declare function motionFrameToSvg(scene: MotionScene, time: number, options?: Mo
 /** Replaces the root `viewBox` of an SVG string. */
 declare function withViewBox(svg: string, box: MotionRect): string;
 
+/**
+ * Seeing motion on a still: onion skin (faded frames either side of the playhead) and motion
+ * paths (where each node's centre travels). Frames are pure functions of time, so both are just
+ * more frames: no state, and the same picture every time.
+ */
+interface MotionOnionSkin {
+    /** Ghost frames before the playhead (default 2). */
+    before?: number;
+    /** Ghost frames after the playhead (default 0). */
+    after?: number;
+    /**
+     * Time between ghosts: ms (default 1000 / 12, every other frame at 24 fps), or `commands` to
+     * ghost the moments commands start and end around the playhead.
+     */
+    spacing?: number | 'commands';
+    /** Opacity of the nearest ghost (default 0.35); further ones fade as 1 / distance. */
+    opacity?: number;
+}
+interface MotionGhost {
+    time: number;
+    /** Negative before the playhead, positive after: 1 is the nearest. */
+    offset: number;
+    opacity: number;
+}
+/** The ghost frames for a playhead at `time`, nearest first on each side. */
+declare function motionGhosts(scene: MotionScene, time: number, onion?: MotionOnionSkin): MotionGhost[];
+interface MotionPathOptions {
+    /** From this time, ms (default 0). */
+    from?: number;
+    /** To this time, ms (default the end). */
+    to?: number;
+    /** Time between samples, ms (default 1000 / 30; at most 400 samples). */
+    step?: number;
+}
+interface MotionPath {
+    id: string;
+    /** Where the node's centre is, in document units, sample by sample. */
+    points: {
+        t: number;
+        x: number;
+        y: number;
+    }[];
+    /** Where it is when a change that moves it (or a group it is in) starts or ends. */
+    keys: {
+        t: number;
+        x: number;
+        y: number;
+    }[];
+}
+/** Ids of the nodes whose place changes (they or a group they are in move, turn, scale, follow or morph). */
+declare function motionMovingIds(scene: MotionScene): string[];
+/** Where a node's centre travels over time (its bounds as drawn, in document units). */
+declare function motionPath(scene: MotionScene, id: string, options?: MotionPathOptions): MotionPath;
+/** Motion paths as an SVG overlay: a line per node and a dot where each change starts or ends. Stroke widths follow the camera so they read the same at any zoom. */
+declare function motionPathsSvg(paths: readonly MotionPath[], camera: MotionRect, color?: string): string;
+/** What the stage can draw over a frame. */
+interface MotionOverlayOptions {
+    /** Faded frames either side of the playhead. */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel: true for every node whose place changes, or a list of ids. */
+    motionPaths?: boolean | readonly string[];
+    /** Colour of motion paths (default `#f43f5e`). */
+    motionPathColor?: string;
+}
+/**
+ * The frame at `time` as SVG with overlays: ghost frames under it (each with its own id prefix,
+ * element ids dropped so they never clash) and motion paths over it. Without overlays it is
+ * `motionFrameToSvg`.
+ */
+declare function motionStageSvg(scene: MotionScene, time: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
+
 /** Changes shorter than this (ms) are too quick to follow. */
 declare const MOTION_MIN_CHANGE_MS = 120;
 /**
@@ -1215,6 +1286,90 @@ declare function fromFlairSvgMotion(input: FlairSvgMotion, options?: FlairImport
 /** A Flair catalog `VectorEffect` as a scene: its motion, name, description, colour controls and presets. */
 declare function fromFlairVectorEffect(effect: FlairVectorEffect, options?: FlairImportOptions): FlairImportResult;
 
+/**
+ * Export to Lottie (Bodymovin JSON, v5): the scene as one shape layer whose groups mirror the
+ * artwork. Lottie players (lottie-web, rlottie, the iOS and Android libraries) then play it.
+ *
+ * - Each node is an outer group carrying its animated pose (anchor at its centre, position,
+ *   scale, rotation, opacity) around an inner group carrying its own transform. Paths keep their
+ *   own transform in their points.
+ * - Paths become `sh` shapes with solid fills (`fl`) and strokes (`st`). Drawing on becomes trim
+ *   paths (`tm`), and colours, stroke width and fill opacity animate on the fill and stroke.
+ * - The camera becomes the transform of a root group.
+ * - A change is written as keyframes with Lottie's bezier easing when a cubic-bezier ease (run
+ *   backwards for a mirrored repeat) is all that drives that property over that stretch.
+ *   Everything else is sampled at `fps` into linear keyframes: springs, elastic, behaviours,
+ *   stepped time, geometric zooms, additive layers, follows and camera moves.
+ *
+ * Gradients, dashes, reveal clips and skews of groups are not carried over; `notes` says so.
+ */
+/** A Lottie property: static (`a: 0`) or keyframed (`a: 1`). */
+type LottieValue = {
+    a: 0;
+    k: number | number[];
+} | {
+    a: 1;
+    k: LottieKeyframe[];
+};
+interface LottieKeyframe {
+    /** Frame. */
+    t: number;
+    /** Value from this key on. */
+    s: number[];
+    /** Out tangent of the ease to the next key (`x1`, `y1`). */
+    o?: {
+        x: number[];
+        y: number[];
+    };
+    /** In tangent of the ease to the next key (`x2`, `y2`). */
+    i?: {
+        x: number[];
+        y: number[];
+    };
+    /** Hold until the next key. */
+    h?: 1;
+}
+/** A Lottie shape item (group, path, fill, stroke, trim, transform): plain JSON. */
+type LottieShape = {
+    ty: string;
+    nm?: string;
+    [key: string]: unknown;
+};
+/** A Lottie animation: plain Bodymovin JSON. */
+interface LottieAnimation {
+    v: string;
+    fr: number;
+    ip: number;
+    op: number;
+    w: number;
+    h: number;
+    nm: string;
+    ddd: 0;
+    assets: [];
+    layers: Record<string, unknown>[];
+    /** One marker per shot (`cm` its label, else its id). */
+    markers: {
+        tm: number;
+        cm: string;
+        dr: number;
+    }[];
+}
+interface LottieExportOptions {
+    /** Frame rate and sampling rate (default: the scene's `fps`, else 30). */
+    fps?: number;
+    /** Decimal places (default 3). */
+    precision?: number;
+}
+interface LottieExport {
+    lottie: LottieAnimation;
+    /** Keyframes that sample changes Lottie cannot ease the same way. */
+    sampled: number;
+    /** What could not be carried over, in sentences. */
+    notes: string[];
+}
+/** A scene as a Lottie animation. */
+declare function toLottie(scene: MotionScene, options?: LottieExportOptions): LottieExport;
+
 interface AnimationEditorOptions {
     /** The scene to open (default: an empty one over a blank 800 × 450 artwork). */
     scene?: MotionScene;
@@ -1324,7 +1479,7 @@ declare class AnimationEditorController {
     /** The scene at `time` (default: the playhead). */
     frame(time?: number, options?: MotionFrameOptions): MotionFrame;
     /** The scene at `time` (default: the playhead) as SVG. */
-    toSvg(time?: number, options?: MotionSvgOptions): string;
+    toSvg(time?: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
     /** The scene as a Flair `SvgMotion`. */
     toFlairMotion(options?: FlairExportOptions): FlairMotionExport;
     /** The scene as a Flair catalog vector effect. */
@@ -1764,6 +1919,6 @@ declare function createAnimationEditorToolProvider(controller: AnimationEditorCo
  * A short authoring guide for a model writing vector animations with the animation editor's
  * tools. Static, so it caches well as part of a system prompt.
  */
-declare const ANIMATION_EDITOR_AGENT_INSTRUCTIONS = "You animate vector artwork. A scene is artwork (vector paths and groups, each with an id) plus shots.\n\nHow it plays\n- Shots play in order. A shot optionally moves the camera, plays its commands, then holds (default 600 ms).\n- Commands in a shot play one after another; give \"with\": \"previous\" to start one together with the command before, \"delay\" to wait, \"stagger\" to offset several targets.\n- Timing comes from the content: each command has a default length (enter 600 ms, move 700 ms, draw follows the path length). Only set \"duration\" to change the pace.\n- Anything that enters later is hidden until it enters. Things that never enter are visible from the start.\n- Every frame is a pure function of time: the same scene always plays the same frames.\n\nCommands\n- enter (fade, pop, grow, slide, draw) and exit (fade, shrink, slide, undraw) bring things in and out.\n- enter also reveals through a clip over the target's box: wipe (behind an edge travelling \"direction\", default right), iris (from the centre; \"shape\": circle or box) and split (from a line through the middle; \"orientation\": horizontal or vertical). exit wipe hides the same way. Reveals need a width and a height: use draw / undraw for a straight line.\n- draw draws strokes on to a fraction; move, rotate, scale and fade change the pose (about the centre); style blends solid colours and stroke width.\n- enter also has zoom (settles from larger) and rise (rises a short way, overshooting a touch); pop and zoom take a starting \"scale\".\n- morph turns a shape into another node's shape (keep the target hidden); match does the same for a whole group, part by part (Smart Animate: draw the end state as a second, hidden group whose parts share names with the first); follow moves along a path node (with \"rotate\", moves made meanwhile turn with the path).\n- Emphasis draws the eye and returns to rest: pulse (swell), shake (side to side, or \"axis\": \"vertical\"), teeter (rock), wave (bob, no settling), wiggle (seeded wander; the same seed wanders the same way) and color-pulse (tint and back).\n- Emphasis stacks on other motion: a shake during a slide shakes as it slides. Give move, rotate or scale \"blend\": \"add\" to stack them too (what they add stays); \"blend\": \"replace\" makes a change take over instead.\n- Any command but enter and exit can \"repeat\" (loop, mirror back and forth, or offset to carry on: rotate by 90, repeat 4 is a full turn); \"duration\" is one cycle.\n- Springs (\"spring-gentle\", \"spring-quick\", \"spring-bouncy\", \"spring-slow\" or { \"type\": \"spring\", \u2026 }) feel physical; leave \"duration\" out and the spring sets it.\n- To time shots to music or a voiceover: set a \"beat\" grid or \"narration\" word timings with set_animation_settings, read them with get_timing_grid, and give a shot \"at\": { \"beat\": n } or { \"word\": i }. The shot before holds until the cue; check_animation warns when a cue is missed.\n- \"steps\": 12 (on a command, or for the whole scene with set_animation_settings) holds poses \"on twos\" for a hand-drawn look. \"geometric\": true on scale or a camera zooms at an even rate.\n- Commands share their names and defaults with Flair's motion primitives (get_animation shows each one's \"flairPrimitive\"), and emphasis, reveals and follows export to Flair exactly.\n- effect tweens a numeric parameter of a live path effect already on the node (twist angle, wiggle time, zig zag size).\n\nWorking method\n1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).\n2. Plan a few shots, each one idea. Add them with insert_shots, or edit_animation to make several edits as one step (dry_run first when unsure).\n3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + \"end\") to look at the result.\n4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.\n\nKeep motion purposeful: one thing moving at a time reads best, ease-out for arrivals, ease-in for exits, and hold long enough to see each result.";
+declare const ANIMATION_EDITOR_AGENT_INSTRUCTIONS = "You animate vector artwork. A scene is artwork (vector paths and groups, each with an id) plus shots.\n\nHow it plays\n- Shots play in order. A shot optionally moves the camera, plays its commands, then holds (default 600 ms).\n- Commands in a shot play one after another; give \"with\": \"previous\" to start one together with the command before, \"delay\" to wait, \"stagger\" to offset several targets.\n- Timing comes from the content: each command has a default length (enter 600 ms, move 700 ms, draw follows the path length). Only set \"duration\" to change the pace.\n- Anything that enters later is hidden until it enters. Things that never enter are visible from the start.\n- Every frame is a pure function of time: the same scene always plays the same frames.\n\nCommands\n- enter (fade, pop, grow, slide, draw) and exit (fade, shrink, slide, undraw) bring things in and out.\n- enter also reveals through a clip over the target's box: wipe (behind an edge travelling \"direction\", default right), iris (from the centre; \"shape\": circle or box) and split (from a line through the middle; \"orientation\": horizontal or vertical). exit wipe hides the same way. Reveals need a width and a height: use draw / undraw for a straight line.\n- draw draws strokes on to a fraction; move, rotate, scale and fade change the pose (about the centre); style blends solid colours and stroke width.\n- enter also has zoom (settles from larger) and rise (rises a short way, overshooting a touch); pop and zoom take a starting \"scale\".\n- morph turns a shape into another node's shape (keep the target hidden); match does the same for a whole group, part by part (Smart Animate: draw the end state as a second, hidden group whose parts share names with the first); follow moves along a path node (with \"rotate\", moves made meanwhile turn with the path).\n- Emphasis draws the eye and returns to rest: pulse (swell), shake (side to side, or \"axis\": \"vertical\"), teeter (rock), wave (bob, no settling), wiggle (seeded wander; the same seed wanders the same way) and color-pulse (tint and back).\n- Emphasis stacks on other motion: a shake during a slide shakes as it slides. Give move, rotate or scale \"blend\": \"add\" to stack them too (what they add stays); \"blend\": \"replace\" makes a change take over instead.\n- Any command but enter and exit can \"repeat\" (loop, mirror back and forth, or offset to carry on: rotate by 90, repeat 4 is a full turn); \"duration\" is one cycle.\n- Springs (\"spring-gentle\", \"spring-quick\", \"spring-bouncy\", \"spring-slow\" or { \"type\": \"spring\", \u2026 }) feel physical; leave \"duration\" out and the spring sets it.\n- To time shots to music or a voiceover: set a \"beat\" grid or \"narration\" word timings with set_animation_settings, read them with get_timing_grid, and give a shot \"at\": { \"beat\": n } or { \"word\": i }. The shot before holds until the cue; check_animation warns when a cue is missed.\n- \"steps\": 12 (on a command, or for the whole scene with set_animation_settings) holds poses \"on twos\" for a hand-drawn look. \"geometric\": true on scale or a camera zooms at an even rate.\n- Commands share their names and defaults with Flair's motion primitives (get_animation shows each one's \"flairPrimitive\"), and emphasis, reveals and follows export to Flair exactly.\n- effect tweens a numeric parameter of a live path effect already on the node (twist angle, wiggle time, zig zag size).\n\nWorking method\n1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).\n2. Plan a few shots, each one idea. Add them with insert_shots, or edit_animation to make several edits as one step (dry_run first when unsure).\n3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + \"end\") to look at the result; add onion_skin or motion_paths to see the motion in one picture, or get_motion_path for the numbers.\n4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.\n\nKeep motion purposeful: one thing moving at a time reads best, ease-out for arrivals, ease-in for exits, and hold long enough to see each result.";
 
-export { ANIMATION_EDITOR_AGENT_INSTRUCTIONS, AnimationEditorController, type AnimationEditorOptions, type AnimationEditorSelection, type AnimationEditorState, type AnimationEditorToolProviderOptions, FLAIR_EASES, FLAIR_EXPORT_VERSION, type FlairEase, type FlairEaseName, type FlairEffectDocument, type FlairEffectOptions, type FlairExportOptions, type FlairImportOptions, type FlairImportResult, type FlairMotionExport, type FlairSpringEase, type FlairSvgAnimation, type FlairSvgMotion, type FlairVectorEffect, MOTION_ADDITIVE_PROPERTIES, MOTION_BLENDS, MOTION_CAMERA_MS, MOTION_COMMAND_SCHEMA, MOTION_COMMAND_TYPES, MOTION_DEFAULT_DURATIONS, MOTION_DEFAULT_HOLD, MOTION_DIRECTIONS, MOTION_DRAW_EFFECT_ID, MOTION_DRAW_MS_PER_UNIT, MOTION_DRAW_RANGE, MOTION_EASE_IN_OUT, MOTION_EASE_OUT, MOTION_EDIT_OPS, MOTION_ENTER_STYLES, MOTION_EXIT_STYLES, MOTION_IRIS_SHAPES, MOTION_ISSUE_CODES, MOTION_MIN_CHANGE_MS, MOTION_REPEAT_MODES, MOTION_SPEED_RANGE, MOTION_SPLIT_ORIENTATIONS, type MotionBeatGrid, type MotionCamera, type MotionClipShape, type MotionColorPulseCommand, type MotionCommand, type MotionCommandBase, type MotionCommandTiming, type MotionCommandType, type MotionControl, type MotionCue, type MotionDirection, type MotionDrawCommand, type MotionEdit, type MotionEditOp, type MotionEditResult, type MotionEffectCommand, type MotionEnterCommand, type MotionEnterStyle, type MotionExitCommand, type MotionExitStyle, type MotionFadeCommand, type MotionFit, type MotionFitOptions, type MotionFollowCommand, type MotionFrame, type MotionFrameOptions, type MotionIrisShape, type MotionIssue, type MotionIssueCode, type MotionIssueSeverity, type MotionMatch, type MotionMatchCommand, type MotionMorphCommand, type MotionMoveCommand, type MotionNarration, type MotionNodeEntry, type MotionPreset, type MotionProperty, type MotionPulseCommand, type MotionRect, type MotionReveal, type MotionRotateCommand, type MotionScaleCommand, type MotionScene, MotionSceneFormatError, type MotionSegment, type MotionShakeCommand, type MotionShot, type MotionShotTiming, type MotionSplitOrientation, type MotionStyleCommand, type MotionSvgOptions, type MotionTeeterCommand, type MotionTimeline, type MotionValue, type MotionWaitCommand, type MotionWaveCommand, type MotionWiggleCommand, activeSegment, applyMotionControlValues, applyMotionEdits, checkMotionScene, commandShapeProblems, compileMotionScene, createAnimationEditorToolProvider, createMotionScene, describeMotionElements, describeMotionShots, fitMotionRect, fitMotionScene, flairAtLeast, flairCurveFor, flairEaseFor, freshShotId, fromFlairSvgMotion, fromFlairVectorEffect, indexMotionNodes, interpolateMotionValue, isMotionCommand, isMotionShot, matchMotionNodes, motionAddTrackKey, motionBeatAt, motionBeatTime, motionClipAttrs, motionCommandDuration, motionCommandRepeat, motionCueTime, motionCycleDuration, motionFlairPrimitive, motionFollowRoute, motionFrameAt, motionFrameToSvg, motionIssue, motionIssueKey, motionIssueLine, motionNodeClips, motionNodeOffset, motionPathLength, motionRestValue, motionRevealClip, motionRevealPadding, motionSceneShapeProblems, motionSceneToJson, motionShotAt, motionShotTimeScale, motionTrackKey, namedWithSuggestion, parseMotionScene, resolveMotionCamera, segmentProgress, segmentValue, shotShapeProblems, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, trackValue, withMotionLayers, withViewBox };
+export { ANIMATION_EDITOR_AGENT_INSTRUCTIONS, AnimationEditorController, type AnimationEditorOptions, type AnimationEditorSelection, type AnimationEditorState, type AnimationEditorToolProviderOptions, FLAIR_EASES, FLAIR_EXPORT_VERSION, type FlairEase, type FlairEaseName, type FlairEffectDocument, type FlairEffectOptions, type FlairExportOptions, type FlairImportOptions, type FlairImportResult, type FlairMotionExport, type FlairSpringEase, type FlairSvgAnimation, type FlairSvgMotion, type FlairVectorEffect, type LottieAnimation, type LottieExport, type LottieExportOptions, type LottieKeyframe, type LottieShape, type LottieValue, MOTION_ADDITIVE_PROPERTIES, MOTION_BLENDS, MOTION_CAMERA_MS, MOTION_COMMAND_SCHEMA, MOTION_COMMAND_TYPES, MOTION_DEFAULT_DURATIONS, MOTION_DEFAULT_HOLD, MOTION_DIRECTIONS, MOTION_DRAW_EFFECT_ID, MOTION_DRAW_MS_PER_UNIT, MOTION_DRAW_RANGE, MOTION_EASE_IN_OUT, MOTION_EASE_OUT, MOTION_EDIT_OPS, MOTION_ENTER_STYLES, MOTION_EXIT_STYLES, MOTION_IRIS_SHAPES, MOTION_ISSUE_CODES, MOTION_MIN_CHANGE_MS, MOTION_REPEAT_MODES, MOTION_SPEED_RANGE, MOTION_SPLIT_ORIENTATIONS, type MotionBeatGrid, type MotionCamera, type MotionClipShape, type MotionColorPulseCommand, type MotionCommand, type MotionCommandBase, type MotionCommandTiming, type MotionCommandType, type MotionControl, type MotionCue, type MotionDirection, type MotionDrawCommand, type MotionEdit, type MotionEditOp, type MotionEditResult, type MotionEffectCommand, type MotionEnterCommand, type MotionEnterStyle, type MotionExitCommand, type MotionExitStyle, type MotionFadeCommand, type MotionFit, type MotionFitOptions, type MotionFollowCommand, type MotionFrame, type MotionFrameOptions, type MotionGhost, type MotionIrisShape, type MotionIssue, type MotionIssueCode, type MotionIssueSeverity, type MotionMatch, type MotionMatchCommand, type MotionMorphCommand, type MotionMoveCommand, type MotionNarration, type MotionNodeEntry, type MotionOnionSkin, type MotionOverlayOptions, type MotionPath, type MotionPathOptions, type MotionPreset, type MotionProperty, type MotionPulseCommand, type MotionRect, type MotionReveal, type MotionRotateCommand, type MotionScaleCommand, type MotionScene, MotionSceneFormatError, type MotionSegment, type MotionShakeCommand, type MotionShot, type MotionShotTiming, type MotionSplitOrientation, type MotionStyleCommand, type MotionSvgOptions, type MotionTeeterCommand, type MotionTimeline, type MotionValue, type MotionWaitCommand, type MotionWaveCommand, type MotionWiggleCommand, activeSegment, applyMotionControlValues, applyMotionEdits, checkMotionScene, commandShapeProblems, compileMotionScene, createAnimationEditorToolProvider, createMotionScene, describeMotionElements, describeMotionShots, fitMotionRect, fitMotionScene, flairAtLeast, flairCurveFor, flairEaseFor, freshShotId, fromFlairSvgMotion, fromFlairVectorEffect, indexMotionNodes, interpolateMotionValue, isMotionCommand, isMotionShot, matchMotionNodes, motionAddTrackKey, motionBeatAt, motionBeatTime, motionClipAttrs, motionCommandDuration, motionCommandRepeat, motionCueTime, motionCycleDuration, motionFlairPrimitive, motionFollowRoute, motionFrameAt, motionFrameToSvg, motionGhosts, motionIssue, motionIssueKey, motionIssueLine, motionMovingIds, motionNodeClips, motionNodeOffset, motionPath, motionPathLength, motionPathsSvg, motionRestValue, motionRevealClip, motionRevealPadding, motionSceneShapeProblems, motionSceneToJson, motionShotAt, motionShotTimeScale, motionStageSvg, motionTrackKey, namedWithSuggestion, parseMotionScene, resolveMotionCamera, segmentProgress, segmentValue, shotShapeProblems, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, toLottie, trackValue, withMotionLayers, withViewBox };