greenlight-motion 0.2.2 → 0.2.4

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.2.2 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
-npx greenlight-motion@0.2.2 init my-video   # a working starter: index.html, project.json, assets/
+npx greenlight-motion@0.2.4 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
+npx greenlight-motion@0.2.4 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.2.2 script my-video # script.json → project.json with the Video Editor's own presets
-npx greenlight-motion@0.2.2 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
-npx greenlight-motion@0.2.2 stills my-video # frames + a labelled contact sheet, to look at
-npx greenlight-motion@0.2.2 render my-video --fps 60 --motion-blur
-npx greenlight-motion@0.2.2 pack my-video   # everything in ONE html file
-npx greenlight-motion@0.2.2 pack my-video --glvideo   # ONE .glvideo: double-clicked, it opens in GreenLight Dash
+npx greenlight-motion@0.2.4 script my-video # script.json → project.json with the Video Editor's own presets
+npx greenlight-motion@0.2.4 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
+npx greenlight-motion@0.2.4 stills my-video # frames + a labelled contact sheet, to look at
+npx greenlight-motion@0.2.4 render my-video --fps 60 --motion-blur
+npx greenlight-motion@0.2.4 pack my-video   # everything in ONE html file
+npx greenlight-motion@0.2.4 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,7 +72,7 @@ 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.2.2/dist/greenlight-motion.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/greenlight-motion@0.2.4/dist/greenlight-motion.js"></script>
 <script>
   GreenLightMotion.mountStudio(document.getElementById('app'), {
     project: { /* project.json */ },

package/cli/index.mjs

@@ -344,12 +344,20 @@ async function check() {
       else if (p.ok == null) problems.push({ code: 'plugin', ref, detail: 'it did not load', fix: "check the package's exports against the custom-effects / advanced-transitions starter and that its file name is its id" });
     }
     for (const e of errors) problems.push({ code: 'page-error', detail: e, fix: 'a value in project.json the engine cannot use; compare with the references in the skill' });
-    return { ok: problems.length === 0, duration, problems };
+    // notes: worth a look, not wrong by themselves — text the engine wraps onto more lines than it was written with
+    const notes = [];
+    for (const w of await page.evaluate((proj) => window.GreenLightMotion.textWraps?.(proj) || [], project)) {
+      notes.push({ code: 'text-wraps', ref: w.id, rows: w.rows, written: w.written,
+        detail: `"${w.text}" (${w.fontPx} px) wraps onto ${w.rows} lines in its ${w.widthPx} px box, written as ${w.written}`,
+        fix: `if the break is wanted, write it into the text (\\n); if not, widen the box (textWidthPx, or the script's width) or lower the size` });
+    }
+    return { ok: problems.length === 0, duration, problems, notes };
   });
   if (flags.json) console.log(JSON.stringify(result, null, 2));
   else {
     console.log(result.ok ? `ok — ${result.duration.toFixed(2)} s, nothing to fix` : `${result.problems.length} problem(s):`);
     for (const p of result.problems) console.log(`- ${p.code}: ${p.ref || p.detail || (p.times || []).join(', ')}\n  → ${p.fix}`);
+    for (const n of result.notes || []) console.log(`note — ${n.code} ${n.ref}: ${n.detail}\n  → ${n.fix}`);
   }
   process.exitCode = result.ok ? 0 : 1;
 }

package/dist/bundle-inputs.json

@@ -356,6 +356,7 @@
   "frontend/src/motionEngine/studio/review.js",
   "frontend/src/motionEngine/studio/voice.js",
   "frontend/src/motionEngine/template.js",
+  "frontend/src/motionEngine/textWraps.js",
   "frontend/src/motionEngine/trace.js",
   "frontend/src/motionEngine/useReview.js",
   "frontend/src/platform/compact.js",

package/dist/greenlight-motion-script.mjs

