greenlight-motion 0.1.1 → 0.1.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 +16 -11
- package/cli/index.mjs +1 -1
- package/dist/bundle-inputs.json +16 -0
- package/dist/greenlight-motion-script.mjs +6 -11
- package/dist/greenlight-motion.js +626 -568
- package/dist/greenlight-motion.mjs +57373 -54831
- package/dist/script-inputs.json +2 -1
- package/package.json +1 -1
- package/skill/SKILL.md +14 -21
- package/skill/references/scene-script.md +2 -9
- package/skill/references/video-design.md +65 -0
- package/skill/references/video-projects.md +7 -4
package/dist/script-inputs.json
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"frontend/src/motionEngine/sceneScriptBundle.js",
|
|
30
30
|
"frontend/src/motionEngine/sceneScriptGuide.js",
|
|
31
31
|
"frontend/src/motionEngine/template.js",
|
|
32
|
-
"frontend/src/utils/cssGradient.js"
|
|
32
|
+
"frontend/src/utils/cssGradient.js",
|
|
33
|
+
"skills/greenlight-dash/references/video-design.md"
|
|
33
34
|
]
|
|
34
35
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "greenlight-motion",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "GreenLight Motion Engine: AI agents make motion-design videos (3D, camera, effects, transitions, text animation, particles, motion blur) with the GreenLight Dash Video Editor's own engine, in the user's browser.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"video",
|
package/skill/SKILL.md
CHANGED
|
@@ -18,7 +18,7 @@ You never write UI or animation code. If something is not in the format, it is n
|
|
|
18
18
|
## Setup (once per machine)
|
|
19
19
|
|
|
20
20
|
```
|
|
21
|
-
npx greenlight-motion@0.1.
|
|
21
|
+
npx greenlight-motion@0.1.2 doctor
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
It checks Node 18+, Chrome or Edge, WebGPU and H.264 encoding, and prints a fix for anything missing. Do not install
|
|
@@ -32,7 +32,7 @@ animation presets (the same converter the GreenLight Motion connector uses in Cl
|
|
|
32
32
|
keyframes rarely look as good. The format, the design rules and the catalogues: `skill/references/scene-script.md`.
|
|
33
33
|
|
|
34
34
|
```
|
|
35
|
-
npx greenlight-motion@0.1.
|
|
35
|
+
npx greenlight-motion@0.1.2 script <folder> --from scenes.json # or write <folder>/script.json, then: script <folder>
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
Then `check` and `stills` (below), fix the SCRIPT and run `script` again — it rewrites `project.json`. For what a
|
|
@@ -41,14 +41,14 @@ workflow below and stop running `script` (it refuses to overwrite a project edit
|
|
|
41
41
|
|
|
42
42
|
## Workflow
|
|
43
43
|
|
|
44
|
-
1. `npx greenlight-motion@0.1.
|
|
44
|
+
1. `npx greenlight-motion@0.1.2 init <folder>` — starts from a working example (title, subtitle, accent line, four
|
|
45
45
|
options). `--from file.json` starts from a project you have (for example one exported from GreenLight Dash).
|
|
46
46
|
2. Edit `<folder>/project.json` — for changes to an EXISTING project prefer `apply` (below): it checks every edit and
|
|
47
47
|
applies all or nothing. Put pictures, video, sound and fonts in `<folder>/assets/` and refer to them as
|
|
48
48
|
`"asset:<file>"` (e.g. `"url": "asset:product.png"`).
|
|
49
|
-
3. `npx greenlight-motion@0.1.
|
|
49
|
+
3. `npx greenlight-motion@0.1.2 check <folder>` — fix everything it lists (missing files, template mistakes, blank
|
|
50
50
|
frames, page errors). `--json` for machine output.
|
|
51
|
-
4. `npx greenlight-motion@0.1.
|
|
51
|
+
4. `npx greenlight-motion@0.1.2 stills <folder>` — renders frames and **a labelled contact sheet**. Open and look at
|
|
52
52
|
it before you go on: layout, readability, timing. Fix and repeat. `--at 0.5,1.2,3` for exact times.
|
|
53
53
|
5. Hand it over: tell the user to open `<folder>/index.html` (Chrome or Edge), or `pack` it into one file, or
|
|
54
54
|
`render` the MP4 yourself (`--fps 60 --motion-blur` for fast motion).
|
|
@@ -111,9 +111,9 @@ editor's own normalizer), so write only what you mean.
|
|
|
111
111
|
- Not here: MotionFast templates (`mediaType: "motion"`) live only in GreenLight Dash — build the look from layers.
|
|
112
112
|
|
|
113
113
|
Full references (generated from the editor's own docs; ignore the `/api/` routes they mention):
|
|
114
|
-
`skill/references/` — scene-script, video-projects, video-text, video-text-kinetic, video-text-presets, video-shapes, video-keyframes,
|
|
114
|
+
`skill/references/` — video-design, scene-script, video-projects, video-text, video-text-kinetic, video-text-presets, video-shapes, video-keyframes,
|
|
115
115
|
video-camera, video-3d, video-effects, video-transitions, video-particles, video-paths, video-backgrounds, video-grid.
|
|
116
|
-
Machine-readable lists: `npx greenlight-motion@0.1.
|
|
116
|
+
Machine-readable lists: `npx greenlight-motion@0.1.2 schema effects | transitions | easings | paths | expressions`.
|
|
117
117
|
|
|
118
118
|
## Template
|
|
119
119
|
|
|
@@ -160,7 +160,7 @@ an absolute moment; `align` `sync` (default) / `start` / `end`; `offset` seconds
|
|
|
160
160
|
|
|
161
161
|
The library is 77 hand-picked sounds in categories (whooshes and swooshes, transitions, clicks, pop-ups and
|
|
162
162
|
notifications, data blips, typing and writing, foley, bubbles, impacts and bass drops, camera, gears, voice clips).
|
|
163
|
-
`npx greenlight-motion@0.1.
|
|
163
|
+
`npx greenlight-motion@0.1.2 schema sounds` lists every one with its `category`, `use` (what it is for), `duration`
|
|
164
164
|
and `sync`. Pick by `category` and `use`, then by name.
|
|
165
165
|
|
|
166
166
|
- **Where the files come from:** the GreenLight sound CDN. `build` downloads each sound a cue uses into
|
|
@@ -176,7 +176,7 @@ The page has **Notes**: the user marks what should change right on the frame (a
|
|
|
176
176
|
and writes a note for each mark. Every note carries the moment (seconds and frame), the mark in composition pixels
|
|
177
177
|
and the layers under it (item ids in project.json), so you change exactly that and nothing else.
|
|
178
178
|
|
|
179
|
-
- **They review on this computer:** run `npx greenlight-motion@0.1.
|
|
179
|
+
- **They review on this computer:** run `npx greenlight-motion@0.1.2 review <folder>` and give them the URL it prints
|
|
180
180
|
(it keeps running; `--open` opens their browser, only when they ask). Their notes land in `<folder>/review/`: read
|
|
181
181
|
`review/NOTES.md`, look at the `at-<t>s.png` pictures (the marks are numbered), make the changes (`apply`), `build`
|
|
182
182
|
again and tell them to reload the page.
|
|
@@ -205,11 +205,11 @@ that fails (`plugin`); look at `stills` for the look. A package that carries its
|
|
|
205
205
|
|
|
206
206
|
The same project opens in GreenLight Dash (the desktop editor this engine comes from) for full editing: the page's
|
|
207
207
|
edit note offers **Open in GreenLight Dash** (it imports the folder as a new project on the open board; a page with
|
|
208
|
-
changes saves a `.glvideo`). `npx greenlight-motion@0.1.
|
|
208
|
+
changes saves a `.glvideo`). `npx greenlight-motion@0.1.2 pack <folder> --glvideo` writes that file yourself: ONE
|
|
209
209
|
`.glvideo` (the project + its files) that opens in GreenLight Dash on a double-click, or dropped on its board. Hand it
|
|
210
210
|
over when the user wants to keep editing in the app. A
|
|
211
211
|
GreenLight Dash project comes the other way through the app's **Export for agents** — a ready folder like the one
|
|
212
|
-
`init` makes, with the options the author ticked. `npx greenlight-motion@0.1.
|
|
212
|
+
`init` makes, with the options the author ticked. `npx greenlight-motion@0.1.2 init <folder> --from <its project.json>`
|
|
213
213
|
starts from one too. Never tell the user they must install it: the page plays, changes options and renders on its own.
|
|
214
214
|
|
|
215
215
|
## Files
|
|
@@ -238,13 +238,6 @@ When the user has not named one, choose from these first. Each still has to suit
|
|
|
238
238
|
|
|
239
239
|
## Motion design that looks made, not generated
|
|
240
240
|
|
|
241
|
-
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
Playful arrivals: `Back Out` or `Overshoot`. Exits: `Ease In`. `Linear` only for constant motion (tickers, rotation).
|
|
245
|
-
The full list with the real curves: `schema easings`.
|
|
246
|
-
- **One focal move at a time.** If everything moves, nothing reads. Secondary elements move less and later.
|
|
247
|
-
- **Hierarchy through size and weight**, not colour alone; keep text inside the safe area (|panX|, |panY| ≤ 40).
|
|
248
|
-
- **Camera** moves are slow and small unless they are the point. Fast motion at 60 fps with motion blur.
|
|
249
|
-
- **Review the contact sheet** every round: blank frames, collisions, unreadable text, and anything off-frame are
|
|
250
|
-
your bugs to fix before the user sees them.
|
|
241
|
+
Read `skill/references/video-design.md` before the first version and check every version against it: one idea per
|
|
242
|
+
scene, words on screen, hierarchy, timing, easing by intent, text animation picks, transitions, camera, sound and what
|
|
243
|
+
to look for in the contact sheet. It is the same text GreenLight Dash's agents and the chat connector use.
|
|
@@ -58,15 +58,8 @@ works too (it has to stay reachable). SVG you write: `{ "type": "image", "svg":
|
|
|
58
58
|
|
|
59
59
|
## What makes it look made, not generated
|
|
60
60
|
|
|
61
|
-
-
|
|
62
|
-
|
|
63
|
-
- **Timing**: stagger related elements 0.06–0.12 s; one focal move at a time — supporting elements move less and later; exits faster than entrances.
|
|
64
|
-
- **Text animation** moves words or letters, never whole lines (the presets do this). Keep one family per video; use calm presets (glide-text,
|
|
65
|
-
classic-fade-up, classic-rise-mask) for long lines, punchy ones (swing-pop, whip, letter-vortex) for 1–3 words. glide-continuous and
|
|
66
|
-
glide-soft-stop never let the text rest: only when the user asks for drifting text.
|
|
67
|
-
- **Transitions**: vary two or three kinds across the video; the camera stays subtle.
|
|
68
|
-
- **Sound**: auto is a good base; add `data-1` / `selection-data-click` for UI-like pops, `cinematic-transition-13` for a big reveal.
|
|
69
|
-
- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.
|
|
61
|
+
references/video-design.md — the same design rules GreenLight Dash's agents and the chat connector use. Read it before
|
|
62
|
+
the first version and check every version against it.
|
|
70
63
|
|
|
71
64
|
## Catalogues
|
|
72
65
|
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Motion design that looks made, not generated
|
|
2
|
+
|
|
3
|
+
What makes a video read as designed rather than generated. The rules hold however the video is built — a project
|
|
4
|
+
through the app's API, `project.json` with the engine's CLI, or a scene script — so read them before the first version
|
|
5
|
+
and check every version against them.
|
|
6
|
+
|
|
7
|
+
## Story and words
|
|
8
|
+
|
|
9
|
+
- **One idea per scene**: 3–6 scenes of 2–3 s for a short video. A scene that says two things says neither.
|
|
10
|
+
- **At most ~8 words on screen at once, held at least 1 s.** People read about 3 words a second; text that leaves
|
|
11
|
+
before it is read is noise.
|
|
12
|
+
- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.
|
|
13
|
+
|
|
14
|
+
## Hierarchy
|
|
15
|
+
|
|
16
|
+
- One headline per scene; supporting text much smaller. Hierarchy comes from size and weight, not colour alone.
|
|
17
|
+
- One accent colour and strong contrast.
|
|
18
|
+
- Keep text inside the middle 80 % of the frame (in a project: |panX| and |panY| ≤ 40): players and feeds crop the
|
|
19
|
+
edges.
|
|
20
|
+
|
|
21
|
+
## Timing
|
|
22
|
+
|
|
23
|
+
- Stagger related elements by 0.06–0.12 s.
|
|
24
|
+
- **One focal move at a time.** If everything moves, nothing reads: supporting elements move less and later.
|
|
25
|
+
- Shapes and pictures enter in 0.4–0.8 s; exits are faster than entrances.
|
|
26
|
+
- A text animation takes at least 0.8–1 s over the whole line, first unit in to last unit settled, unless the video
|
|
27
|
+
needs snap (a beat hit, a glitch flick): faster text flashes past before it is read. The arithmetic per kind of
|
|
28
|
+
animation: video-projects.md, Text animation pace.
|
|
29
|
+
|
|
30
|
+
## Easing by intent
|
|
31
|
+
|
|
32
|
+
- Entrances: `AE Out` or `Expo Out` (fast start, soft landing). Camera and big moves: `AE Smooth`.
|
|
33
|
+
- A layer that passes through (in, glide, out): `Smooth Glide` with the `glide` expression — the Glide keyframe
|
|
34
|
+
presets build it (video-keyframes.md).
|
|
35
|
+
- Playful arrivals: `Back Out` or `Overshoot`. Exits: `Ease In`.
|
|
36
|
+
- `Linear` only for constant motion: tickers, rotation, progress along a path.
|
|
37
|
+
|
|
38
|
+
## Text animation
|
|
39
|
+
|
|
40
|
+
- Animate words or letters, never a whole line at once — the text presets do this.
|
|
41
|
+
- One family per video. Calm presets for lines and captions: Glide Text (`glide-text`), Classic Fade Up
|
|
42
|
+
(`classic-fade-up`), Classic Rise (Mask) (`classic-rise-mask`); Focus Type (`focus-type`) for a title.
|
|
43
|
+
- Punchy presets that tilt or overshoot — Swing Pop (`swing-pop`), Whip (`whip`), Letter Vortex (`letter-vortex`) —
|
|
44
|
+
only on 1–3 words when the video wants energy. On a longer caption they read cheap.
|
|
45
|
+
- Glide Continuous (`glide-continuous`) and Glide Soft Stop (`glide-soft-stop`) never let the text rest: use them
|
|
46
|
+
only when the user asks for drifting text.
|
|
47
|
+
- On a coloured card, pick a preset without a colour band (Classic Rise (Mask), Classic Fade Up): a band's colour can
|
|
48
|
+
clash with the card.
|
|
49
|
+
|
|
50
|
+
## Transitions and camera
|
|
51
|
+
|
|
52
|
+
- Vary two or three kinds of transition across a video: one kind everywhere looks like a template, a new one at
|
|
53
|
+
every cut looks random.
|
|
54
|
+
- Camera moves are slow and small unless they are the point. Fast motion looks best at 60 fps with motion blur.
|
|
55
|
+
|
|
56
|
+
## Sound
|
|
57
|
+
|
|
58
|
+
- A soft whoosh on each transition and on the first headline is a good base. `data-1` or `selection-data-click` for
|
|
59
|
+
UI-like pops, `cinematic-transition-13` for one big reveal.
|
|
60
|
+
|
|
61
|
+
## What to check in every version
|
|
62
|
+
|
|
63
|
+
Look at real frames across the video (a contact sheet) before the user sees it — the JSON doesn't show these:
|
|
64
|
+
blank or empty frames, overlapping or cut-off text, text too small or gone too fast, nothing moving or everything
|
|
65
|
+
moving at once, weak hierarchy, clashing colours. Fix them and look again; two rounds are usually enough.
|
|
@@ -367,13 +367,16 @@ POST /api/moodboards/{board_id}/video-projects/{project_id}/export-light
|
|
|
367
367
|
POST /api/moodboards/{board_id}/video-projects/import-light
|
|
368
368
|
{ "path": "/abs/folder | …/index.html | a one-file page.html | a .glvideo file", "activate?": true }
|
|
369
369
|
→ the new project (like POST video-projects) + { copied }
|
|
370
|
-
GET /api/moodboards/{board_id}/video-projects/{project_id}/glvideo
|
|
371
|
-
→ <name>.glvideo (answers once the whole file is written
|
|
370
|
+
GET /api/moodboards/{board_id}/video-projects/{project_id}/glvideo?models=<JSON { "<preset id>": "<the URL the app serves its .glb at>" }>
|
|
371
|
+
→ <name>.glvideo (answers once the whole file is written; `models` as in export-light's modelFiles — without it the
|
|
372
|
+
3D device presets are left out)
|
|
372
373
|
```
|
|
373
374
|
|
|
374
375
|
- A `.glvideo` is the same project folder in one stored zip: `glvideo.json` (`{format: "glvideo", version: 1, title}`),
|
|
375
|
-
`project.json`, `assets/media/<rel
|
|
376
|
-
`import-light` with its path opens it there as a new
|
|
376
|
+
`project.json`, `assets/media/<rel>`, `assets/hdr/` and `assets/models/` (the 3D device presets the project uses). It
|
|
377
|
+
is the file to hand a project to another GreenLight Dash (`import-light` with its path opens it there as a new
|
|
378
|
+
project) or to a chat: the GreenLight Motion connector's `open_video` page reads it in the user's browser, and
|
|
379
|
+
`get_video` / `edit_video` change it there.
|
|
377
380
|
|
|
378
381
|
- `template.fields[]` = `{ key, label, type: text|color|image|number|select|toggle, targets: [{ itemId | clipId | (neither = project), path }] }`
|
|
379
382
|
— e.g. `{ "key": "headline", "label": "Headline", "type": "text", "targets": [{ "itemId": "<item id>", "path": "textContent" }] }`,
|