@pixerate/editor 0.64.0 → 0.66.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animation-editor/index.cjs +481 -31
- package/dist/animation-editor/index.cjs.map +1 -1
- package/dist/animation-editor/index.d.cts +226 -4
- package/dist/animation-editor/index.d.ts +226 -4
- package/dist/animation-editor/index.js +459 -9
- package/dist/animation-editor/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -910,6 +910,77 @@ declare function motionFrameToSvg(scene: MotionScene, time: number, options?: Mo
|
|
|
910
910
|
/** Replaces the root `viewBox` of an SVG string. */
|
|
911
911
|
declare function withViewBox(svg: string, box: MotionRect): string;
|
|
912
912
|
|
|
913
|
+
/**
|
|
914
|
+
* Seeing motion on a still: onion skin (faded frames either side of the playhead) and motion
|
|
915
|
+
* paths (where each node's centre travels). Frames are pure functions of time, so both are just
|
|
916
|
+
* more frames: no state, and the same picture every time.
|
|
917
|
+
*/
|
|
918
|
+
interface MotionOnionSkin {
|
|
919
|
+
/** Ghost frames before the playhead (default 2). */
|
|
920
|
+
before?: number;
|
|
921
|
+
/** Ghost frames after the playhead (default 0). */
|
|
922
|
+
after?: number;
|
|
923
|
+
/**
|
|
924
|
+
* Time between ghosts: ms (default 1000 / 12, every other frame at 24 fps), or `commands` to
|
|
925
|
+
* ghost the moments commands start and end around the playhead.
|
|
926
|
+
*/
|
|
927
|
+
spacing?: number | 'commands';
|
|
928
|
+
/** Opacity of the nearest ghost (default 0.35); further ones fade as 1 / distance. */
|
|
929
|
+
opacity?: number;
|
|
930
|
+
}
|
|
931
|
+
interface MotionGhost {
|
|
932
|
+
time: number;
|
|
933
|
+
/** Negative before the playhead, positive after: 1 is the nearest. */
|
|
934
|
+
offset: number;
|
|
935
|
+
opacity: number;
|
|
936
|
+
}
|
|
937
|
+
/** The ghost frames for a playhead at `time`, nearest first on each side. */
|
|
938
|
+
declare function motionGhosts(scene: MotionScene, time: number, onion?: MotionOnionSkin): MotionGhost[];
|
|
939
|
+
interface MotionPathOptions {
|
|
940
|
+
/** From this time, ms (default 0). */
|
|
941
|
+
from?: number;
|
|
942
|
+
/** To this time, ms (default the end). */
|
|
943
|
+
to?: number;
|
|
944
|
+
/** Time between samples, ms (default 1000 / 30; at most 400 samples). */
|
|
945
|
+
step?: number;
|
|
946
|
+
}
|
|
947
|
+
interface MotionPath {
|
|
948
|
+
id: string;
|
|
949
|
+
/** Where the node's centre is, in document units, sample by sample. */
|
|
950
|
+
points: {
|
|
951
|
+
t: number;
|
|
952
|
+
x: number;
|
|
953
|
+
y: number;
|
|
954
|
+
}[];
|
|
955
|
+
/** Where it is when a change that moves it (or a group it is in) starts or ends. */
|
|
956
|
+
keys: {
|
|
957
|
+
t: number;
|
|
958
|
+
x: number;
|
|
959
|
+
y: number;
|
|
960
|
+
}[];
|
|
961
|
+
}
|
|
962
|
+
/** Ids of the nodes whose place changes (they or a group they are in move, turn, scale, follow or morph). */
|
|
963
|
+
declare function motionMovingIds(scene: MotionScene): string[];
|
|
964
|
+
/** Where a node's centre travels over time (its bounds as drawn, in document units). */
|
|
965
|
+
declare function motionPath(scene: MotionScene, id: string, options?: MotionPathOptions): MotionPath;
|
|
966
|
+
/** 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. */
|
|
967
|
+
declare function motionPathsSvg(paths: readonly MotionPath[], camera: MotionRect, color?: string): string;
|
|
968
|
+
/** What the stage can draw over a frame. */
|
|
969
|
+
interface MotionOverlayOptions {
|
|
970
|
+
/** Faded frames either side of the playhead. */
|
|
971
|
+
onionSkin?: MotionOnionSkin;
|
|
972
|
+
/** Draw where nodes travel: true for every node whose place changes, or a list of ids. */
|
|
973
|
+
motionPaths?: boolean | readonly string[];
|
|
974
|
+
/** Colour of motion paths (default `#f43f5e`). */
|
|
975
|
+
motionPathColor?: string;
|
|
976
|
+
}
|
|
977
|
+
/**
|
|
978
|
+
* The frame at `time` as SVG with overlays: ghost frames under it (each with its own id prefix,
|
|
979
|
+
* element ids dropped so they never clash) and motion paths over it. Without overlays it is
|
|
980
|
+
* `motionFrameToSvg`.
|
|
981
|
+
*/
|
|
982
|
+
declare function motionStageSvg(scene: MotionScene, time: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
|
|
983
|
+
|
|
913
984
|
/** Changes shorter than this (ms) are too quick to follow. */
|
|
914
985
|
declare const MOTION_MIN_CHANGE_MS = 120;
|
|
915
986
|
/**
|
|
@@ -966,6 +1037,11 @@ type MotionEdit = {
|
|
|
966
1037
|
op: 'delete_commands';
|
|
967
1038
|
shot: string;
|
|
968
1039
|
commands: number[];
|
|
1040
|
+
} | {
|
|
1041
|
+
op: 'move_command';
|
|
1042
|
+
shot: string;
|
|
1043
|
+
command: number;
|
|
1044
|
+
to: number;
|
|
969
1045
|
} | {
|
|
970
1046
|
op: 'set_artwork';
|
|
971
1047
|
artwork: VectorDocument;
|
|
@@ -1094,9 +1170,10 @@ interface FlairVectorEffect {
|
|
|
1094
1170
|
category: string;
|
|
1095
1171
|
tags: string[];
|
|
1096
1172
|
motion: FlairSvgMotion;
|
|
1173
|
+
/** Values are `#rrggbb` strings, or `[r, g, b]` channels from 0 to 1 (Flair's catalog writes both); imports turn them into hex. */
|
|
1097
1174
|
presets?: {
|
|
1098
1175
|
name: string;
|
|
1099
|
-
values: Record<string, string>;
|
|
1176
|
+
values: Record<string, string | readonly number[]>;
|
|
1100
1177
|
}[];
|
|
1101
1178
|
/** Ms on the last frame before looping. */
|
|
1102
1179
|
hold?: number;
|
|
@@ -1408,7 +1485,7 @@ declare class AnimationEditorController {
|
|
|
1408
1485
|
/** The scene at `time` (default: the playhead). */
|
|
1409
1486
|
frame(time?: number, options?: MotionFrameOptions): MotionFrame;
|
|
1410
1487
|
/** The scene at `time` (default: the playhead) as SVG. */
|
|
1411
|
-
toSvg(time?: number, options?: MotionSvgOptions): string;
|
|
1488
|
+
toSvg(time?: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
|
|
1412
1489
|
/** The scene as a Flair `SvgMotion`. */
|
|
1413
1490
|
toFlairMotion(options?: FlairExportOptions): FlairMotionExport;
|
|
1414
1491
|
/** The scene as a Flair catalog vector effect. */
|
|
@@ -1848,6 +1925,151 @@ declare function createAnimationEditorToolProvider(controller: AnimationEditorCo
|
|
|
1848
1925
|
* A short authoring guide for a model writing vector animations with the animation editor's
|
|
1849
1926
|
* tools. Static, so it caches well as part of a system prompt.
|
|
1850
1927
|
*/
|
|
1851
|
-
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.";
|
|
1928
|
+
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 (add_commands, update_command, move_command and delete_commands refine a shot), 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.";
|
|
1929
|
+
|
|
1930
|
+
/**
|
|
1931
|
+
* Helpers for hand-editing UIs (React's and Svelte's command inspector, ease picker, cue picker,
|
|
1932
|
+
* scrubber and stage picking). They hold the logic both bindings share, so the components stay
|
|
1933
|
+
* thin and alike. The command form is generated from `MOTION_COMMAND_SCHEMA`, the same schema
|
|
1934
|
+
* the agent tools take, so people and agents see the same fields, limits and descriptions.
|
|
1935
|
+
*/
|
|
1936
|
+
/** How a command field is edited. */
|
|
1937
|
+
type MotionFieldKind = 'targets' | 'node' | 'enum' | 'number' | 'integer' | 'boolean' | 'text' | 'color' | 'point' | 'scale' | 'ease';
|
|
1938
|
+
interface MotionFieldSpec {
|
|
1939
|
+
name: string;
|
|
1940
|
+
kind: MotionFieldKind;
|
|
1941
|
+
label: string;
|
|
1942
|
+
description: string;
|
|
1943
|
+
required: boolean;
|
|
1944
|
+
/** For `enum`. */
|
|
1945
|
+
options?: readonly string[];
|
|
1946
|
+
min?: number;
|
|
1947
|
+
max?: number;
|
|
1948
|
+
/** Unit shown next to a number: `ms`, `units`, `°`, `Hz`, `fps`, `×` or `0–1`. */
|
|
1949
|
+
unit?: string;
|
|
1950
|
+
/** `main` (what it does) or `timing` (when and how fast). */
|
|
1951
|
+
group: 'main' | 'timing';
|
|
1952
|
+
}
|
|
1953
|
+
/** `repeatMode` → `Repeat mode`. */
|
|
1954
|
+
declare function motionFieldLabel(name: string): string;
|
|
1955
|
+
/**
|
|
1956
|
+
* The fields a command type takes, in schema order (main fields first, then timing), each with
|
|
1957
|
+
* how to edit it, its limits and unit. Generated from `MOTION_COMMAND_SCHEMA`.
|
|
1958
|
+
*/
|
|
1959
|
+
declare function motionCommandFields(type: MotionCommandType): MotionFieldSpec[];
|
|
1960
|
+
type MotionFieldInput = {
|
|
1961
|
+
set: unknown;
|
|
1962
|
+
} | {
|
|
1963
|
+
remove: true;
|
|
1964
|
+
} | {
|
|
1965
|
+
error: string;
|
|
1966
|
+
};
|
|
1967
|
+
/**
|
|
1968
|
+
* Turns what a person typed into a field into a value to `set`, a field to `remove` (an empty
|
|
1969
|
+
* optional field) or an `error` to show. Numbers are checked against the field's limits.
|
|
1970
|
+
*/
|
|
1971
|
+
declare function parseMotionFieldInput(field: MotionFieldSpec, raw: string | boolean | readonly string[] | {
|
|
1972
|
+
x: string;
|
|
1973
|
+
y: string;
|
|
1974
|
+
}): MotionFieldInput;
|
|
1975
|
+
/** The `update_command` edit for one field input, or the error to show. */
|
|
1976
|
+
declare function motionFieldEdit(shot: string, command: number, field: MotionFieldSpec, raw: Parameters<typeof parseMotionFieldInput>[1]): MotionEdit | {
|
|
1977
|
+
error: string;
|
|
1978
|
+
};
|
|
1979
|
+
/**
|
|
1980
|
+
* A new command of `type` on `targets`, with its required fields filled from the artwork (the
|
|
1981
|
+
* first hidden shape to morph into, the first path to follow, the first effect parameter to
|
|
1982
|
+
* tween). Returns an error when the artwork has nothing to fill one with.
|
|
1983
|
+
*/
|
|
1984
|
+
declare function defaultMotionCommand(type: MotionCommandType, targets: readonly string[], scene: MotionScene): MotionCommand | {
|
|
1985
|
+
error: string;
|
|
1986
|
+
};
|
|
1987
|
+
/** A short line for a command in a list: `enter pop · ring, badge`. */
|
|
1988
|
+
declare function motionCommandSummary(command: MotionCommand): string;
|
|
1989
|
+
/** The commands of a shot as a list UI shows them. */
|
|
1990
|
+
declare function motionCommandRows(scene: MotionScene, shotId: string): {
|
|
1991
|
+
flairPrimitive?: string | undefined;
|
|
1992
|
+
index: number;
|
|
1993
|
+
command: MotionCommand;
|
|
1994
|
+
summary: string;
|
|
1995
|
+
start: number;
|
|
1996
|
+
end: number;
|
|
1997
|
+
}[];
|
|
1998
|
+
/** Edits that put a copy of a command right after it. */
|
|
1999
|
+
declare function duplicateMotionCommandEdit(scene: MotionScene, shot: string, command: number): MotionEdit;
|
|
2000
|
+
/** The ease picker's choices: `default` (the command type's own), every preset, then `custom`. */
|
|
2001
|
+
declare const MOTION_EASE_CHOICES: readonly {
|
|
2002
|
+
value: string;
|
|
2003
|
+
label: string;
|
|
2004
|
+
}[];
|
|
2005
|
+
/** The picker value for an easing: `''` for none, the preset name, else `custom`. */
|
|
2006
|
+
declare function motionEaseKey(ease: AnimationEasing | undefined | null): string;
|
|
2007
|
+
interface MotionEasingCurve {
|
|
2008
|
+
/** Samples of the eased value from u = 0 to 1. */
|
|
2009
|
+
points: {
|
|
2010
|
+
u: number;
|
|
2011
|
+
v: number;
|
|
2012
|
+
}[];
|
|
2013
|
+
/** The lowest and highest eased value (below 0 or above 1 when the curve overshoots). */
|
|
2014
|
+
min: number;
|
|
2015
|
+
max: number;
|
|
2016
|
+
/** The length the curve was sampled over: a spring's settle time, else `durationMs`. */
|
|
2017
|
+
durationMs: number;
|
|
2018
|
+
}
|
|
2019
|
+
/** Samples an easing (`evaluateEasing`) for a preview; springs are sampled until they settle. */
|
|
2020
|
+
declare function motionEasingCurve(ease: AnimationEasing | string | undefined | null, samples?: number, durationMs?: number): MotionEasingCurve;
|
|
2021
|
+
/** An SVG path (`d`) of an easing curve in a `width` × `height` box, overshoot included. */
|
|
2022
|
+
declare function motionEasingPath(curve: MotionEasingCurve, width: number, height: number, pad?: number): string;
|
|
2023
|
+
/** Where 0 and 1 fall on a curve preview's y axis (for guide lines). */
|
|
2024
|
+
declare function motionEasingGuides(curve: MotionEasingCurve, height: number, pad?: number): {
|
|
2025
|
+
zero: number;
|
|
2026
|
+
one: number;
|
|
2027
|
+
};
|
|
2028
|
+
interface ElementLike {
|
|
2029
|
+
getAttribute(name: string): string | null;
|
|
2030
|
+
parentElement: ElementLike | null;
|
|
2031
|
+
}
|
|
2032
|
+
/**
|
|
2033
|
+
* The artwork node a click landed on: the nearest element (from `target` up to `root`) whose
|
|
2034
|
+
* id is a node of the scene. Onion-skin ghosts and motion-path overlays carry no node ids, so
|
|
2035
|
+
* clicks on them pick nothing.
|
|
2036
|
+
*/
|
|
2037
|
+
declare function motionNodeAtElement(scene: MotionScene, target: ElementLike | null, root?: ElementLike | null): string | null;
|
|
2038
|
+
/** Marks the nodes `ids` in stage SVG with `data-picked` and outlines them. */
|
|
2039
|
+
declare function highlightMotionSvg(svg: string, ids: readonly string[], color?: string): string;
|
|
2040
|
+
/** Ticks for a time ruler `width` px wide: a step that leaves at least `minGap` px between labels. */
|
|
2041
|
+
declare function motionRulerTicks(duration: number, width: number, minGap?: number): {
|
|
2042
|
+
time: number;
|
|
2043
|
+
label: string;
|
|
2044
|
+
major: boolean;
|
|
2045
|
+
}[];
|
|
2046
|
+
/**
|
|
2047
|
+
* The edits that fit a scene to `ms` (`fitMotionScene`): one `update_shot` per shot whose speed
|
|
2048
|
+
* changes, so applied together they are one undo step. Throws with the reason when it can't fit.
|
|
2049
|
+
*/
|
|
2050
|
+
declare function fitMotionSceneEdits(scene: MotionScene, ms: number, options?: MotionFitOptions): MotionEdit[];
|
|
2051
|
+
/** A cue picker's value for a cue: `beat:4`, `word:2`, `ms:1200` or `''` for none. */
|
|
2052
|
+
declare function motionCueKey(cue: MotionCue | undefined): string;
|
|
2053
|
+
/** The cue a picker value names, or undefined for none. */
|
|
2054
|
+
declare function motionCueFromKey(key: string): MotionCue | undefined;
|
|
2055
|
+
/**
|
|
2056
|
+
* The cues a shot can start on: every beat of the scene's grid up to a little past the end, and
|
|
2057
|
+
* every narration word, each labelled with its time.
|
|
2058
|
+
*/
|
|
2059
|
+
declare function motionCueChoices(scene: MotionScene, limit?: number): {
|
|
2060
|
+
value: string;
|
|
2061
|
+
label: string;
|
|
2062
|
+
time: number;
|
|
2063
|
+
}[];
|
|
2064
|
+
/** When a shot's cue falls (ms), or undefined. */
|
|
2065
|
+
declare function motionShotCueTime(scene: MotionScene, cue: MotionCue | undefined): number | undefined;
|
|
2066
|
+
/** Narration as text, a word a line: `<start ms> <word>`. */
|
|
2067
|
+
declare function formatMotionNarration(narration: MotionNarration | undefined): string;
|
|
2068
|
+
/** Reads narration typed a word a line (`<start ms> <word>`); empty text clears it. */
|
|
2069
|
+
declare function parseMotionNarration(text: string): {
|
|
2070
|
+
narration: MotionNarration | null;
|
|
2071
|
+
} | {
|
|
2072
|
+
error: string;
|
|
2073
|
+
};
|
|
1852
2074
|
|
|
1853
|
-
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 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, toLottie, trackValue, withMotionLayers, withViewBox };
|
|
2075
|
+
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_CHOICES, 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 MotionEasingCurve, type MotionEdit, type MotionEditOp, type MotionEditResult, type MotionEffectCommand, type MotionEnterCommand, type MotionEnterStyle, type MotionExitCommand, type MotionExitStyle, type MotionFadeCommand, type MotionFieldInput, type MotionFieldKind, type MotionFieldSpec, 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, defaultMotionCommand, describeMotionElements, describeMotionShots, duplicateMotionCommandEdit, fitMotionRect, fitMotionScene, fitMotionSceneEdits, flairAtLeast, flairCurveFor, flairEaseFor, formatMotionNarration, freshShotId, fromFlairSvgMotion, fromFlairVectorEffect, highlightMotionSvg, indexMotionNodes, interpolateMotionValue, isMotionCommand, isMotionShot, matchMotionNodes, motionAddTrackKey, motionBeatAt, motionBeatTime, motionClipAttrs, motionCommandDuration, motionCommandFields, motionCommandRepeat, motionCommandRows, motionCommandSummary, motionCueChoices, motionCueFromKey, motionCueKey, motionCueTime, motionCycleDuration, motionEaseKey, motionEasingCurve, motionEasingGuides, motionEasingPath, motionFieldEdit, motionFieldLabel, motionFlairPrimitive, motionFollowRoute, motionFrameAt, motionFrameToSvg, motionGhosts, motionIssue, motionIssueKey, motionIssueLine, motionMovingIds, motionNodeAtElement, motionNodeClips, motionNodeOffset, motionPath, motionPathLength, motionPathsSvg, motionRestValue, motionRevealClip, motionRevealPadding, motionRulerTicks, motionSceneShapeProblems, motionSceneToJson, motionShotAt, motionShotCueTime, motionShotTimeScale, motionStageSvg, motionTrackKey, namedWithSuggestion, parseMotionFieldInput, parseMotionNarration, parseMotionScene, resolveMotionCamera, segmentProgress, segmentValue, shotShapeProblems, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, toLottie, trackValue, withMotionLayers, withViewBox };
|
|
@@ -910,6 +910,77 @@ declare function motionFrameToSvg(scene: MotionScene, time: number, options?: Mo
|
|
|
910
910
|
/** Replaces the root `viewBox` of an SVG string. */
|
|
911
911
|
declare function withViewBox(svg: string, box: MotionRect): string;
|
|
912
912
|
|
|
913
|
+
/**
|
|
914
|
+
* Seeing motion on a still: onion skin (faded frames either side of the playhead) and motion
|
|
915
|
+
* paths (where each node's centre travels). Frames are pure functions of time, so both are just
|
|
916
|
+
* more frames: no state, and the same picture every time.
|
|
917
|
+
*/
|
|
918
|
+
interface MotionOnionSkin {
|
|
919
|
+
/** Ghost frames before the playhead (default 2). */
|
|
920
|
+
before?: number;
|
|
921
|
+
/** Ghost frames after the playhead (default 0). */
|
|
922
|
+
after?: number;
|
|
923
|
+
/**
|
|
924
|
+
* Time between ghosts: ms (default 1000 / 12, every other frame at 24 fps), or `commands` to
|
|
925
|
+
* ghost the moments commands start and end around the playhead.
|
|
926
|
+
*/
|
|
927
|
+
spacing?: number | 'commands';
|
|
928
|
+
/** Opacity of the nearest ghost (default 0.35); further ones fade as 1 / distance. */
|
|
929
|
+
opacity?: number;
|
|
930
|
+
}
|
|
931
|
+
interface MotionGhost {
|
|
932
|
+
time: number;
|
|
933
|
+
/** Negative before the playhead, positive after: 1 is the nearest. */
|
|
934
|
+
offset: number;
|
|
935
|
+
opacity: number;
|
|
936
|
+
}
|
|
937
|
+
/** The ghost frames for a playhead at `time`, nearest first on each side. */
|
|
938
|
+
declare function motionGhosts(scene: MotionScene, time: number, onion?: MotionOnionSkin): MotionGhost[];
|
|
939
|
+
interface MotionPathOptions {
|
|
940
|
+
/** From this time, ms (default 0). */
|
|
941
|
+
from?: number;
|
|
942
|
+
/** To this time, ms (default the end). */
|
|
943
|
+
to?: number;
|
|
944
|
+
/** Time between samples, ms (default 1000 / 30; at most 400 samples). */
|
|
945
|
+
step?: number;
|
|
946
|
+
}
|
|
947
|
+
interface MotionPath {
|
|
948
|
+
id: string;
|
|
949
|
+
/** Where the node's centre is, in document units, sample by sample. */
|
|
950
|
+
points: {
|
|
951
|
+
t: number;
|
|
952
|
+
x: number;
|
|
953
|
+
y: number;
|
|
954
|
+
}[];
|
|
955
|
+
/** Where it is when a change that moves it (or a group it is in) starts or ends. */
|
|
956
|
+
keys: {
|
|
957
|
+
t: number;
|
|
958
|
+
x: number;
|
|
959
|
+
y: number;
|
|
960
|
+
}[];
|
|
961
|
+
}
|
|
962
|
+
/** Ids of the nodes whose place changes (they or a group they are in move, turn, scale, follow or morph). */
|
|
963
|
+
declare function motionMovingIds(scene: MotionScene): string[];
|
|
964
|
+
/** Where a node's centre travels over time (its bounds as drawn, in document units). */
|
|
965
|
+
declare function motionPath(scene: MotionScene, id: string, options?: MotionPathOptions): MotionPath;
|
|
966
|
+
/** 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. */
|
|
967
|
+
declare function motionPathsSvg(paths: readonly MotionPath[], camera: MotionRect, color?: string): string;
|
|
968
|
+
/** What the stage can draw over a frame. */
|
|
969
|
+
interface MotionOverlayOptions {
|
|
970
|
+
/** Faded frames either side of the playhead. */
|
|
971
|
+
onionSkin?: MotionOnionSkin;
|
|
972
|
+
/** Draw where nodes travel: true for every node whose place changes, or a list of ids. */
|
|
973
|
+
motionPaths?: boolean | readonly string[];
|
|
974
|
+
/** Colour of motion paths (default `#f43f5e`). */
|
|
975
|
+
motionPathColor?: string;
|
|
976
|
+
}
|
|
977
|
+
/**
|
|
978
|
+
* The frame at `time` as SVG with overlays: ghost frames under it (each with its own id prefix,
|
|
979
|
+
* element ids dropped so they never clash) and motion paths over it. Without overlays it is
|
|
980
|
+
* `motionFrameToSvg`.
|
|
981
|
+
*/
|
|
982
|
+
declare function motionStageSvg(scene: MotionScene, time: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
|
|
983
|
+
|
|
913
984
|
/** Changes shorter than this (ms) are too quick to follow. */
|
|
914
985
|
declare const MOTION_MIN_CHANGE_MS = 120;
|
|
915
986
|
/**
|
|
@@ -966,6 +1037,11 @@ type MotionEdit = {
|
|
|
966
1037
|
op: 'delete_commands';
|
|
967
1038
|
shot: string;
|
|
968
1039
|
commands: number[];
|
|
1040
|
+
} | {
|
|
1041
|
+
op: 'move_command';
|
|
1042
|
+
shot: string;
|
|
1043
|
+
command: number;
|
|
1044
|
+
to: number;
|
|
969
1045
|
} | {
|
|
970
1046
|
op: 'set_artwork';
|
|
971
1047
|
artwork: VectorDocument;
|
|
@@ -1094,9 +1170,10 @@ interface FlairVectorEffect {
|
|
|
1094
1170
|
category: string;
|
|
1095
1171
|
tags: string[];
|
|
1096
1172
|
motion: FlairSvgMotion;
|
|
1173
|
+
/** Values are `#rrggbb` strings, or `[r, g, b]` channels from 0 to 1 (Flair's catalog writes both); imports turn them into hex. */
|
|
1097
1174
|
presets?: {
|
|
1098
1175
|
name: string;
|
|
1099
|
-
values: Record<string, string>;
|
|
1176
|
+
values: Record<string, string | readonly number[]>;
|
|
1100
1177
|
}[];
|
|
1101
1178
|
/** Ms on the last frame before looping. */
|
|
1102
1179
|
hold?: number;
|
|
@@ -1408,7 +1485,7 @@ declare class AnimationEditorController {
|
|
|
1408
1485
|
/** The scene at `time` (default: the playhead). */
|
|
1409
1486
|
frame(time?: number, options?: MotionFrameOptions): MotionFrame;
|
|
1410
1487
|
/** The scene at `time` (default: the playhead) as SVG. */
|
|
1411
|
-
toSvg(time?: number, options?: MotionSvgOptions): string;
|
|
1488
|
+
toSvg(time?: number, options?: MotionSvgOptions & MotionOverlayOptions): string;
|
|
1412
1489
|
/** The scene as a Flair `SvgMotion`. */
|
|
1413
1490
|
toFlairMotion(options?: FlairExportOptions): FlairMotionExport;
|
|
1414
1491
|
/** The scene as a Flair catalog vector effect. */
|
|
@@ -1848,6 +1925,151 @@ declare function createAnimationEditorToolProvider(controller: AnimationEditorCo
|
|
|
1848
1925
|
* A short authoring guide for a model writing vector animations with the animation editor's
|
|
1849
1926
|
* tools. Static, so it caches well as part of a system prompt.
|
|
1850
1927
|
*/
|
|
1851
|
-
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.";
|
|
1928
|
+
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 (add_commands, update_command, move_command and delete_commands refine a shot), 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.";
|
|
1929
|
+
|
|
1930
|
+
/**
|
|
1931
|
+
* Helpers for hand-editing UIs (React's and Svelte's command inspector, ease picker, cue picker,
|
|
1932
|
+
* scrubber and stage picking). They hold the logic both bindings share, so the components stay
|
|
1933
|
+
* thin and alike. The command form is generated from `MOTION_COMMAND_SCHEMA`, the same schema
|
|
1934
|
+
* the agent tools take, so people and agents see the same fields, limits and descriptions.
|
|
1935
|
+
*/
|
|
1936
|
+
/** How a command field is edited. */
|
|
1937
|
+
type MotionFieldKind = 'targets' | 'node' | 'enum' | 'number' | 'integer' | 'boolean' | 'text' | 'color' | 'point' | 'scale' | 'ease';
|
|
1938
|
+
interface MotionFieldSpec {
|
|
1939
|
+
name: string;
|
|
1940
|
+
kind: MotionFieldKind;
|
|
1941
|
+
label: string;
|
|
1942
|
+
description: string;
|
|
1943
|
+
required: boolean;
|
|
1944
|
+
/** For `enum`. */
|
|
1945
|
+
options?: readonly string[];
|
|
1946
|
+
min?: number;
|
|
1947
|
+
max?: number;
|
|
1948
|
+
/** Unit shown next to a number: `ms`, `units`, `°`, `Hz`, `fps`, `×` or `0–1`. */
|
|
1949
|
+
unit?: string;
|
|
1950
|
+
/** `main` (what it does) or `timing` (when and how fast). */
|
|
1951
|
+
group: 'main' | 'timing';
|
|
1952
|
+
}
|
|
1953
|
+
/** `repeatMode` → `Repeat mode`. */
|
|
1954
|
+
declare function motionFieldLabel(name: string): string;
|
|
1955
|
+
/**
|
|
1956
|
+
* The fields a command type takes, in schema order (main fields first, then timing), each with
|
|
1957
|
+
* how to edit it, its limits and unit. Generated from `MOTION_COMMAND_SCHEMA`.
|
|
1958
|
+
*/
|
|
1959
|
+
declare function motionCommandFields(type: MotionCommandType): MotionFieldSpec[];
|
|
1960
|
+
type MotionFieldInput = {
|
|
1961
|
+
set: unknown;
|
|
1962
|
+
} | {
|
|
1963
|
+
remove: true;
|
|
1964
|
+
} | {
|
|
1965
|
+
error: string;
|
|
1966
|
+
};
|
|
1967
|
+
/**
|
|
1968
|
+
* Turns what a person typed into a field into a value to `set`, a field to `remove` (an empty
|
|
1969
|
+
* optional field) or an `error` to show. Numbers are checked against the field's limits.
|
|
1970
|
+
*/
|
|
1971
|
+
declare function parseMotionFieldInput(field: MotionFieldSpec, raw: string | boolean | readonly string[] | {
|
|
1972
|
+
x: string;
|
|
1973
|
+
y: string;
|
|
1974
|
+
}): MotionFieldInput;
|
|
1975
|
+
/** The `update_command` edit for one field input, or the error to show. */
|
|
1976
|
+
declare function motionFieldEdit(shot: string, command: number, field: MotionFieldSpec, raw: Parameters<typeof parseMotionFieldInput>[1]): MotionEdit | {
|
|
1977
|
+
error: string;
|
|
1978
|
+
};
|
|
1979
|
+
/**
|
|
1980
|
+
* A new command of `type` on `targets`, with its required fields filled from the artwork (the
|
|
1981
|
+
* first hidden shape to morph into, the first path to follow, the first effect parameter to
|
|
1982
|
+
* tween). Returns an error when the artwork has nothing to fill one with.
|
|
1983
|
+
*/
|
|
1984
|
+
declare function defaultMotionCommand(type: MotionCommandType, targets: readonly string[], scene: MotionScene): MotionCommand | {
|
|
1985
|
+
error: string;
|
|
1986
|
+
};
|
|
1987
|
+
/** A short line for a command in a list: `enter pop · ring, badge`. */
|
|
1988
|
+
declare function motionCommandSummary(command: MotionCommand): string;
|
|
1989
|
+
/** The commands of a shot as a list UI shows them. */
|
|
1990
|
+
declare function motionCommandRows(scene: MotionScene, shotId: string): {
|
|
1991
|
+
flairPrimitive?: string | undefined;
|
|
1992
|
+
index: number;
|
|
1993
|
+
command: MotionCommand;
|
|
1994
|
+
summary: string;
|
|
1995
|
+
start: number;
|
|
1996
|
+
end: number;
|
|
1997
|
+
}[];
|
|
1998
|
+
/** Edits that put a copy of a command right after it. */
|
|
1999
|
+
declare function duplicateMotionCommandEdit(scene: MotionScene, shot: string, command: number): MotionEdit;
|
|
2000
|
+
/** The ease picker's choices: `default` (the command type's own), every preset, then `custom`. */
|
|
2001
|
+
declare const MOTION_EASE_CHOICES: readonly {
|
|
2002
|
+
value: string;
|
|
2003
|
+
label: string;
|
|
2004
|
+
}[];
|
|
2005
|
+
/** The picker value for an easing: `''` for none, the preset name, else `custom`. */
|
|
2006
|
+
declare function motionEaseKey(ease: AnimationEasing | undefined | null): string;
|
|
2007
|
+
interface MotionEasingCurve {
|
|
2008
|
+
/** Samples of the eased value from u = 0 to 1. */
|
|
2009
|
+
points: {
|
|
2010
|
+
u: number;
|
|
2011
|
+
v: number;
|
|
2012
|
+
}[];
|
|
2013
|
+
/** The lowest and highest eased value (below 0 or above 1 when the curve overshoots). */
|
|
2014
|
+
min: number;
|
|
2015
|
+
max: number;
|
|
2016
|
+
/** The length the curve was sampled over: a spring's settle time, else `durationMs`. */
|
|
2017
|
+
durationMs: number;
|
|
2018
|
+
}
|
|
2019
|
+
/** Samples an easing (`evaluateEasing`) for a preview; springs are sampled until they settle. */
|
|
2020
|
+
declare function motionEasingCurve(ease: AnimationEasing | string | undefined | null, samples?: number, durationMs?: number): MotionEasingCurve;
|
|
2021
|
+
/** An SVG path (`d`) of an easing curve in a `width` × `height` box, overshoot included. */
|
|
2022
|
+
declare function motionEasingPath(curve: MotionEasingCurve, width: number, height: number, pad?: number): string;
|
|
2023
|
+
/** Where 0 and 1 fall on a curve preview's y axis (for guide lines). */
|
|
2024
|
+
declare function motionEasingGuides(curve: MotionEasingCurve, height: number, pad?: number): {
|
|
2025
|
+
zero: number;
|
|
2026
|
+
one: number;
|
|
2027
|
+
};
|
|
2028
|
+
interface ElementLike {
|
|
2029
|
+
getAttribute(name: string): string | null;
|
|
2030
|
+
parentElement: ElementLike | null;
|
|
2031
|
+
}
|
|
2032
|
+
/**
|
|
2033
|
+
* The artwork node a click landed on: the nearest element (from `target` up to `root`) whose
|
|
2034
|
+
* id is a node of the scene. Onion-skin ghosts and motion-path overlays carry no node ids, so
|
|
2035
|
+
* clicks on them pick nothing.
|
|
2036
|
+
*/
|
|
2037
|
+
declare function motionNodeAtElement(scene: MotionScene, target: ElementLike | null, root?: ElementLike | null): string | null;
|
|
2038
|
+
/** Marks the nodes `ids` in stage SVG with `data-picked` and outlines them. */
|
|
2039
|
+
declare function highlightMotionSvg(svg: string, ids: readonly string[], color?: string): string;
|
|
2040
|
+
/** Ticks for a time ruler `width` px wide: a step that leaves at least `minGap` px between labels. */
|
|
2041
|
+
declare function motionRulerTicks(duration: number, width: number, minGap?: number): {
|
|
2042
|
+
time: number;
|
|
2043
|
+
label: string;
|
|
2044
|
+
major: boolean;
|
|
2045
|
+
}[];
|
|
2046
|
+
/**
|
|
2047
|
+
* The edits that fit a scene to `ms` (`fitMotionScene`): one `update_shot` per shot whose speed
|
|
2048
|
+
* changes, so applied together they are one undo step. Throws with the reason when it can't fit.
|
|
2049
|
+
*/
|
|
2050
|
+
declare function fitMotionSceneEdits(scene: MotionScene, ms: number, options?: MotionFitOptions): MotionEdit[];
|
|
2051
|
+
/** A cue picker's value for a cue: `beat:4`, `word:2`, `ms:1200` or `''` for none. */
|
|
2052
|
+
declare function motionCueKey(cue: MotionCue | undefined): string;
|
|
2053
|
+
/** The cue a picker value names, or undefined for none. */
|
|
2054
|
+
declare function motionCueFromKey(key: string): MotionCue | undefined;
|
|
2055
|
+
/**
|
|
2056
|
+
* The cues a shot can start on: every beat of the scene's grid up to a little past the end, and
|
|
2057
|
+
* every narration word, each labelled with its time.
|
|
2058
|
+
*/
|
|
2059
|
+
declare function motionCueChoices(scene: MotionScene, limit?: number): {
|
|
2060
|
+
value: string;
|
|
2061
|
+
label: string;
|
|
2062
|
+
time: number;
|
|
2063
|
+
}[];
|
|
2064
|
+
/** When a shot's cue falls (ms), or undefined. */
|
|
2065
|
+
declare function motionShotCueTime(scene: MotionScene, cue: MotionCue | undefined): number | undefined;
|
|
2066
|
+
/** Narration as text, a word a line: `<start ms> <word>`. */
|
|
2067
|
+
declare function formatMotionNarration(narration: MotionNarration | undefined): string;
|
|
2068
|
+
/** Reads narration typed a word a line (`<start ms> <word>`); empty text clears it. */
|
|
2069
|
+
declare function parseMotionNarration(text: string): {
|
|
2070
|
+
narration: MotionNarration | null;
|
|
2071
|
+
} | {
|
|
2072
|
+
error: string;
|
|
2073
|
+
};
|
|
1852
2074
|
|
|
1853
|
-
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 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, toLottie, trackValue, withMotionLayers, withViewBox };
|
|
2075
|
+
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_CHOICES, 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 MotionEasingCurve, type MotionEdit, type MotionEditOp, type MotionEditResult, type MotionEffectCommand, type MotionEnterCommand, type MotionEnterStyle, type MotionExitCommand, type MotionExitStyle, type MotionFadeCommand, type MotionFieldInput, type MotionFieldKind, type MotionFieldSpec, 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, defaultMotionCommand, describeMotionElements, describeMotionShots, duplicateMotionCommandEdit, fitMotionRect, fitMotionScene, fitMotionSceneEdits, flairAtLeast, flairCurveFor, flairEaseFor, formatMotionNarration, freshShotId, fromFlairSvgMotion, fromFlairVectorEffect, highlightMotionSvg, indexMotionNodes, interpolateMotionValue, isMotionCommand, isMotionShot, matchMotionNodes, motionAddTrackKey, motionBeatAt, motionBeatTime, motionClipAttrs, motionCommandDuration, motionCommandFields, motionCommandRepeat, motionCommandRows, motionCommandSummary, motionCueChoices, motionCueFromKey, motionCueKey, motionCueTime, motionCycleDuration, motionEaseKey, motionEasingCurve, motionEasingGuides, motionEasingPath, motionFieldEdit, motionFieldLabel, motionFlairPrimitive, motionFollowRoute, motionFrameAt, motionFrameToSvg, motionGhosts, motionIssue, motionIssueKey, motionIssueLine, motionMovingIds, motionNodeAtElement, motionNodeClips, motionNodeOffset, motionPath, motionPathLength, motionPathsSvg, motionRestValue, motionRevealClip, motionRevealPadding, motionRulerTicks, motionSceneShapeProblems, motionSceneToJson, motionShotAt, motionShotCueTime, motionShotTimeScale, motionStageSvg, motionTrackKey, namedWithSuggestion, parseMotionFieldInput, parseMotionNarration, parseMotionScene, resolveMotionCamera, segmentProgress, segmentValue, shotShapeProblems, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, toLottie, trackValue, withMotionLayers, withViewBox };
|