@@ -20844,6 +20844,12 @@ var contrast = (a, b2) => {
   return la == null || lb == null ? 21 : (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
 };
 var EDGE_FILLED = /* @__PURE__ */ new Set(["Advanced Movement"]);
+var backdropLuma = (bg) => {
+  if (!bg) return null;
+  const hexes = bg.type === "gradient" ? String(bg.gradientCss || "").match(/#[0-9a-f]{6}\b|#[0-9a-f]{3}\b/gi) || [] : bg.type === "solid" ? [bg.solidColor] : [];
+  const ls = hexes.map(luminance).filter((v) => v != null);
+  return ls.length ? ls.reduce((a, b2) => a + b2, 0) / ls.length : null;
+};
 var GOOGLE_FAMILIES = new Set(googleFontCatalog_default.split("\n").map((l) => l.split("|")[0].trim().toLowerCase()).filter(Boolean));
 var KF_IN = new Map(kfpVariants(KEYFRAME_PRESETS, "in").map((p) => [p.id, p]));
 var KF_OUT = new Map(kfpVariants(KEYFRAME_PRESETS, "out").map((p) => [p.id, p]));
@@ -21059,8 +21065,8 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
           problems.push(`${cw}: keyframes.${name} \u2014 ${mode === "rig" ? "a rig" : "zooms"} drive${mode === "rig" ? "s" : ""} ${CAM_DRIVEN[mode].join(", ")} themselves; key ${Object.keys(CAM_TRACKS).filter((t) => !CAM_DRIVEN[mode].includes(t)).join(", ")}`);
           continue;
         }
-        if (!Array.isArray(keys) || keys.length < 2) {
-          problems.push(`${cw}: keyframes.${name} needs two or more [seconds, value] keys`);
+        if (!Array.isArray(keys) || keys.length < 1) {
+          problems.push(`${cw}: keyframes.${name} needs one or more [seconds, value] keys (one key holds that value)`);
           continue;
         }
         const list = [];
@@ -21086,6 +21092,7 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
           list.push({ position: r3(clamp5(Number(t) / len * 100, 0, 100)), value: String(r3(value)), easing });
         }
         if (list.length === keys.length) {
+          if (list.length === 1) list.splice(0, 1, { ...list[0], position: 0, easing: "Linear" }, { ...list[0], position: 100, easing: "Linear" });
           if (pk[track] && track !== "camPathT") warnings.push(`${cw}: keyframes.${name} replace the ${track} keys of move "${c.move}"`);
           pk[track] = list.sort((a, b2) => a.position - b2.position);
           if (name === "focusZ") item.camDofEnabled = 1;
@@ -21342,7 +21349,12 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
         const kf = {};
         const drawn = el?.draw !== false ? r3(Math.min(100, 0.9 / (end - start) * 100)) : 0;
         if (drawn) kf.lineTrimEnd = [{ position: 0, value: "0", easing: "AE Out" }, { position: drawn, value: String(full), easing: "Linear" }];
-        if (el?.drain) kf.lineTrimStart = [{ position: drawn, value: "0", easing: "Linear" }, { position: 100, value: String(full), easing: "Linear" }];
+        if (el?.drain) {
+          const len2 = Math.max(1e-3, end - start);
+          const [d0, d1] = Array.isArray(el.drain) && el.drain.length === 2 && el.drain.every((v) => Number.isFinite(Number(v))) ? el.drain.map((v) => clamp5(Number(v) / len2 * 100, 0, 100)) : [drawn, 100];
+          if (d1 <= d0) problems.push(`${ew}: drain is [start, end] seconds into the element, end after start`);
+          else kf.lineTrimStart = [{ position: r3(d0), value: "0", easing: "Linear" }, { position: r3(d1), value: String(full), easing: "Linear" }];
+        }
         if (Object.keys(kf).length) item.propertyKeyframes = kf;
         if (!el?.color || el.color === "accent") accentTargets.push({ itemId: id, path: "shapeFillColor" });
       } else if (type === "line") {
@@ -21400,8 +21412,8 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
             problems.push(`${ew}: keyframes "${name}" \u2014 one of ${Object.keys(KF_TRACKS).join(", ")}`);
             continue;
           }
-          if (!Array.isArray(keys) || keys.length < 2) {
-            problems.push(`${ew}: keyframes.${name} needs two or more [seconds, value] keys`);
+          if (!Array.isArray(keys) || keys.length < 1) {
+            problems.push(`${ew}: keyframes.${name} needs one or more [seconds, value] keys (one key holds that value)`);
             continue;
           }
           const list = [];
@@ -21418,6 +21430,7 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
             list.push({ position: r3(clamp5(Number(t) / len * 100, 0, 100)), value: String(name === "opacity" ? clamp5(Number(v), 0, 1) : Number(v)), easing });
           }
           if (list.length === keys.length) {
+            if (list.length === 1) list.splice(0, 1, { ...list[0], position: 0, easing: "Linear" }, { ...list[0], position: 100, easing: "Linear" });
             if (item.propertyKeyframes?.[track]) warnings.push(`${ew}: keyframes.${name} replace the ${track} keys of its entrance / exit`);
             item.propertyKeyframes = { ...item.propertyKeyframes || {}, [track]: list.sort((a, b2) => a.position - b2.position) };
           }
@@ -21465,6 +21478,7 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
             if (own.includes(k)) own.splice(own.indexOf(k), 1);
           }
         }
+        if (tr === "Circular Wipe" && opts.beam === void 0 && (backdropLuma(sceneBg || projectBg) ?? 0) > 0.4) opts.beam = false;
         for (const k of own) accentTargets.push({ itemId: sceneId, path: `transitionOptions.${k}` });
         if (Object.keys(opts).length) sceneItem.transitionOptions = opts;
         sceneItem.transitionDuration = r3(clamp5(num7(sc?.transitionDuration, 0.6), 0.2, Math.min(prev, D) / 2));
