greenlight-motion 0.1.1 → 0.1.3

package/README.md

@@ -17,16 +17,16 @@ The agent writes the video as data: a `project.json` and its files. The engine t
 ## Quick start
 
 ```bash
-npx greenlight-motion@0.1.1 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
-npx greenlight-motion@0.1.1 init my-video   # a working starter: index.html, project.json, assets/
+npx greenlight-motion@0.1.3 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
+npx greenlight-motion@0.1.3 init my-video   # a working starter: index.html, project.json, assets/
 # edit my-video/project.json, put pictures / video / sound in my-video/assets/
 # or: write my-video/script.json (a scene script, skill/references/scene-script.md), then
-npx greenlight-motion@0.1.1 script my-video # script.json → project.json with the Video Editor's own presets
-npx greenlight-motion@0.1.1 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
-npx greenlight-motion@0.1.1 stills my-video # frames + a labelled contact sheet, to look at
-npx greenlight-motion@0.1.1 render my-video --fps 60 --motion-blur
-npx greenlight-motion@0.1.1 pack my-video   # everything in ONE html file
-npx greenlight-motion@0.1.1 pack my-video --glvideo   # ONE .glvideo: double-clicked, it opens in GreenLight Dash
+npx greenlight-motion@0.1.3 script my-video # script.json → project.json with the Video Editor's own presets
+npx greenlight-motion@0.1.3 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
+npx greenlight-motion@0.1.3 stills my-video # frames + a labelled contact sheet, to look at
+npx greenlight-motion@0.1.3 render my-video --fps 60 --motion-blur
+npx greenlight-motion@0.1.3 pack my-video   # everything in ONE html file
+npx greenlight-motion@0.1.3 pack my-video --glvideo   # ONE .glvideo: double-clicked, it opens in GreenLight Dash
 ```
 
 Also: `trace` (every animated layer's values frame by frame, plus the layer's moments), `set key=value`
@@ -72,16 +72,21 @@ The engine is one classic script, so it runs from a double-clicked file, a CDN o
 
 ```html
 <div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/greenlight-motion@0.1.1/dist/greenlight-motion.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/greenlight-motion@0.1.3/dist/greenlight-motion.js"></script>
 <script>
-  GreenLightMotion.mountPage(document.getElementById('app'), {
+  GreenLightMotion.mountStudio(document.getElementById('app'), {
     project: { /* project.json */ },
     assets: { 'asset:photo.jpg': 'data:image/jpeg;base64,…' },   // ref → data: / blob: / https: URL or Blob
-    theme: 'auto',                                                 // 'dark' (default) | 'light' | 'auto'
   });
 </script>
 ```
 
+`mountStudio` is the page every GreenLight surface shows (a project folder's page, a chat's GreenLight Motion page, a
+shared link, a review card on a board): the preview with Edit · Notes · Highlight, the inspector, the layers and Render.
+Its review (notes with drawings, highlights, changes) is text to copy for your agent; a host can send it elsewhere
+(`config.save`). `GreenLightMotion.mountPage(el, { project, assets, theme })` is the plain page under it, without the
+review interface.
+
 Without the page UI (in the browser, through a bundler or the ESM build; Node runs only the CLI):
 
 ```js
@@ -104,8 +109,8 @@ artifact's `downloads` capability.
 ## GreenLight Dash
 
 A project made here opens in the desktop editor for full editing: the page's **Open in GreenLight
-Dash** imports it as a new project. The editor's **Export for agents** works the other way and gives
-an agent a ready folder. MotionFast templates and effect packages with their own image or video files
+Dash** imports it as a new project. The editor's **Export for agents** works the other way: one
+`.glvideo` file to open in a Claude chat, or a ready folder with this page for an agent. MotionFast templates and effect packages with their own image or video files
 play in GreenLight Dash only. The page shows such layers but leaves them out.
 
 ## License

package/cli/index.mjs

@@ -114,7 +114,7 @@ const indexHtml = (title) => `<!doctype html>
 <script src="greenlight-motion.js"></script>
 <script src="project.js"></script>
 <script src="assets.js"></script>
