@coppsary/motionly 1.0.1 → 1.0.2
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/README.md +6 -4
- package/dist/assets/index-bTggaIHQ.js +6 -0
- package/dist/assets/index-bTggaIHQ.js.map +1 -0
- package/dist/assets/index-uMHqBndL.js +16 -0
- package/dist/assets/index-uMHqBndL.js.map +1 -0
- package/dist/assets/main-BWhvHbtr.css +1 -0
- package/dist/assets/main-CrcFUwRU.js +2470 -0
- package/dist/assets/main-CrcFUwRU.js.map +1 -0
- package/dist/index.html +2 -2
- package/motionly-skills/AGENTS.md +20 -0
- package/motionly-skills/README.md +28 -0
- package/motionly-skills/llms.txt +16 -0
- package/motionly-skills/skills/animation/SKILL.md +73 -0
- package/motionly-skills/skills/animation/agents/openai.yaml +4 -0
- package/motionly-skills/skills/assets/SKILL.md +45 -0
- package/motionly-skills/skills/assets/agents/openai.yaml +4 -0
- package/motionly-skills/skills/camera/SKILL.md +57 -0
- package/motionly-skills/skills/camera/agents/openai.yaml +4 -0
- package/motionly-skills/skills/composition/SKILL.md +42 -0
- package/motionly-skills/skills/composition/agents/openai.yaml +4 -0
- package/motionly-skills/skills/easing/SKILL.md +44 -0
- package/motionly-skills/skills/easing/agents/openai.yaml +4 -0
- package/motionly-skills/skills/motion-dsl/SKILL.md +93 -0
- package/motionly-skills/skills/motion-dsl/agents/openai.yaml +4 -0
- package/motionly-skills/skills/rendering/SKILL.md +45 -0
- package/motionly-skills/skills/rendering/agents/openai.yaml +4 -0
- package/motionly-skills/skills/svg/SKILL.md +82 -0
- package/motionly-skills/skills/svg/agents/openai.yaml +4 -0
- package/motionly-skills/skills/templates/SKILL.md +51 -0
- package/motionly-skills/skills/templates/agents/openai.yaml +4 -0
- package/motionly-skills/skills/timeline/SKILL.md +57 -0
- package/motionly-skills/skills/timeline/agents/openai.yaml +4 -0
- package/motionly-skills/skills/transitions/SKILL.md +45 -0
- package/motionly-skills/skills/transitions/agents/openai.yaml +4 -0
- package/motionly-skills/skills/typography/SKILL.md +42 -0
- package/motionly-skills/skills/typography/agents/openai.yaml +4 -0
- package/package.json +6 -1
- package/templates/motionly-skill/SKILL.md +10 -1
- package/templates/project/AGENTS.md +2 -0
- package/dist/assets/main-C8oSjoH0.css +0 -1
- package/dist/assets/main-CQ2W0QKo.js +0 -2475
- package/dist/assets/main-CQ2W0QKo.js.map +0 -1
package/dist/index.html
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
<link rel="icon" href="/logo.svg" />
|
|
7
7
|
<title>Motionly</title>
|
|
8
|
-
<script type="module" crossorigin src="/assets/main-
|
|
9
|
-
<link rel="stylesheet" crossorigin href="/assets/main-
|
|
8
|
+
<script type="module" crossorigin src="/assets/main-CrcFUwRU.js"></script>
|
|
9
|
+
<link rel="stylesheet" crossorigin href="/assets/main-BWhvHbtr.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
12
|
</body>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# Motionly Skills Agent Instructions
|
|
2
|
+
|
|
3
|
+
Use [`llms.txt`](llms.txt) as the discovery index. Load only skills relevant to the request instead of reading the entire library.
|
|
4
|
+
|
|
5
|
+
Always load `skills/motion-dsl/SKILL.md` before creating or repairing `.motion` syntax. Then load focused skills by intent:
|
|
6
|
+
|
|
7
|
+
- vector/logo/icon/diagram work: `svg`
|
|
8
|
+
- choreography or keyframes: `animation` and `easing`
|
|
9
|
+
- push/pan/zoom decisions: `camera`
|
|
10
|
+
- layout, brand, or scene review: `composition`
|
|
11
|
+
- text motion: `typography`
|
|
12
|
+
- scene changes: `transitions`
|
|
13
|
+
- clip/audio sequencing: `timeline`
|
|
14
|
+
- imported media: `assets`
|
|
15
|
+
- preview/export diagnosis: `rendering`
|
|
16
|
+
- a new brief or storyboard: `templates`
|
|
17
|
+
|
|
18
|
+
Preserve existing user work, exact copy, real asset paths, and editable timeline structure. Prefer native SVG/vector animation for logos, icons, illustrations, diagrams, badges, and UI graphics unless the user explicitly wants to preserve an imported animation. Never flatten or silently ignore animated media.
|
|
19
|
+
|
|
20
|
+
Validate against the Motionly repository's current parser, evaluator, renderer, and serializer when available. Report real browser/renderer limitations plainly.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# Motionly Skills
|
|
2
|
+
|
|
3
|
+
Focused agent skills for creating polished, editable Motionly animations. Install the library with:
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npx skills add https://github.com/COPPSARY/motionly-skills
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
Agents should discover skills from [`llms.txt`](llms.txt) and load only the topics needed for the current task. Start with `motion-dsl`, then add subject skills such as `svg`, `timeline`, or `rendering`.
|
|
10
|
+
|
|
11
|
+
## Skills
|
|
12
|
+
|
|
13
|
+
| Skill | Use it for |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| `motion-dsl` | Valid `.motion` syntax, parser repair, serialization |
|
|
16
|
+
| `svg` | Native SVG/vector artwork and local cinematic motion |
|
|
17
|
+
| `animation` | Choreography, presets, keyframes, stagger |
|
|
18
|
+
| `easing` | Curves, durations, holds, exit timing |
|
|
19
|
+
| `camera` | Global camera versus local object focus |
|
|
20
|
+
| `composition` | Hierarchy, spacing, color, scene design |
|
|
21
|
+
| `typography` | Titles, captions, kinetic and narration-synced type |
|
|
22
|
+
| `transitions` | Wipes, crossfades, scene continuity |
|
|
23
|
+
| `timeline` | Tracks, clips, trims, sequencing, audio |
|
|
24
|
+
| `assets` | Images, SVG, GIF, video, MOV, Lottie, codecs |
|
|
25
|
+
| `rendering` | Preview/export validation and limitations |
|
|
26
|
+
| `templates` | Product launches, logo reveals, diagrams, social stats |
|
|
27
|
+
|
|
28
|
+
Every skill produces editable Motionly source and treats the current parser and renderer as authoritative.
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Motionly Skills discovery index
|
|
2
|
+
|
|
3
|
+
Load skills/motion-dsl/SKILL.md for any .motion authoring or repair task.
|
|
4
|
+
|
|
5
|
+
- skills/motion-dsl/SKILL.md — canvas, imports, elements, clips, tracks, audio, animations, keyframes, validation
|
|
6
|
+
- skills/svg/SKILL.md — logos, icons, diagrams, vector artwork, DrawSVG, fill/stroke, local zoom/pan, animated SVG
|
|
7
|
+
- skills/animation/SKILL.md — choreography, entrances, holds, exits, presets, sequences, professional motion patterns
|
|
8
|
+
- skills/easing/SKILL.md — easing selection, duration, stagger, timing diagnosis
|
|
9
|
+
- skills/camera/SKILL.md — global camera, local artwork focus, push, pull, pan, speed zoom
|
|
10
|
+
- skills/composition/SKILL.md — hierarchy, spacing, color, branding, layouts, scene review
|
|
11
|
+
- skills/typography/SKILL.md — titles, captions, kinetic type, narration timing, count-up
|
|
12
|
+
- skills/transitions/SKILL.md — scene changes, wipes, crossfades, continuity
|
|
13
|
+
- skills/timeline/SKILL.md — tracks, clips, trim, retime, overlap, audio placement
|
|
14
|
+
- skills/assets/SKILL.md — PNG/JPEG, SVG, GIF, MP4, WebM, MOV, Lottie, browser codecs
|
|
15
|
+
- skills/rendering/SKILL.md — preview, scrub, export, inspection, renderer limitations
|
|
16
|
+
- skills/templates/SKILL.md — product launch, logo reveal, diagram walkthrough, social stat storyboards
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: animation
|
|
3
|
+
description: Choreograph polished Motionly object animation and sequences. Use for entrances, holds, exits, keyframes, stagger, presets, scene beats, motion hierarchy, product reveals, logo stings, UI demonstrations, and replacing repetitive fade-only motion.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Animation
|
|
7
|
+
|
|
8
|
+
Design motion around attention and story beats. One focal subject moves first; supporting detail follows; the completed composition holds; exits clear space for the next idea.
|
|
9
|
+
|
|
10
|
+
## Build A Beat
|
|
11
|
+
|
|
12
|
+
1. Anticipate with a small offset, mask, or contrast change.
|
|
13
|
+
2. Enter the focal subject over roughly `650ms–1s`.
|
|
14
|
+
3. Stagger support by `80–180ms`.
|
|
15
|
+
4. Hold long enough to read or understand.
|
|
16
|
+
5. Exit in `350–550ms`, usually faster than the entrance.
|
|
17
|
+
6. Transition only when the story actually changes.
|
|
18
|
+
|
|
19
|
+
## Production Entrance
|
|
20
|
+
|
|
21
|
+
```motion
|
|
22
|
+
animate panel {
|
|
23
|
+
keyframes {
|
|
24
|
+
0% { opacity 0 y 90 scale .94 blur 10 }
|
|
25
|
+
72% { opacity 1 y -6 scale 1.01 blur 0 }
|
|
26
|
+
100% { opacity 1 y 0 scale 1 blur 0 }
|
|
27
|
+
}
|
|
28
|
+
duration 900ms
|
|
29
|
+
delay 1.2s
|
|
30
|
+
easing power3.out
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The small overshoot makes the settle visible without looking bouncy. Remove it for sober enterprise brands.
|
|
35
|
+
|
|
36
|
+
## Sequence Related Elements
|
|
37
|
+
|
|
38
|
+
```motion
|
|
39
|
+
sequence benefits {
|
|
40
|
+
items icon title body
|
|
41
|
+
delay 2s
|
|
42
|
+
gap 120ms
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
animate icon {
|
|
46
|
+
from { opacity 0 scale .8 rotation -8 }
|
|
47
|
+
to { opacity 1 scale 1 rotation 0 }
|
|
48
|
+
duration 700ms
|
|
49
|
+
easing power3.out
|
|
50
|
+
sequence benefits
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Use a sequence for a semantic group, not every object in the project. Reveal logos with their labels and diagram nodes with their connecting lines.
|
|
55
|
+
|
|
56
|
+
## Preset Selection
|
|
57
|
+
|
|
58
|
+
- `softReveal`: quiet supporting content.
|
|
59
|
+
- `maskReveal`: hero image/video or product panel.
|
|
60
|
+
- `dynamicSlide`: directional support and UI cards.
|
|
61
|
+
- `drawSVG`: simple stroked vector hero.
|
|
62
|
+
- `shapeWipe`/`irisWipe`: real scene change.
|
|
63
|
+
- `sceneExit`: deliberate cleanup.
|
|
64
|
+
|
|
65
|
+
## Avoid Generic Motion
|
|
66
|
+
|
|
67
|
+
- Do not fade every object from opacity zero.
|
|
68
|
+
- Do not apply the same entrance duration/direction to every layer.
|
|
69
|
+
- Do not keep objects moving after the audience should read them.
|
|
70
|
+
- Do not stack scale, spin, blur, and bounce without a story reason.
|
|
71
|
+
- Do not leave stale layers visible under the next scene.
|
|
72
|
+
|
|
73
|
+
For a software launch, alternate full-frame promise, product proof, focused feature detail, and brand close. Reuse motion language, not identical choreography.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: assets
|
|
3
|
+
description: Import, inspect, place, animate, and troubleshoot Motionly media assets. Use for PNG/JPEG, static or animated SVG, GIF, MP4, WebM, MOV, Lottie, audio, data URLs, aspect ratios, codecs, browser decoding, trim timing, and preserving existing animation.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Assets
|
|
7
|
+
|
|
8
|
+
Inventory real files before authoring. Record filename, format, dimensions, aspect ratio, duration, and whether existing animation must be preserved.
|
|
9
|
+
|
|
10
|
+
## Format Behavior
|
|
11
|
+
|
|
12
|
+
- PNG/JPEG: static browser images.
|
|
13
|
+
- Static SVG: editable layer transforms; simple paths also support fill/stroke overrides and `drawSVG`.
|
|
14
|
+
- Animated SVG: real-time Canvas SVG playback with common SMIL support; exact frame seeking is unavailable and CSS keyframes may differ from browser DOM playback.
|
|
15
|
+
- GIF: frame-seeked through `ImageDecoder` when available; otherwise live playback with a visible warning.
|
|
16
|
+
- MP4/WebM/MOV/M4V: native browser video decode and exact seek. Codec support follows the browser.
|
|
17
|
+
- Lottie `.lottie`: official Canvas player with frame seeking for preview, scrub, and export.
|
|
18
|
+
- Project audio: separate bottom track with persisted `start` and MP4 export.
|
|
19
|
+
|
|
20
|
+
Never flatten animated media to a still or silently ignore its motion.
|
|
21
|
+
|
|
22
|
+
## Import And Place
|
|
23
|
+
|
|
24
|
+
```motion
|
|
25
|
+
import "./assets/hero.mov" as hero
|
|
26
|
+
import "./assets/loader.lottie" as loader
|
|
27
|
+
import "./assets/animated-mark.svg" as mark
|
|
28
|
+
|
|
29
|
+
hero { center cover layer hero }
|
|
30
|
+
loader { center width 320 layer supporting }
|
|
31
|
+
mark { center width 260 layer text }
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Set one of `width` or `height` to preserve aspect ratio. Use `cover` only when cropping is intended.
|
|
35
|
+
|
|
36
|
+
## Timeline Media
|
|
37
|
+
|
|
38
|
+
Use clips for start, duration, and source trim. Video clip audio is muted; use project audio for synchronized sound. A single imported video decoder cannot show two source times simultaneously, so import a second alias when needed.
|
|
39
|
+
|
|
40
|
+
## Troubleshoot Honestly
|
|
41
|
+
|
|
42
|
+
- MOV failure usually means the current browser lacks the file's codec; report the decoder error and recommend H.264 MP4/WebM without calling MOV unsupported.
|
|
43
|
+
- Animated SVG scrubbing shows the live Canvas runtime state; state the seeking and CSS-keyframe limitations when they matter.
|
|
44
|
+
- Large embedded files increase `.motion` size; prefer stable local asset paths for production projects.
|
|
45
|
+
- If loading fails, keep the project editable and identify the exact asset rather than hiding it.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: camera
|
|
3
|
+
description: Direct global camera moves and local artwork focus in Motionly. Use for push-ins, pull-backs, pans, speed zooms, focal shifts, diagram walkthroughs, logo close-ups, parallax planning, and deciding whether to animate the camera or an individual SVG/object.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Camera
|
|
7
|
+
|
|
8
|
+
Move the global camera only when the whole composition changes viewpoint. If the request focuses on one logo, SVG, screenshot, or diagram, animate that object's `x`, `y`, `scale`, `rotation`, `originX`, and `originY` instead.
|
|
9
|
+
|
|
10
|
+
## Decision
|
|
11
|
+
|
|
12
|
+
- Whole scene advances toward a product: global `slowPush` or `push`.
|
|
13
|
+
- Whole scene reveals wider context: global `pull`.
|
|
14
|
+
- Attention moves across a large composition: global `pan`.
|
|
15
|
+
- Only one vector or panel is inspected: local object transform.
|
|
16
|
+
- Scene cut needs a punch: one `speedZoom`, followed by stillness.
|
|
17
|
+
|
|
18
|
+
## Global Example
|
|
19
|
+
|
|
20
|
+
```motion
|
|
21
|
+
camera {
|
|
22
|
+
zoom 1
|
|
23
|
+
x 0
|
|
24
|
+
y 0
|
|
25
|
+
rotation 0
|
|
26
|
+
cameraAnimation "speedZoom(delay 4s duration 900ms from 1 peak 1.09 to 1.02 ease power3.out)"
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Keep safe margins around every layer because camera transforms affect all visible content.
|
|
31
|
+
|
|
32
|
+
## Local Diagram Walkthrough
|
|
33
|
+
|
|
34
|
+
```motion
|
|
35
|
+
diagram {
|
|
36
|
+
center
|
|
37
|
+
width 1500
|
|
38
|
+
originX .78
|
|
39
|
+
originY .3
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
animate diagram {
|
|
43
|
+
keyframes {
|
|
44
|
+
0% { scale .92 x 0 y 0 }
|
|
45
|
+
48% { scale 1.35 x -260 y 120 }
|
|
46
|
+
100% { scale 1 x 0 y 0 }
|
|
47
|
+
}
|
|
48
|
+
duration 5s
|
|
49
|
+
easing power3.out
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Hold after arriving at a focus point. Constant drift makes reading difficult and turns intentional camera language into noise.
|
|
54
|
+
|
|
55
|
+
## Limits
|
|
56
|
+
|
|
57
|
+
Motionly has one global 2D camera; it does not provide depth-aware 3D camera rigs. Build parallax with separate editable layers moving at different rates and state the limitation if true 3D perspective is required.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: composition
|
|
3
|
+
description: Design clear professional Motionly compositions. Use for hierarchy, layout, spacing, branding, color, scene design, focal subjects, clutter, overlap, aspect ratios, product launch frames, diagrams, and visual review of generated animation.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Composition
|
|
7
|
+
|
|
8
|
+
Give each shot one focal subject and one communication job. Motion supports hierarchy; it cannot rescue a frame where everything competes.
|
|
9
|
+
|
|
10
|
+
## Frame Hierarchy
|
|
11
|
+
|
|
12
|
+
1. Focal subject: largest contrast, clearest motion, strongest placement.
|
|
13
|
+
2. Supporting proof: smaller and delayed.
|
|
14
|
+
3. Context: quiet labels, grid, atmosphere, or brand cues.
|
|
15
|
+
4. Exit path: leave spatial and temporal room for the next shot.
|
|
16
|
+
|
|
17
|
+
## Layout Patterns
|
|
18
|
+
|
|
19
|
+
- Promise: centered display type with restrained brand mark.
|
|
20
|
+
- Feature: editorial split, copy on one side and product media on the other.
|
|
21
|
+
- Proof: large product panel with one animated callout.
|
|
22
|
+
- Comparison: aligned columns with shared baseline and minimal motion.
|
|
23
|
+
- Close: centered logo/call-to-action with clean negative space.
|
|
24
|
+
|
|
25
|
+
Use a repeatable spacing unit such as 24 or 32px. Keep titles away from media edges, preserve asset aspect ratio, and inspect actual bounds after animation settles.
|
|
26
|
+
|
|
27
|
+
## Color
|
|
28
|
+
|
|
29
|
+
- Use one dominant background, one primary text color, and one accent per shot.
|
|
30
|
+
- Reserve the brightest accent for the focal subject or call to action.
|
|
31
|
+
- Change scene color to mark a story shift, not on every beat.
|
|
32
|
+
- Maintain readable contrast during transitions, not only on static holds.
|
|
33
|
+
|
|
34
|
+
## Review At Representative Frames
|
|
35
|
+
|
|
36
|
+
- First visible frame.
|
|
37
|
+
- Entrance midpoint and completed hold.
|
|
38
|
+
- One frame before/during/after each transition.
|
|
39
|
+
- Exit boundary.
|
|
40
|
+
- Final intended frame.
|
|
41
|
+
|
|
42
|
+
Treat accidental overlap, stretched media, clipped type, unexplained blank frames, and stale layers as defects. Delete decorative layers that do not improve hierarchy.
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: easing
|
|
3
|
+
description: Choose and tune Motionly easing, duration, and stagger. Use when motion feels linear, abrupt, floaty, bouncy, robotic, too slow, too fast, or inconsistent, and when authoring explicit animations or preset calls.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Easing
|
|
7
|
+
|
|
8
|
+
Default to `power3.out` for professional entrances: it moves decisively, then settles gently. Match easing to intent before adding more keyframes.
|
|
9
|
+
|
|
10
|
+
## Practical Map
|
|
11
|
+
|
|
12
|
+
- Hero entrance: `power3.out`, `750ms–1.1s`.
|
|
13
|
+
- Supporting card: `power3.out`, `550–800ms`.
|
|
14
|
+
- Fast exit: `power3.in`, `300–500ms`.
|
|
15
|
+
- Soft ambient change: `sine.inOut`, `1.5–4s`.
|
|
16
|
+
- Mechanical UI response: `power2.out`, `250–500ms`.
|
|
17
|
+
- Elastic/bounce: only when the brand explicitly calls for playfulness.
|
|
18
|
+
|
|
19
|
+
Explicit blocks use `easing`:
|
|
20
|
+
|
|
21
|
+
```motion
|
|
22
|
+
animate title {
|
|
23
|
+
from { opacity 0 y 72 }
|
|
24
|
+
to { opacity 1 y 0 }
|
|
25
|
+
duration 850ms
|
|
26
|
+
easing power3.out
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Preset calls use `ease`:
|
|
31
|
+
|
|
32
|
+
```motion
|
|
33
|
+
animation "dynamicSlide(duration 700ms direction up ease power3.out)"
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Timing Relationships
|
|
37
|
+
|
|
38
|
+
- Make the focal entrance longer than supporting entrances.
|
|
39
|
+
- Keep exits about 55–70% of entrance duration.
|
|
40
|
+
- Use `60–100ms` character stagger, `80–160ms` word/item stagger.
|
|
41
|
+
- Start support after the hero is recognizable, not necessarily after it fully stops.
|
|
42
|
+
- Preserve at least one second of readable hold for short copy; longer copy needs more.
|
|
43
|
+
|
|
44
|
+
If motion feels sluggish, shorten distance or duration before choosing a harsher ease. If it snaps at the end, use a gentler out curve or add a restrained settle keyframe.
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: motion-dsl
|
|
3
|
+
description: Author, repair, and explain valid editable Motionly .motion source. Use for canvas, imports, elements, tracks, clips, audio, sequences, explicit animations, keyframes, presets, parsing errors, and parse/serialize round trips.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Motion DSL
|
|
7
|
+
|
|
8
|
+
Treat `.motion` as the editable source beneath Motionly's visual editor. Inspect the current parser, scene graph, serializer, and existing project before changing syntax. Never invent a block or property because another animation tool has it.
|
|
9
|
+
|
|
10
|
+
## Build In This Order
|
|
11
|
+
|
|
12
|
+
1. Define one `canvas` with inferred size, FPS, duration, and background.
|
|
13
|
+
2. Import only real asset paths with single-word aliases.
|
|
14
|
+
3. Declare stable tracks when timing/layer placement matters.
|
|
15
|
+
4. Add imported aliases, `text`, `overlay`, or `effect` elements.
|
|
16
|
+
5. Add clips for timed media and `audio` for project sound.
|
|
17
|
+
6. Add presets or explicit `animate` blocks.
|
|
18
|
+
7. Parse, serialize, parse again, then inspect representative frames.
|
|
19
|
+
|
|
20
|
+
## Core Syntax
|
|
21
|
+
|
|
22
|
+
```motion
|
|
23
|
+
canvas {
|
|
24
|
+
size 1920x1080
|
|
25
|
+
fps 60
|
|
26
|
+
duration 8s
|
|
27
|
+
background #07090f
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
import "./assets/product.webm" as product
|
|
31
|
+
|
|
32
|
+
track hero {
|
|
33
|
+
label "Hero"
|
|
34
|
+
role main
|
|
35
|
+
content primary
|
|
36
|
+
order 0
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
product {
|
|
40
|
+
center
|
|
41
|
+
width 1280
|
|
42
|
+
layer hero
|
|
43
|
+
scale 1
|
|
44
|
+
opacity 1
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
clip product {
|
|
48
|
+
track hero
|
|
49
|
+
start 1s
|
|
50
|
+
duration 5s
|
|
51
|
+
trimIn 500ms
|
|
52
|
+
trimOut 0s
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Render imported media with its alias directly. Valid built-in visual blocks are `text`, `overlay`, `effect`, and `image` (the latter attaches overlays to a bitmap source). Do not invent `video`, `scene`, `group`, `rect`, or `layer` blocks.
|
|
57
|
+
|
|
58
|
+
## Explicit Motion
|
|
59
|
+
|
|
60
|
+
```motion
|
|
61
|
+
animate product {
|
|
62
|
+
keyframes {
|
|
63
|
+
0% { opacity 0 scale .92 y 80 }
|
|
64
|
+
65% { opacity 1 scale 1.015 y 0 }
|
|
65
|
+
100% { opacity 1 scale 1 y 0 }
|
|
66
|
+
}
|
|
67
|
+
duration 900ms
|
|
68
|
+
delay 1s
|
|
69
|
+
easing power3.out
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Use `easing` on explicit animations and `ease` inside preset calls. Use `size`, never `fontSize`. Put properties on separate lines in production source even though compact keyframe rows parse.
|
|
74
|
+
|
|
75
|
+
## Timing Rules
|
|
76
|
+
|
|
77
|
+
- `start`/`duration` on a visual element define its visibility window.
|
|
78
|
+
- `clip` controls imported media timing, source trim, and timeline track.
|
|
79
|
+
- `delay` offsets an animation; it does not move the element's clip.
|
|
80
|
+
- Percentage keyframes are relative to the animation duration.
|
|
81
|
+
- Moving a whole layer moves its animation timing; trimming changes visibility without silently retiming keyframes.
|
|
82
|
+
- Keep audio on the bottom audio track and preserve its `start`.
|
|
83
|
+
|
|
84
|
+
## Repair Checklist
|
|
85
|
+
|
|
86
|
+
- Confirm every animation target and clip alias exists.
|
|
87
|
+
- Confirm imports use quoted paths and aliases have no spaces.
|
|
88
|
+
- Replace `fontSize` with `size`; replace explicit `ease` with `easing`.
|
|
89
|
+
- Remove unsupported block names and properties.
|
|
90
|
+
- Preserve unrelated tracks, masks, keyframes, and exact copy.
|
|
91
|
+
- Run the project's inspection command and review empty-frame ranges rather than assuming they are intentional.
|
|
92
|
+
|
|
93
|
+
Return a complete project, not a fragment, unless the user explicitly asks for a snippet.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: rendering
|
|
3
|
+
description: Validate Motionly preview, scrubbing, serialization, and final export. Use for missing assets, blank frames, non-finite state, animated media synchronization, browser codec limitations, Lottie/GIF/SVG playback, MP4/WebM/GIF export, pixel inspection, and renderer troubleshooting.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Rendering
|
|
7
|
+
|
|
8
|
+
Use the production parser → scene graph → evaluator → asset synchronizer → Canvas renderer path. A valid parse is necessary but does not prove visual correctness.
|
|
9
|
+
|
|
10
|
+
## Validation Loop
|
|
11
|
+
|
|
12
|
+
1. Parse and build the scene graph.
|
|
13
|
+
2. Verify canvas size, FPS, duration, imports, tracks, and expected elements.
|
|
14
|
+
3. Run `inspect:motion` with the expected duration.
|
|
15
|
+
4. Review every reported empty-frame range.
|
|
16
|
+
5. Preview representative timestamps and real media decoding.
|
|
17
|
+
6. Export a short representative render when animated assets changed.
|
|
18
|
+
7. Save/reload and confirm round-trip stability.
|
|
19
|
+
|
|
20
|
+
## Animated Media Contract
|
|
21
|
+
|
|
22
|
+
- MP4/WebM/MOV seek through the browser video decoder.
|
|
23
|
+
- Lottie and supported GIF seek to project time before every deterministic export frame.
|
|
24
|
+
- Animated SVG and GIF fallback use wall-clock playback; deterministic MP4/GIF export deliberately runs in real time for those assets.
|
|
25
|
+
- Browser codec or API gaps must appear as explicit editor warnings/errors.
|
|
26
|
+
|
|
27
|
+
## Inspect These Frames
|
|
28
|
+
|
|
29
|
+
- First visible frame.
|
|
30
|
+
- First decoded frame of every animated asset.
|
|
31
|
+
- A mid-animation frame proving motion is not flattened.
|
|
32
|
+
- Clip trim boundaries.
|
|
33
|
+
- One frame before/during/after transitions.
|
|
34
|
+
- Final visible frame.
|
|
35
|
+
|
|
36
|
+
## Failure Guide
|
|
37
|
+
|
|
38
|
+
- Asset imports but stays blank: inspect decoder error, MIME type, CORS, and browser codec.
|
|
39
|
+
- Video frame lags while scrubbing: use exact synchronization and await `seeked`.
|
|
40
|
+
- Lottie blank: verify `.lottie` data, WASM load, intrinsic animation size, and load events.
|
|
41
|
+
- GIF frozen in export: verify `ImageDecoder` or real-time fallback pacing.
|
|
42
|
+
- Animated SVG appears at the wrong phase: its Canvas timeline is live; restart at clip activation and disclose lack of exact seeking. If CSS keyframes differ, report the Canvas runtime limitation.
|
|
43
|
+
- Preview/export differ: confirm both call the same evaluated time and asset synchronization path.
|
|
44
|
+
|
|
45
|
+
Do not claim pixel correctness from deterministic state signatures alone.
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: svg
|
|
3
|
+
description: Create and animate editable SVG/vector artwork in Motionly. Use for logos, icons, badges, illustrations, diagrams, line art, UI graphics, draw-on reveals, fills, strokes, masks, local zoom/pan, vector callouts, and imported animated SVG behavior.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# SVG Motion
|
|
7
|
+
|
|
8
|
+
Prefer native editable SVG or Motionly overlay primitives when the requested artwork is a logo, icon, diagram, badge, line illustration, or UI graphic. Import an existing animated SVG only when preserving its original SMIL/CSS animation is part of the brief.
|
|
9
|
+
|
|
10
|
+
## Choose A Treatment
|
|
11
|
+
|
|
12
|
+
- Simple stroked mark: create clean paths and use `drawSVG`.
|
|
13
|
+
- Filled logo: reveal the silhouette, then animate fill/stroke and settle scale.
|
|
14
|
+
- Diagram: split meaningful parts into separate SVG assets or overlay paths so timing stays editable.
|
|
15
|
+
- Screenshot annotation: use `image` plus child `overlay` primitives.
|
|
16
|
+
- Existing animated SVG: preserve it as animated media; disclose that Canvas playback is live and not deterministically seekable, and that CSS keyframes may differ from browser DOM playback.
|
|
17
|
+
|
|
18
|
+
## Local Cinematic Motion
|
|
19
|
+
|
|
20
|
+
Animate the SVG object, not the global camera, when focus stays inside one artwork:
|
|
21
|
+
|
|
22
|
+
```motion
|
|
23
|
+
logo {
|
|
24
|
+
center
|
|
25
|
+
width 420
|
|
26
|
+
originX .68
|
|
27
|
+
originY .42
|
|
28
|
+
scale 1
|
|
29
|
+
x 0
|
|
30
|
+
y 0
|
|
31
|
+
rotation 0
|
|
32
|
+
animation "drawSVG(duration 1.1s ease power3.out)"
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
animate logo {
|
|
36
|
+
keyframes {
|
|
37
|
+
0% { opacity 0 scale .82 x 90 y 34 blur 8 }
|
|
38
|
+
70% { opacity 1 scale 1.06 x -20 y -8 blur 0 }
|
|
39
|
+
100% { opacity 1 scale 1 x 0 y 0 blur 0 }
|
|
40
|
+
}
|
|
41
|
+
duration 1.2s
|
|
42
|
+
easing power3.out
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
`originX` and `originY` are normalized from `0` to `1`. Use them to push into a specific logo corner or diagram region while keeping the layer editable.
|
|
47
|
+
|
|
48
|
+
## Fill And Stroke
|
|
49
|
+
|
|
50
|
+
Imported simple path SVGs accept editable `fill`, `stroke`, and `strokeWidth` overrides. These values can be animated in explicit keyframes:
|
|
51
|
+
|
|
52
|
+
```motion
|
|
53
|
+
animate mark {
|
|
54
|
+
from { fill #111827 stroke #7dd3fc strokeWidth 8 opacity 0 }
|
|
55
|
+
to { fill #38bdf8 stroke #ffffff strokeWidth 2 opacity 1 }
|
|
56
|
+
duration 900ms
|
|
57
|
+
easing power3.out
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Use overlays for independent vector parts:
|
|
62
|
+
|
|
63
|
+
```motion
|
|
64
|
+
overlay route {
|
|
65
|
+
parent dashboard
|
|
66
|
+
shape path
|
|
67
|
+
path "M80 380 C260 120 520 120 760 300"
|
|
68
|
+
fill none
|
|
69
|
+
stroke #7cf7c5
|
|
70
|
+
strokeWidth 8
|
|
71
|
+
animation "animated-arrow-point(duration 900ms ease power3.out)"
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Quality Rules
|
|
76
|
+
|
|
77
|
+
- Preserve `viewBox` and aspect ratio; set one of `width` or `height`.
|
|
78
|
+
- Keep path count intentional; separate only parts that need independent timing.
|
|
79
|
+
- Stagger related parts by 60–140ms, then hold the completed mark.
|
|
80
|
+
- Pair draw-on motion with a restrained fill/opacity resolve; do not leave the logo as outlines unless intended.
|
|
81
|
+
- Use masks and clipping for reveals, not white rectangles pretending to erase artwork.
|
|
82
|
+
- Morphing is not currently deterministic in the Motionly renderer; use transform, mask, or matched-shape crossfades and state the limitation.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: templates
|
|
3
|
+
description: Turn a creative brief, script, storyboard, or asset folder into a production-ready Motionly scene plan. Use for product launches, logo reveals, feature demos, social motion graphics, diagrams, title cards, brand stings, and choosing a non-generic animation structure.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Motion Templates
|
|
7
|
+
|
|
8
|
+
Infer technical defaults from the creative brief. Ask only when a missing choice changes the story, brand, exact copy, or required assets.
|
|
9
|
+
|
|
10
|
+
## Product Launch — 8 Seconds
|
|
11
|
+
|
|
12
|
+
1. `0–2s`: bold promise in full-frame type; decisive word lands last.
|
|
13
|
+
2. `1.8–5.8s`: product panel enters through a mask; one callout proves the feature.
|
|
14
|
+
3. `5.6–8s`: panel clears quickly; logo and CTA resolve with quiet confidence.
|
|
15
|
+
|
|
16
|
+
Use different compositions per shot while keeping a shared easing and color language.
|
|
17
|
+
|
|
18
|
+
## Logo Reveal — 4 Seconds
|
|
19
|
+
|
|
20
|
+
1. Draw or mask the simple SVG mark.
|
|
21
|
+
2. Resolve fill and stroke as the full artwork becomes readable.
|
|
22
|
+
3. Add the wordmark with a short stagger.
|
|
23
|
+
4. Hold the completed lockup before a fast clean exit or end frame.
|
|
24
|
+
|
|
25
|
+
## Diagram Walkthrough — 10 Seconds
|
|
26
|
+
|
|
27
|
+
1. Establish the full diagram.
|
|
28
|
+
2. Animate the SVG itself toward the first region using local origin/scale/x/y.
|
|
29
|
+
3. Reveal one path/callout, then hold.
|
|
30
|
+
4. Pull back or pan locally to the second region.
|
|
31
|
+
5. Return to the complete diagram and summarize.
|
|
32
|
+
|
|
33
|
+
## Social Stat — 6 Seconds
|
|
34
|
+
|
|
35
|
+
1. Context label enters quietly.
|
|
36
|
+
2. Metric counts or scales into focus.
|
|
37
|
+
3. Supporting comparison arrives 120–180ms later.
|
|
38
|
+
4. Brand/source appears after the value is understood.
|
|
39
|
+
|
|
40
|
+
## Creative Quality Gate
|
|
41
|
+
|
|
42
|
+
- One focal subject per shot.
|
|
43
|
+
- Clear hierarchy and negative space.
|
|
44
|
+
- Staggered entrances with `power3.out` by default.
|
|
45
|
+
- Readable holds and faster exits.
|
|
46
|
+
- Purposeful scene transition, not effect stacking.
|
|
47
|
+
- Native editable SVG for vector needs.
|
|
48
|
+
- Animated imports preserved when requested.
|
|
49
|
+
- Clean timeline, no stale layers or accidental overlaps.
|
|
50
|
+
|
|
51
|
+
The result should resemble a designed launch sequence, not a slideshow with fades.
|