@@ -21590,25 +21604,27 @@ matte, masks, particles, 3D) goes on from \`project.json\`: SKILL.md, "Beyond th
   a CSS gradient; \`width\` (px, wraps), \`align\`, \`uppercase\`, \`letterSpacing\`, \`lineHeight\`. A headline gets \`glide-text\` unless you set \`textAnimation\`.
   The text box is CENTRED on \`at\`: without \`width\` it is as wide as its words but stays inside the frame (off-centre text wraps
   sooner); for a left-aligned column give \`width\` and \`"align": "left"\` and put \`at\` at the column's centre.
-- **rect \xB7 pill \xB7 circle**: \`w\`, \`h\`, \`color\` (or a CSS gradient), \`radius\`, \`border\` {width, color}, \`shadow\`: true. They enter with \`pop-overshoot\` unless you set \`enter\`.
+- **rect \xB7 pill \xB7 circle**: \`w\`, \`h\`, \`color\` (or a CSS gradient), \`radius\`, \`border\` {width, color}, \`shadow\`: true. They enter with \`pop-overshoot\` unless you set \`enter\` (\`"none"\`: no entrance, it is simply there).
 - **line**: from \`at\` to \`to\`, \`width\`, drawn on (\`draw\`: false to skip).
 - **ring**: a circle drawn as a stroke from the top, clockwise (a timer, a status or focus ring): \`w\` (diameter), \`width\` (stroke),
   \`color\`, \`sweep\` (degrees, 360 = full), drawn on (\`draw\`: false to skip), \`drain\`: true empties it again by the element's
-  end (a countdown), \`ghost\` (0\u2013100: a faint full track under it).
+  end (a countdown) or \`[start, end]\` (s into the element) empties it then, \`ghost\` (0\u2013100: a faint full track under it).
 - **image \xB7 video**: \`src\` (${host === "chat" ? "a link or the user's file \u2014 below" : "a file in the folder's assets/ as `asset:<name>`, or an https link"}) or, for an image, \`svg\` (SVG markup you write); \`w\` or \`h\`
   (px; the other follows the file's shape) or \`fit\` cover | contain
   (default: a video covers the frame, a picture sits at 70 % of contain), \`rotate\` (deg). A video also takes
   \`startAt\` (s into the file) and \`volume\` (0\u2013100, default muted). No entrance unless you set \`enter\`.
 - **Keyframes on any element** \u2014 your own motion: \`"keyframes": { "x": [[0, -400], [0.8, 0, "Smooth Glide"]], "scale": [[0, 0.9], [2, 1.05]] }\`
   \u2014 tracks x, y (px offsets from \`at\`), scale, rotate (deg), opacity (0\u20131); each key [seconds into the element, value, easing of the
-  segment after it \u2014 Smooth Glide, AE Smooth, Expo Out, Back Out, Elastic, Linear \u2026]. They replace an entrance's keys on the same track.
+  segment after it \u2014 Smooth Glide, AE Smooth, Expo Out, Back Out, Elastic, Linear \u2026]. They replace an entrance's keys on the same track;
+  one key holds that value for the whole element.
 - **Every element**: \`start\` / \`end\` (s within its scene; default: staggered 0.12 s, to the scene's end), \`enter\` / \`exit\` (keyframe presets, \`direction\` up | down | left | right
   for directional ones), \`effects\`: [{ "id", "params"? }], \`sound\` (played at its start), \`id\`, \`label\` (its name in the page's options), \`opacity\` (0\u20131),
   \`z\` (px of depth, + toward the viewer, default 0: a real camera's dolly, orbit and depth of field separate layers by it), \`locked\`: true
   (the scene's camera doesn't move it: a logo, a caption). Keyframes also take a \`z\` track.
 - **Scene**: \`duration\` (s), \`transition\` into it (default Cross Fade, 0.6 s; \`transitionDuration\`), \`transitionOptions\` (the
   transition's own settings, e.g. Circular Wipe's \`point\` { x, y } (% of the frame from its top-left: 50, 50 is the centre) and \`feather\`; ${host === "chat" ? 'every option: get_motion_reference "video-transitions"' : "every option: `npx greenlight-motion schema transitions`"}.
-  A transition's vivid colours, such as Circular Wipe's beam, take the accent unless you set them), \`camera\` (below; default push-in),
+  A transition's vivid colours, such as Circular Wipe's beam, take the accent unless you set them; over a light backdrop Circular
+  Wipe's glowing beam is off, since it flares there, unless you set \`beam\`), \`camera\` (below; default push-in),
   \`background\` (overrides style), \`sounds\`: [{ "sfx", "at" }]. Script-level \`sound\`: auto (default: a whoosh on each transition and
   on the first headline, from the GreenLight sound library${host === "chat" ? "" : ", which the CLI downloads into assets/sounds/ when it builds"}) | none (nothing from the library: when
   nothing may be downloaded, use \`music\` with a file you made).