-<script>GreenLightMotion.mountPage(document.getElementById('app'), { project: window.GL_PROJECT, assets: window.GL_ASSETS });</script>
+<script>GreenLightMotion.mountStudio(document.getElementById('app'), { project: window.GL_PROJECT, assets: window.GL_ASSETS });</script>
 `;
 // JSON inside a <script>: no "</script", no "<!--" (both escapes stay valid JSON and JS, so the app can read a page back)
 const scriptSafe = (s) => s.replace(/<\/(script)/gi, '<\\/$1').replace(/<!--/g, '<\\u0021--');

package/dist/bundle-inputs.json

@@ -15,6 +15,7 @@
   "frontend/src/components/mockupGenerator/backgroundSelector.css",
   "frontend/src/components/mockupGenerator/screenTexture.js",
   "frontend/src/components/model3dFallback.jsx",
+  "frontend/src/components/sketch/sketchEngine.js",
   "frontend/src/components/videoEditor/DirectionPad.jsx",
   "frontend/src/components/videoEditor/Fields.jsx",
   "frontend/src/components/videoEditor/KeyframePresetModal.jsx",
@@ -324,6 +325,21 @@
   "frontend/src/motionEngine/soundCues.js",
   "frontend/src/motionEngine/soundLibrary.js",
   "frontend/src/motionEngine/stubs/motionTemplatesRegistry.js",
+  "frontend/src/motionEngine/studio/color.css",
+  "frontend/src/motionEngine/studio/color.js",
+  "frontend/src/motionEngine/studio/focus.css",
+  "frontend/src/motionEngine/studio/gizmo.js",
+  "frontend/src/motionEngine/studio/highlight.css",
+  "frontend/src/motionEngine/studio/highlight.js",
+  "frontend/src/motionEngine/studio/index.js",
+  "frontend/src/motionEngine/studio/inspector.js",
+  "frontend/src/motionEngine/studio/lab.css",
+  "frontend/src/motionEngine/studio/lab.js",
+  "frontend/src/motionEngine/studio/navigator.css",
+  "frontend/src/motionEngine/studio/notes.css",
+  "frontend/src/motionEngine/studio/notes.js",
+  "frontend/src/motionEngine/studio/review.css",
+  "frontend/src/motionEngine/studio/review.js",
   "frontend/src/motionEngine/template.js",
   "frontend/src/motionEngine/trace.js",
   "frontend/src/motionEngine/useReview.js",

package/dist/greenlight-motion-script.mjs

@@ -16591,6 +16591,11 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
 
 // src/motionEngine/sceneScriptGuide.js
 init_define_import_meta_env();
+
+// ../skills/greenlight-dash/references/video-design.md
+var video_design_default = "# Motion design that looks made, not generated\n\nWhat makes a video read as designed rather than generated. The rules hold however the video is built \u2014 a project\nthrough the app's API, `project.json` with the engine's CLI, or a scene script \u2014 so read them before the first version\nand check every version against them.\n\n## Story and words\n\n- **One idea per scene**: 3\u20136 scenes of 2\u20133 s for a short video. A scene that says two things says neither.\n- **At most ~8 words on screen at once, held at least 1 s.** People read about 3 words a second; text that leaves\n  before it is read is noise.\n- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.\n\n## Hierarchy\n\n- One headline per scene; supporting text much smaller. Hierarchy comes from size and weight, not colour alone.\n- One accent colour and strong contrast.\n- Keep text inside the middle 80 % of the frame (in a project: |panX| and |panY| \u2264 40): players and feeds crop the\n  edges.\n\n## Timing\n\n- Stagger related elements by 0.06\u20130.12 s.\n- **One focal move at a time.** If everything moves, nothing reads: supporting elements move less and later.\n- Shapes and pictures enter in 0.4\u20130.8 s; exits are faster than entrances.\n- A text animation takes at least 0.8\u20131 s over the whole line, first unit in to last unit settled, unless the video\n  needs snap (a beat hit, a glitch flick): faster text flashes past before it is read. The arithmetic per kind of\n  animation: video-projects.md, Text animation pace.\n\n## Easing by intent\n\n- Entrances: `AE Out` or `Expo Out` (fast start, soft landing). Camera and big moves: `AE Smooth`.\n- A layer that passes through (in, glide, out): `Smooth Glide` with the `glide` expression \u2014 the Glide keyframe\n  presets build it (video-keyframes.md).\n- Playful arrivals: `Back Out` or `Overshoot`. Exits: `Ease In`.\n- `Linear` only for constant motion: tickers, rotation, progress along a path.\n\n## Text animation\n\n- Animate words or letters, never a whole line at once \u2014 the text presets do this.\n- One family per video. Calm presets for lines and captions: Glide Text (`glide-text`), Classic Fade Up\n  (`classic-fade-up`), Classic Rise (Mask) (`classic-rise-mask`); Focus Type (`focus-type`) for a title.\n- Punchy presets that tilt or overshoot \u2014 Swing Pop (`swing-pop`), Whip (`whip`), Letter Vortex (`letter-vortex`) \u2014\n  only on 1\u20133 words when the video wants energy. On a longer caption they read cheap.\n- Glide Continuous (`glide-continuous`) and Glide Soft Stop (`glide-soft-stop`) never let the text rest: use them\n  only when the user asks for drifting text.\n- On a coloured card, pick a preset without a colour band (Classic Rise (Mask), Classic Fade Up): a band's colour can\n  clash with the card.\n\n## Transitions and camera\n\n- Vary two or three kinds of transition across a video: one kind everywhere looks like a template, a new one at\n  every cut looks random.\n- Camera moves are slow and small unless they are the point. Fast motion looks best at 60 fps with motion blur.\n\n## Sound\n\n- A soft whoosh on each transition and on the first headline is a good base. `data-1` or `selection-data-click` for\n  UI-like pops, `cinematic-transition-13` for one big reveal.\n\n## What to check in every version\n\nLook at real frames across the video (a contact sheet) before the user sees it \u2014 the JSON doesn't show these:\nblank or empty frames, overlapping or cut-off text, text too small or gone too fast, nothing moving or everything\nmoving at once, weak hierarchy, clashing colours. Fix them and look again; two rounds are usually enough.\n";
+
+// src/motionEngine/sceneScriptGuide.js
 var PREFERRED = {
   text: ["glide-text", "ember-type", "marker", "outline-pass", "neon-flow", "glitch", "swing-pop", "pendulum", "fan-deal", "whip", "word-swing", "letter-vortex"],
   transitions: ["Cross Fade", "Advanced Zoom", "Advanced Movement", "Circular Wipe", "Pixel Blocks", "Camera Whip", "Zoom Ruler", "Gradient Glow Stack", "Gradient Map"],
@@ -16647,17 +16652,7 @@ function scriptFormatGuide(host = "chat") {
 `;
 }
 function designGuide() {
-  return `## What makes it look made, not generated
-
-- **One idea per scene**, 3\u20136 scenes, 2\u20133 s each; at most ~8 words on screen at once, held \u2265 1 s (people read ~3 words a second).
-- **Hierarchy**: one headline per scene; supporting text much smaller; one accent colour; strong contrast.
-- **Timing**: stagger related elements 0.06\u20130.12 s; one focal move at a time \u2014 supporting elements move less and later; exits faster than entrances.
-- **Text animation** moves words or letters, never whole lines (the presets do this). Keep one family per video; use calm presets (glide-text,
-  classic-fade-up, classic-rise-mask) for long lines, punchy ones (swing-pop, whip, letter-vortex) for 1\u20133 words. glide-continuous and
-  glide-soft-stop never let the text rest: only when the user asks for drifting text.
-- **Transitions**: vary two or three kinds across the video; the camera stays subtle.
-- **Sound**: auto is a good base; add \`data-1\` / \`selection-data-click\` for UI-like pops, \`cinematic-transition-13\` for a big reveal.
-- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.
+  return `${video_design_default.replace(/^(#+) /gm, "#$1 ").trim()}
 
 `;
 }