@pixerate/editor 0.67.1 → 0.69.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 +290 -46
- package/dist/animation-editor/index.cjs.map +1 -1
- package/dist/animation-editor/index.d.cts +102 -3
- package/dist/animation-editor/index.d.ts +102 -3
- package/dist/animation-editor/index.js +248 -4
- package/dist/animation-editor/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -51,6 +51,11 @@ interface MotionScene {
|
|
|
51
51
|
narration?: MotionNarration;
|
|
52
52
|
/** Wanted length in seconds `[min, max]`; `check` warns outside it. */
|
|
53
53
|
target?: [number, number];
|
|
54
|
+
/**
|
|
55
|
+
* Reusable motion: named command lists written against the target `"$"`, played on any
|
|
56
|
+
* node with a `play` command (a "pop and settle" or "attention" you use many times).
|
|
57
|
+
*/
|
|
58
|
+
clips?: Record<string, MotionClip>;
|
|
54
59
|
/** Parameters a Flair effect made from this scene exposes (see `toFlairVectorEffect`). */
|
|
55
60
|
controls?: MotionControl[];
|
|
56
61
|
/** Named sets of control values. */
|
|
@@ -227,6 +232,16 @@ interface MotionMoveCommand extends MotionCommandBase {
|
|
|
227
232
|
x: number;
|
|
228
233
|
y: number;
|
|
229
234
|
};
|
|
235
|
+
/**
|
|
236
|
+
* Points (document units) the centre passes through on the way, in order. The path is
|
|
237
|
+
* smooth (velocity carries through each point) and never overshoots a point.
|
|
238
|
+
*/
|
|
239
|
+
via?: {
|
|
240
|
+
x: number;
|
|
241
|
+
y: number;
|
|
242
|
+
}[];
|
|
243
|
+
/** With `via`: `even` (default) keeps the speed steady along the path, `equal` gives each leg the same time. */
|
|
244
|
+
pacing?: 'even' | 'equal';
|
|
230
245
|
}
|
|
231
246
|
/** Turns targets about their centre, by or to an angle in degrees (clockwise). */
|
|
232
247
|
interface MotionRotateCommand extends MotionCommandBase {
|
|
@@ -286,6 +301,22 @@ interface MotionMatchCommand extends MotionCommandBase {
|
|
|
286
301
|
/** Id of the group (or node) to become. */
|
|
287
302
|
into: string;
|
|
288
303
|
}
|
|
304
|
+
/** A reusable piece of motion: commands that target `"$"` (whatever `play` names), timed as in a shot. */
|
|
305
|
+
interface MotionClip {
|
|
306
|
+
description?: string;
|
|
307
|
+
/** Commands, timed as in a shot; `"$"` in `targets` stands for the node played on. Clips cannot play clips. */
|
|
308
|
+
run: MotionCommand[];
|
|
309
|
+
}
|
|
310
|
+
/** The placeholder target in a clip's commands. */
|
|
311
|
+
declare const MOTION_CLIP_TARGET = "$";
|
|
312
|
+
/** Plays a clip (`scene.clips`) on the targets: its commands, with `"$"` standing for each target. */
|
|
313
|
+
interface MotionPlayCommand extends MotionCommandBase {
|
|
314
|
+
type: 'play';
|
|
315
|
+
/** The clip's name. */
|
|
316
|
+
clip: string;
|
|
317
|
+
/** Play it this many times as fast (default 1). */
|
|
318
|
+
speed?: number;
|
|
319
|
+
}
|
|
289
320
|
/** Moves targets along a path node, centre on the path. */
|
|
290
321
|
interface MotionFollowCommand extends MotionCommandBase {
|
|
291
322
|
type: 'follow';
|
|
@@ -409,7 +440,7 @@ interface MotionWaitCommand {
|
|
|
409
440
|
with?: 'after' | 'previous';
|
|
410
441
|
note?: string;
|
|
411
442
|
}
|
|
412
|
-
type MotionCommand = MotionEnterCommand | MotionExitCommand | MotionDrawCommand | MotionMoveCommand | MotionRotateCommand | MotionScaleCommand | MotionFadeCommand | MotionStyleCommand | MotionMorphCommand | MotionMatchCommand | MotionFollowCommand | MotionPulseCommand | MotionShakeCommand | MotionTeeterCommand | MotionWaveCommand | MotionWiggleCommand | MotionColorPulseCommand | MotionEffectCommand | MotionWaitCommand;
|
|
443
|
+
type MotionCommand = MotionEnterCommand | MotionExitCommand | MotionDrawCommand | MotionMoveCommand | MotionRotateCommand | MotionScaleCommand | MotionFadeCommand | MotionStyleCommand | MotionMorphCommand | MotionMatchCommand | MotionPlayCommand | MotionFollowCommand | MotionPulseCommand | MotionShakeCommand | MotionTeeterCommand | MotionWaveCommand | MotionWiggleCommand | MotionColorPulseCommand | MotionEffectCommand | MotionWaitCommand;
|
|
413
444
|
type MotionCommandType = MotionCommand['type'];
|
|
414
445
|
declare const MOTION_COMMAND_TYPES: readonly MotionCommandType[];
|
|
415
446
|
declare const MOTION_ENTER_STYLES: readonly MotionEnterStyle[];
|
|
@@ -484,6 +515,10 @@ declare const MOTION_ISSUE_CODES: {
|
|
|
484
515
|
readonly severity: "warning";
|
|
485
516
|
readonly wording: "A wipe, iris or split cannot clip a node with no width or height (a lone straight line), so it fades instead.";
|
|
486
517
|
};
|
|
518
|
+
readonly 'unknown-clip': {
|
|
519
|
+
readonly severity: "error";
|
|
520
|
+
readonly wording: "A play command names a clip the scene does not have.";
|
|
521
|
+
};
|
|
487
522
|
readonly 'unknown-shape': {
|
|
488
523
|
readonly severity: "error";
|
|
489
524
|
readonly wording: "A morph names a shape the artwork does not have.";
|
|
@@ -621,6 +656,8 @@ declare class MotionSceneFormatError extends Error {
|
|
|
621
656
|
}
|
|
622
657
|
/** Problems with one command's shape (empty when well formed). `where` prefixes each. */
|
|
623
658
|
declare function commandShapeProblems(command: unknown, where: string): string[];
|
|
659
|
+
/** Problems with a scene's `clips`: names, and each clip's commands (which may target `"$"` but not play clips). */
|
|
660
|
+
declare function clipsShapeProblems(clips: unknown): string[];
|
|
624
661
|
/** Problems with one shot's shape. */
|
|
625
662
|
declare function shotShapeProblems(shot: unknown, where: string): string[];
|
|
626
663
|
/** Problems with a scene's shape (empty when well formed). */
|
|
@@ -822,6 +859,20 @@ declare function motionCueTime(scene: Pick<MotionScene, 'beat' | 'narration'>, c
|
|
|
822
859
|
declare function motionCommandRepeat(command: MotionCommand): number;
|
|
823
860
|
/** How long one target of a command takes (ms), every repeat included. */
|
|
824
861
|
declare function motionCommandDuration(command: MotionCommand, scene: MotionScene, target?: string): number;
|
|
862
|
+
/** One command of a clip played on a target: when it starts (ms from the play's start), its target and one cycle's length. */
|
|
863
|
+
interface MotionClipItem {
|
|
864
|
+
command: Exclude<MotionCommand, {
|
|
865
|
+
type: 'wait';
|
|
866
|
+
}>;
|
|
867
|
+
target: string;
|
|
868
|
+
start: number;
|
|
869
|
+
cycle: number;
|
|
870
|
+
}
|
|
871
|
+
/** A clip's commands for `target` (`"$"` replaced), timed as in a shot from 0 at `speed`; unknown clips give nothing. */
|
|
872
|
+
declare function motionClipLayout(scene: MotionScene, clip: string, target: string, speed?: number): {
|
|
873
|
+
items: MotionClipItem[];
|
|
874
|
+
length: number;
|
|
875
|
+
};
|
|
825
876
|
/** How long one cycle of a command takes for one target (ms): its `duration`, a spring's settle time, the line's length for a draw, or the type's default. */
|
|
826
877
|
declare function motionCycleDuration(command: MotionCommand, scene: MotionScene, target?: string): number;
|
|
827
878
|
/** Cubic ease-out, `1 − (1 − t)³` exactly (Flair's `out`): the default for things arriving. */
|
|
@@ -854,6 +905,27 @@ interface MotionMatch {
|
|
|
854
905
|
*/
|
|
855
906
|
declare function matchMotionNodes(from: VectorNode, into: VectorNode): MotionMatch;
|
|
856
907
|
|
|
908
|
+
/** One leg of a smooth path on one axis: from → to over [start, end] (ms), eased so velocity carries across legs. */
|
|
909
|
+
interface MotionSmoothLeg {
|
|
910
|
+
start: number;
|
|
911
|
+
end: number;
|
|
912
|
+
from: number;
|
|
913
|
+
to: number;
|
|
914
|
+
ease: AnimationEasing;
|
|
915
|
+
}
|
|
916
|
+
/**
|
|
917
|
+
* A value passing through `values` at `times` (ms) with continuous velocity and no overshoot:
|
|
918
|
+
* a monotone cubic (Fritsch–Carlson) whose slopes are zero at the ends, at turning points and on
|
|
919
|
+
* flat stretches, so it never goes past a waypoint. Each leg is one cubic-bezier ease per axis;
|
|
920
|
+
* x and y ease differently, so exports to Flair or Lottie (one ease per transform) sample them.
|
|
921
|
+
*/
|
|
922
|
+
declare function smoothMotionLegs(times: readonly number[], values: readonly number[]): MotionSmoothLeg[];
|
|
923
|
+
/** When each point of a path is reached over `duration` (ms): in proportion to distance (`even`) or a leg each (`equal`). */
|
|
924
|
+
declare function smoothMotionTimes(points: readonly {
|
|
925
|
+
x: number;
|
|
926
|
+
y: number;
|
|
927
|
+
}[], start: number, duration: number, pacing?: 'even' | 'equal'): number[];
|
|
928
|
+
|
|
857
929
|
/**
|
|
858
930
|
* A reveal clip (`wipe`, `iris`, `split`) in the units of the node's own box: 0–1 across it,
|
|
859
931
|
* as SVG's `clipPathUnits="objectBoundingBox"` and Flair's clip reveals are.
|
|
@@ -1074,6 +1146,10 @@ type MotionEdit = {
|
|
|
1074
1146
|
op: 'set_controls';
|
|
1075
1147
|
controls: MotionControl[];
|
|
1076
1148
|
presets?: MotionPreset[];
|
|
1149
|
+
} | {
|
|
1150
|
+
op: 'set_clip';
|
|
1151
|
+
name: string;
|
|
1152
|
+
clip: MotionClip | null;
|
|
1077
1153
|
} | {
|
|
1078
1154
|
op: 'replace_scene';
|
|
1079
1155
|
scene: MotionScene;
|
|
@@ -1650,6 +1726,11 @@ declare function describeMotionShots(scene: MotionScene): {
|
|
|
1650
1726
|
x: number;
|
|
1651
1727
|
y: number;
|
|
1652
1728
|
};
|
|
1729
|
+
via?: {
|
|
1730
|
+
x: number;
|
|
1731
|
+
y: number;
|
|
1732
|
+
}[];
|
|
1733
|
+
pacing?: "even" | "equal";
|
|
1653
1734
|
targets: string[];
|
|
1654
1735
|
duration?: number;
|
|
1655
1736
|
delay?: number;
|
|
@@ -1772,6 +1853,24 @@ declare function describeMotionShots(scene: MotionScene): {
|
|
|
1772
1853
|
repeatMode?: "loop" | "mirror" | "offset";
|
|
1773
1854
|
steps?: number;
|
|
1774
1855
|
index: number;
|
|
1856
|
+
} | {
|
|
1857
|
+
flairPrimitive?: string | undefined;
|
|
1858
|
+
start: number;
|
|
1859
|
+
end: number;
|
|
1860
|
+
type: "play";
|
|
1861
|
+
clip: string;
|
|
1862
|
+
speed?: number;
|
|
1863
|
+
targets: string[];
|
|
1864
|
+
duration?: number;
|
|
1865
|
+
delay?: number;
|
|
1866
|
+
stagger?: number;
|
|
1867
|
+
with?: "after" | "previous";
|
|
1868
|
+
ease?: AnimationEasing;
|
|
1869
|
+
note?: string;
|
|
1870
|
+
repeat?: number;
|
|
1871
|
+
repeatMode?: "loop" | "mirror" | "offset";
|
|
1872
|
+
steps?: number;
|
|
1873
|
+
index: number;
|
|
1775
1874
|
} | {
|
|
1776
1875
|
flairPrimitive?: string | undefined;
|
|
1777
1876
|
start: number;
|
|
@@ -1961,7 +2060,7 @@ declare function createAnimationEditorToolProvider(controller: AnimationEditorCo
|
|
|
1961
2060
|
* A short authoring guide for a model writing vector animations with the animation editor's
|
|
1962
2061
|
* tools. Static, so it caches well as part of a system prompt.
|
|
1963
2062
|
*/
|
|
1964
|
-
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.\n- For something the viewer plays (a button, a toggle, a step-by-step explainer), set \"trigger\" with set_animation_settings: click plays the next shot on each click and then starts over (make the last shot put things back for a toggle), hover or press plays and rewinds, scroll scrubs.\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.";
|
|
2063
|
+
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- Reuse motion: set_animation_clip defines a clip (commands targeting \"$\"), and { \"type\": \"play\", \"clip\": name, \"targets\": [...] } plays it on any nodes (with stagger and speed). copy_animation gives other nodes one node's motion.\n- move takes \"via\" waypoints for a curved, smooth path that passes exactly through each point (steady speed by default); use it instead of chaining moves, which stop at each point.\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.\n- For something the viewer plays (a button, a toggle, a step-by-step explainer), set \"trigger\" with set_animation_settings: click plays the next shot on each click and then starts over (make the last shot put things back for a toggle), hover or press plays and rewinds, scroll scrubs.\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.";
|
|
1965
2064
|
|
|
1966
2065
|
/**
|
|
1967
2066
|
* Helpers for hand-editing UIs (React's and Svelte's command inspector, ease picker, cue picker,
|
|
@@ -2108,4 +2207,4 @@ declare function parseMotionNarration(text: string): {
|
|
|
2108
2207
|
error: string;
|
|
2109
2208
|
};
|
|
2110
2209
|
|
|
2111
|
-
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, MOTION_TRIGGERS, 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 MotionTrigger, 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 };
|
|
2210
|
+
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_CLIP_TARGET, 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, MOTION_TRIGGERS, type MotionBeatGrid, type MotionCamera, type MotionClip, type MotionClipItem, 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 MotionPlayCommand, 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 MotionSmoothLeg, type MotionSplitOrientation, type MotionStyleCommand, type MotionSvgOptions, type MotionTeeterCommand, type MotionTimeline, type MotionTrigger, type MotionValue, type MotionWaitCommand, type MotionWaveCommand, type MotionWiggleCommand, activeSegment, applyMotionControlValues, applyMotionEdits, checkMotionScene, clipsShapeProblems, 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, motionClipLayout, 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, smoothMotionLegs, smoothMotionTimes, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, toLottie, trackValue, withMotionLayers, withViewBox };
|
|
@@ -51,6 +51,11 @@ interface MotionScene {
|
|
|
51
51
|
narration?: MotionNarration;
|
|
52
52
|
/** Wanted length in seconds `[min, max]`; `check` warns outside it. */
|
|
53
53
|
target?: [number, number];
|
|
54
|
+
/**
|
|
55
|
+
* Reusable motion: named command lists written against the target `"$"`, played on any
|
|
56
|
+
* node with a `play` command (a "pop and settle" or "attention" you use many times).
|
|
57
|
+
*/
|
|
58
|
+
clips?: Record<string, MotionClip>;
|
|
54
59
|
/** Parameters a Flair effect made from this scene exposes (see `toFlairVectorEffect`). */
|
|
55
60
|
controls?: MotionControl[];
|
|
56
61
|
/** Named sets of control values. */
|
|
@@ -227,6 +232,16 @@ interface MotionMoveCommand extends MotionCommandBase {
|
|
|
227
232
|
x: number;
|
|
228
233
|
y: number;
|
|
229
234
|
};
|
|
235
|
+
/**
|
|
236
|
+
* Points (document units) the centre passes through on the way, in order. The path is
|
|
237
|
+
* smooth (velocity carries through each point) and never overshoots a point.
|
|
238
|
+
*/
|
|
239
|
+
via?: {
|
|
240
|
+
x: number;
|
|
241
|
+
y: number;
|
|
242
|
+
}[];
|
|
243
|
+
/** With `via`: `even` (default) keeps the speed steady along the path, `equal` gives each leg the same time. */
|
|
244
|
+
pacing?: 'even' | 'equal';
|
|
230
245
|
}
|
|
231
246
|
/** Turns targets about their centre, by or to an angle in degrees (clockwise). */
|
|
232
247
|
interface MotionRotateCommand extends MotionCommandBase {
|
|
@@ -286,6 +301,22 @@ interface MotionMatchCommand extends MotionCommandBase {
|
|
|
286
301
|
/** Id of the group (or node) to become. */
|
|
287
302
|
into: string;
|
|
288
303
|
}
|
|
304
|
+
/** A reusable piece of motion: commands that target `"$"` (whatever `play` names), timed as in a shot. */
|
|
305
|
+
interface MotionClip {
|
|
306
|
+
description?: string;
|
|
307
|
+
/** Commands, timed as in a shot; `"$"` in `targets` stands for the node played on. Clips cannot play clips. */
|
|
308
|
+
run: MotionCommand[];
|
|
309
|
+
}
|
|
310
|
+
/** The placeholder target in a clip's commands. */
|
|
311
|
+
declare const MOTION_CLIP_TARGET = "$";
|
|
312
|
+
/** Plays a clip (`scene.clips`) on the targets: its commands, with `"$"` standing for each target. */
|
|
313
|
+
interface MotionPlayCommand extends MotionCommandBase {
|
|
314
|
+
type: 'play';
|
|
315
|
+
/** The clip's name. */
|
|
316
|
+
clip: string;
|
|
317
|
+
/** Play it this many times as fast (default 1). */
|
|
318
|
+
speed?: number;
|
|
319
|
+
}
|
|
289
320
|
/** Moves targets along a path node, centre on the path. */
|
|
290
321
|
interface MotionFollowCommand extends MotionCommandBase {
|
|
291
322
|
type: 'follow';
|
|
@@ -409,7 +440,7 @@ interface MotionWaitCommand {
|
|
|
409
440
|
with?: 'after' | 'previous';
|
|
410
441
|
note?: string;
|
|
411
442
|
}
|
|
412
|
-
type MotionCommand = MotionEnterCommand | MotionExitCommand | MotionDrawCommand | MotionMoveCommand | MotionRotateCommand | MotionScaleCommand | MotionFadeCommand | MotionStyleCommand | MotionMorphCommand | MotionMatchCommand | MotionFollowCommand | MotionPulseCommand | MotionShakeCommand | MotionTeeterCommand | MotionWaveCommand | MotionWiggleCommand | MotionColorPulseCommand | MotionEffectCommand | MotionWaitCommand;
|
|
443
|
+
type MotionCommand = MotionEnterCommand | MotionExitCommand | MotionDrawCommand | MotionMoveCommand | MotionRotateCommand | MotionScaleCommand | MotionFadeCommand | MotionStyleCommand | MotionMorphCommand | MotionMatchCommand | MotionPlayCommand | MotionFollowCommand | MotionPulseCommand | MotionShakeCommand | MotionTeeterCommand | MotionWaveCommand | MotionWiggleCommand | MotionColorPulseCommand | MotionEffectCommand | MotionWaitCommand;
|
|
413
444
|
type MotionCommandType = MotionCommand['type'];
|
|
414
445
|
declare const MOTION_COMMAND_TYPES: readonly MotionCommandType[];
|
|
415
446
|
declare const MOTION_ENTER_STYLES: readonly MotionEnterStyle[];
|
|
@@ -484,6 +515,10 @@ declare const MOTION_ISSUE_CODES: {
|
|
|
484
515
|
readonly severity: "warning";
|
|
485
516
|
readonly wording: "A wipe, iris or split cannot clip a node with no width or height (a lone straight line), so it fades instead.";
|
|
486
517
|
};
|
|
518
|
+
readonly 'unknown-clip': {
|
|
519
|
+
readonly severity: "error";
|
|
520
|
+
readonly wording: "A play command names a clip the scene does not have.";
|
|
521
|
+
};
|
|
487
522
|
readonly 'unknown-shape': {
|
|
488
523
|
readonly severity: "error";
|
|
489
524
|
readonly wording: "A morph names a shape the artwork does not have.";
|
|
@@ -621,6 +656,8 @@ declare class MotionSceneFormatError extends Error {
|
|
|
621
656
|
}
|
|
622
657
|
/** Problems with one command's shape (empty when well formed). `where` prefixes each. */
|
|
623
658
|
declare function commandShapeProblems(command: unknown, where: string): string[];
|
|
659
|
+
/** Problems with a scene's `clips`: names, and each clip's commands (which may target `"$"` but not play clips). */
|
|
660
|
+
declare function clipsShapeProblems(clips: unknown): string[];
|
|
624
661
|
/** Problems with one shot's shape. */
|
|
625
662
|
declare function shotShapeProblems(shot: unknown, where: string): string[];
|
|
626
663
|
/** Problems with a scene's shape (empty when well formed). */
|
|
@@ -822,6 +859,20 @@ declare function motionCueTime(scene: Pick<MotionScene, 'beat' | 'narration'>, c
|
|
|
822
859
|
declare function motionCommandRepeat(command: MotionCommand): number;
|
|
823
860
|
/** How long one target of a command takes (ms), every repeat included. */
|
|
824
861
|
declare function motionCommandDuration(command: MotionCommand, scene: MotionScene, target?: string): number;
|
|
862
|
+
/** One command of a clip played on a target: when it starts (ms from the play's start), its target and one cycle's length. */
|
|
863
|
+
interface MotionClipItem {
|
|
864
|
+
command: Exclude<MotionCommand, {
|
|
865
|
+
type: 'wait';
|
|
866
|
+
}>;
|
|
867
|
+
target: string;
|
|
868
|
+
start: number;
|
|
869
|
+
cycle: number;
|
|
870
|
+
}
|
|
871
|
+
/** A clip's commands for `target` (`"$"` replaced), timed as in a shot from 0 at `speed`; unknown clips give nothing. */
|
|
872
|
+
declare function motionClipLayout(scene: MotionScene, clip: string, target: string, speed?: number): {
|
|
873
|
+
items: MotionClipItem[];
|
|
874
|
+
length: number;
|
|
875
|
+
};
|
|
825
876
|
/** How long one cycle of a command takes for one target (ms): its `duration`, a spring's settle time, the line's length for a draw, or the type's default. */
|
|
826
877
|
declare function motionCycleDuration(command: MotionCommand, scene: MotionScene, target?: string): number;
|
|
827
878
|
/** Cubic ease-out, `1 − (1 − t)³` exactly (Flair's `out`): the default for things arriving. */
|
|
@@ -854,6 +905,27 @@ interface MotionMatch {
|
|
|
854
905
|
*/
|
|
855
906
|
declare function matchMotionNodes(from: VectorNode, into: VectorNode): MotionMatch;
|
|
856
907
|
|
|
908
|
+
/** One leg of a smooth path on one axis: from → to over [start, end] (ms), eased so velocity carries across legs. */
|
|
909
|
+
interface MotionSmoothLeg {
|
|
910
|
+
start: number;
|
|
911
|
+
end: number;
|
|
912
|
+
from: number;
|
|
913
|
+
to: number;
|
|
914
|
+
ease: AnimationEasing;
|
|
915
|
+
}
|
|
916
|
+
/**
|
|
917
|
+
* A value passing through `values` at `times` (ms) with continuous velocity and no overshoot:
|
|
918
|
+
* a monotone cubic (Fritsch–Carlson) whose slopes are zero at the ends, at turning points and on
|
|
919
|
+
* flat stretches, so it never goes past a waypoint. Each leg is one cubic-bezier ease per axis;
|
|
920
|
+
* x and y ease differently, so exports to Flair or Lottie (one ease per transform) sample them.
|
|
921
|
+
*/
|
|
922
|
+
declare function smoothMotionLegs(times: readonly number[], values: readonly number[]): MotionSmoothLeg[];
|
|
923
|
+
/** When each point of a path is reached over `duration` (ms): in proportion to distance (`even`) or a leg each (`equal`). */
|
|
924
|
+
declare function smoothMotionTimes(points: readonly {
|
|
925
|
+
x: number;
|
|
926
|
+
y: number;
|
|
927
|
+
}[], start: number, duration: number, pacing?: 'even' | 'equal'): number[];
|
|
928
|
+
|
|
857
929
|
/**
|
|
858
930
|
* A reveal clip (`wipe`, `iris`, `split`) in the units of the node's own box: 0–1 across it,
|
|
859
931
|
* as SVG's `clipPathUnits="objectBoundingBox"` and Flair's clip reveals are.
|
|
@@ -1074,6 +1146,10 @@ type MotionEdit = {
|
|
|
1074
1146
|
op: 'set_controls';
|
|
1075
1147
|
controls: MotionControl[];
|
|
1076
1148
|
presets?: MotionPreset[];
|
|
1149
|
+
} | {
|
|
1150
|
+
op: 'set_clip';
|
|
1151
|
+
name: string;
|
|
1152
|
+
clip: MotionClip | null;
|
|
1077
1153
|
} | {
|
|
1078
1154
|
op: 'replace_scene';
|
|
1079
1155
|
scene: MotionScene;
|
|
@@ -1650,6 +1726,11 @@ declare function describeMotionShots(scene: MotionScene): {
|
|
|
1650
1726
|
x: number;
|
|
1651
1727
|
y: number;
|
|
1652
1728
|
};
|
|
1729
|
+
via?: {
|
|
1730
|
+
x: number;
|
|
1731
|
+
y: number;
|
|
1732
|
+
}[];
|
|
1733
|
+
pacing?: "even" | "equal";
|
|
1653
1734
|
targets: string[];
|
|
1654
1735
|
duration?: number;
|
|
1655
1736
|
delay?: number;
|
|
@@ -1772,6 +1853,24 @@ declare function describeMotionShots(scene: MotionScene): {
|
|
|
1772
1853
|
repeatMode?: "loop" | "mirror" | "offset";
|
|
1773
1854
|
steps?: number;
|
|
1774
1855
|
index: number;
|
|
1856
|
+
} | {
|
|
1857
|
+
flairPrimitive?: string | undefined;
|
|
1858
|
+
start: number;
|
|
1859
|
+
end: number;
|
|
1860
|
+
type: "play";
|
|
1861
|
+
clip: string;
|
|
1862
|
+
speed?: number;
|
|
1863
|
+
targets: string[];
|
|
1864
|
+
duration?: number;
|
|
1865
|
+
delay?: number;
|
|
1866
|
+
stagger?: number;
|
|
1867
|
+
with?: "after" | "previous";
|
|
1868
|
+
ease?: AnimationEasing;
|
|
1869
|
+
note?: string;
|
|
1870
|
+
repeat?: number;
|
|
1871
|
+
repeatMode?: "loop" | "mirror" | "offset";
|
|
1872
|
+
steps?: number;
|
|
1873
|
+
index: number;
|
|
1775
1874
|
} | {
|
|
1776
1875
|
flairPrimitive?: string | undefined;
|
|
1777
1876
|
start: number;
|
|
@@ -1961,7 +2060,7 @@ declare function createAnimationEditorToolProvider(controller: AnimationEditorCo
|
|
|
1961
2060
|
* A short authoring guide for a model writing vector animations with the animation editor's
|
|
1962
2061
|
* tools. Static, so it caches well as part of a system prompt.
|
|
1963
2062
|
*/
|
|
1964
|
-
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.\n- For something the viewer plays (a button, a toggle, a step-by-step explainer), set \"trigger\" with set_animation_settings: click plays the next shot on each click and then starts over (make the last shot put things back for a toggle), hover or press plays and rewinds, scroll scrubs.\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.";
|
|
2063
|
+
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- Reuse motion: set_animation_clip defines a clip (commands targeting \"$\"), and { \"type\": \"play\", \"clip\": name, \"targets\": [...] } plays it on any nodes (with stagger and speed). copy_animation gives other nodes one node's motion.\n- move takes \"via\" waypoints for a curved, smooth path that passes exactly through each point (steady speed by default); use it instead of chaining moves, which stop at each point.\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.\n- For something the viewer plays (a button, a toggle, a step-by-step explainer), set \"trigger\" with set_animation_settings: click plays the next shot on each click and then starts over (make the last shot put things back for a toggle), hover or press plays and rewinds, scroll scrubs.\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.";
|
|
1965
2064
|
|
|
1966
2065
|
/**
|
|
1967
2066
|
* Helpers for hand-editing UIs (React's and Svelte's command inspector, ease picker, cue picker,
|
|
@@ -2108,4 +2207,4 @@ declare function parseMotionNarration(text: string): {
|
|
|
2108
2207
|
error: string;
|
|
2109
2208
|
};
|
|
2110
2209
|
|
|
2111
|
-
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, MOTION_TRIGGERS, 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 MotionTrigger, 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 };
|
|
2210
|
+
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_CLIP_TARGET, 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, MOTION_TRIGGERS, type MotionBeatGrid, type MotionCamera, type MotionClip, type MotionClipItem, 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 MotionPlayCommand, 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 MotionSmoothLeg, type MotionSplitOrientation, type MotionStyleCommand, type MotionSvgOptions, type MotionTeeterCommand, type MotionTimeline, type MotionTrigger, type MotionValue, type MotionWaitCommand, type MotionWaveCommand, type MotionWiggleCommand, activeSegment, applyMotionControlValues, applyMotionEdits, checkMotionScene, clipsShapeProblems, 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, motionClipLayout, 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, smoothMotionLegs, smoothMotionTimes, suggestName, toFlairEffectDocument, toFlairSvgMotion, toFlairVectorEffect, toLottie, trackValue, withMotionLayers, withViewBox };
|