@vibeframe/cli 0.104.2 → 0.104.3

package/dist/index.js

@@ -26478,7 +26478,7 @@ YAML cues that drive narration, backdrop generation, and timing.
 
 \`\`\`yaml
 narration: "Introduce the promise in one crisp sentence."
-backdrop: "Cinematic abstract technology backdrop, precise light, premium editorial feel"
+backdrop: "Topic-aligned editorial background plate, abstract visual system, no readable text, no logos, no consumer products, clean negative space for HTML overlays"
 duration: 4
 \`\`\`
 
@@ -26489,7 +26489,7 @@ screen and one spoken breath.
 
 \`\`\`yaml
 narration: "Show the mechanism or proof point that makes the promise believable."
-backdrop: "Layered interface details, subtle motion trails, high-contrast product storytelling"
+backdrop: "Topic-aligned analytical background plate, abstract dashboard structure, no readable text, no product photos, no shoes, no unrelated objects"
 duration: 4
 \`\`\`
 
@@ -26500,7 +26500,7 @@ before/after.
 
 \`\`\`yaml
 narration: "Close with the action the viewer should remember."
-backdrop: "Resolved hero frame, confident final composition, clean negative space"
+backdrop: "Resolved editorial background plate, confident final composition, clean negative space, no readable text, no logos, no unrelated products"
 duration: 4
 \`\`\`
 
@@ -26633,7 +26633,11 @@ npx hyperframes render
    \`\`\`
 4. Videos use \`muted\` with a separate \`<audio>\` element for the audio track.
 5. Sub-compositions use \`data-composition-src="compositions/file.html"\`.
-6. Only deterministic logic \u2014 no \`Date.now()\`, \`Math.random()\`, or network fetches.
+6. For render-stable text, do not apply continuous \`scale\`, \`x\`, \`y\`, or
+   \`filter\` tweens to \`.scene-content\` or any ancestor containing live text.
+   Animate background/media layers instead; text/cards should enter briefly and
+   then hold still at their final CSS positions.
+7. Only deterministic logic \u2014 no \`Date.now()\`, \`Math.random()\`, or network fetches.
 
 ## Linting \u2014 run after changes
 
@@ -29061,13 +29065,18 @@ Requirements (non-negotiable):
   producer's seek lands past the timeline's natural end and visibility state
   goes stale \u2014 the hold phase renders BLACK. Anchor the timeline to the full
   beat duration via either:
-    1. A subtle idle motion spanning 0\u2192duration on a parent element, e.g.
-       \`tl.fromTo(".scene-content", { scale: 1.0 }, { scale: 1.015, duration: <beat>, ease: "none" }, 0);\`
+    1. A subtle idle motion spanning 0\u2192duration on a background/media layer,
+       e.g. \`tl.fromTo(".backdrop", { scale: 1.0 }, { scale: 1.015, duration: <beat>, ease: "none" }, 0);\`
        (Ken-Burns, breathing opacity, gradient drift \u2014 should be barely
        perceptible so it doesn't compete with entry/exit beats).
     2. OR an explicit \`tl.set(target, { ...natural state... }, <beat - 0.001>)\`
        anchor at the end.
   This is the #2 source of "text disappears mid-beat" bugs after \`.clip\` sizing.
+- Do not apply continuous \`scale\`, \`x\`, \`y\`, \`filter\`, or other transform
+  tweens to \`.scene-content\` or any ancestor that contains live text/cards.
+  Animate the backdrop/media plane instead; let text enter briefly, then hold
+  still at its final CSS position. Continuous transforms on text ancestors can
+  create subpixel shimmer in screenshot-captured renders.
 - Timed children inside the composition have \`class="clip"\` plus
   \`data-start\`, \`data-duration\`, \`data-track-index\`.
 - If \`assets/backdrop-${ctx.beat.id}.png\` exists, use that local file as the
@@ -29137,7 +29146,9 @@ Reference shape (verbatim \u2014 match this skeleton exactly, no DOCTYPE / html
       const tl = gsap.timeline({ paused: true });
       // Idle motion spanning full beat duration \u2014 required to keep timeline
       // length aligned with data-duration (otherwise hold phase goes black).
-      tl.fromTo(".scene-content", { scale: 1.0 }, { scale: 1.015, duration: <sec>, ease: "none" }, 0);
+      // Keep continuous motion on the background/media layer so live text does
+      // not shimmer from subpixel resampling.
+      tl.fromTo(".backdrop", { scale: 1.0 }, { scale: 1.015, duration: <sec>, ease: "none" }, 0);
       // entry tweens
       window.__timelines["${compositionId}"] = tl;
     </script>
@@ -58370,6 +58381,32 @@ var init_build_cache = __esm({
   }
 });
 
+// src/commands/_shared/build-backdrop-prompt.ts
+function augmentBackdropPrompt(cue) {
+  const trimmed = cue.trim();
+  const lower = trimmed.toLowerCase();
+  const requestsTextOrMarks = /\b(text|typography|title|headline|label|caption|logo|logos|wordmark|brand mark|brand marks)\b/.test(lower);
+  const forbidsTextOrMarks = /\b(no|without|avoid)\s+(readable\s+)?(text|typography|titles?|headlines?|labels?|captions?|brand\s+logos?|logos?|wordmarks?|brand\s+marks?)\b/.test(
+    lower
+  );
+  const allowsTextOrMarks = requestsTextOrMarks && !forbidsTextOrMarks;
+  const overlayContract = allowsTextOrMarks ? "The image is a video background or end-card plate; do not add any text, logos, charts, or UI beyond what the scene cue explicitly requests." : "The image is a background only; HTML overlays will provide all final text, charts, logos, and UI labels.";
+  const textRule = allowsTextOrMarks ? "If text, logos, or brand marks are explicitly requested, keep them minimal, legible, and do not invent extras." : "No readable text, labels, UI copy, logos, brand marks, watermarks, or invented typography.";
+  return [
+    "Create a 16:9 video background plate for a HyperFrames scene.",
+    overlayContract,
+    `Scene cue: ${trimmed}`,
+    textRule,
+    "Avoid unrelated consumer product photography, shoes, packaging, food, people, celebrity faces, advertisements, and random objects unless explicitly requested by the scene cue.",
+    "Leave generous negative space for overlay text and cards. Keep the result topic-aligned, editorial, cinematic, and non-distracting."
+  ].join(" ");
+}
+var init_build_backdrop_prompt = __esm({
+  "src/commands/_shared/build-backdrop-prompt.ts"() {
+    "use strict";
+  }
+});
+
 // src/commands/_shared/build-plan.ts
 import { existsSync as existsSync44 } from "node:fs";
 import { readFile as readFile40 } from "node:fs/promises";
@@ -58463,6 +58500,7 @@ async function createBuildPlan(opts) {
     const voice = stringOrUndefined3(cue.voice) ?? resolved.voice;
     const narrationText = stringOrUndefined3(cue.narration);
     const backdropPrompt = stringOrUndefined3(cue.backdrop);
+    const augmentedBackdropPrompt = backdropPrompt ? augmentBackdropPrompt(backdropPrompt) : null;
     const videoPrompt = stringOrUndefined3(cue.video);
     const musicPrompt = stringOrUndefined3(cue.music);
     const genericReference = resolveGenericAssetReference(projectDir, cue.asset);
@@ -58482,9 +58520,9 @@ async function createBuildPlan(opts) {
       voice,
       ext: resolved.narration.resolved === "elevenlabs" ? "mp3" : "wav"
     }) : null;
-    const backdropCache = backdropPrompt && !backdropReference ? backdropCacheDescriptor({
+    const backdropCache = augmentedBackdropPrompt && !backdropReference ? backdropCacheDescriptor({
       beatId: beat.id,
-      cue: backdropPrompt,
+      cue: augmentedBackdropPrompt,
       provider: resolved.image.resolved,
       quality: imageQuality,
       size: imageSize2,
@@ -59014,6 +59052,7 @@ var init_build_plan = __esm({
     init_build_asset_reference();
     init_build_cache();
     init_build_asset_metadata();
+    init_build_backdrop_prompt();
     init_composer_resolve();
     init_storyboard_parse();
     init_project_config();
@@ -60428,8 +60467,9 @@ async function dispatchNarration(beat, ctx) {
 async function dispatchBackdrop(beat, ctx) {
   const reference = assetReferenceForBeat(ctx.projectDir, "backdrop", beat);
   if (reference) return referencePrimitiveOutcome("backdrop", beat, ctx, reference);
-  const prompt3 = stringOrUndefined4(beat.cues?.backdrop);
-  if (!prompt3) return { status: "no-cue" };
+  const cue = stringOrUndefined4(beat.cues?.backdrop);
+  if (!cue) return { status: "no-cue" };
+  const prompt3 = augmentBackdropPrompt(cue);
   const rel = `assets/backdrop-${beat.id}.png`;
   const abs = join22(ctx.projectDir, rel);
   const size = ctx.imageSize ?? "1536x1024";
@@ -61407,6 +61447,7 @@ var init_scene_build = __esm({
     init_root_sync();
     init_build_cache();
     init_build_asset_metadata();
+    init_build_backdrop_prompt();
     init_ai_video();
     init_music();
     init_status_jobs();
@@ -71397,7 +71438,7 @@ init_source();
 // package.json
 var package_default = {
   name: "@vibeframe/cli",
-  version: "0.104.2",
+  version: "0.104.3",
   description: "VibeFrame CLI - natural language video editing from the terminal",
   private: false,
   license: "MIT",
@@ -79966,7 +80007,7 @@ function fourBeatDraft(opts) {
       title: scenic ? "First light" : "Hook",
       duration: opts.durations[0],
       narration: scenic ? `The first light reaches ${opts.product} before the day begins.` : `${opts.product} starts with one clear promise.`,
-      backdrop: scenic ? `misty mountain ridge at sunrise, golden light, fog layers, cinematic ${opts.theme}` : `polished opening frame for ${opts.product}, ${opts.theme}, clear hero subject`,
+      backdrop: scenic ? `misty mountain ridge at sunrise, golden light, fog layers, cinematic ${opts.theme}` : `topic-aligned editorial background plate for ${opts.product}, ${opts.theme}, no readable text, no logos, no unrelated consumer products, clean negative space for HTML overlays`,
       motion: scenic ? "quiet title reveal, soft parallax, slow camera drift" : "large readable headline, restrained camera push, immediate value reveal",
       body: scenic ? "Show the mountain identity immediately. Keep text minimal." : "Make the value obvious in the first beat. Avoid setup that delays the payoff."
     },
@@ -79975,7 +80016,7 @@ function fourBeatDraft(opts) {
       title: scenic ? "The path appears" : "Proof",
       duration: opts.durations[1],
       narration: scenic ? "A clear path appears when every step is visible." : "The proof appears when each step is visible.",
-      backdrop: scenic ? "ridge trail emerging through fog, warm sunrise edge light, high contrast" : `concrete proof frame for ${opts.product}, visible workflow, before and after contrast`,
+      backdrop: scenic ? "ridge trail emerging through fog, warm sunrise edge light, high contrast" : `topic-aligned proof background plate for ${opts.product}, abstract workflow structure, no readable text, no product photos, no shoes, no unrelated objects`,
       motion: scenic ? "thin line traces the path, small labels fade in" : "interface panels or proof points slide into place with precise transitions",
       body: "Connect the visual proof to the promise in one focused moment."
     },
@@ -79993,7 +80034,7 @@ function fourBeatDraft(opts) {
       title: scenic ? "Day one" : "Close",
       duration: opts.durations[3],
       narration: scenic ? `${opts.product}. Day one begins here.` : `${opts.product} is ready to show.`,
-      backdrop: scenic ? "wide mountain ridge at peak golden hour, valley filled with warm light" : `resolved final frame for ${opts.product}, clean negative space, confident lockup`,
+      backdrop: scenic ? "wide mountain ridge at peak golden hour, valley filled with warm light" : `resolved editorial background plate for ${opts.product}, clean negative space, confident lockup, no readable text, no logos, no unrelated products`,
       motion: "clean final title, slow settling motion, gentle fade to the final frame",
       body: "End with a quiet branded title and no new idea."
     }
@@ -80006,7 +80047,7 @@ function threeBeatDraft(opts) {
       title: "Hook",
       duration: opts.durations[0],
       narration: `${opts.product} starts with one clear promise.`,
-      backdrop: `polished opening frame for ${opts.product}, ${opts.theme}, clear hero subject`,
+      backdrop: `topic-aligned editorial background plate for ${opts.product}, ${opts.theme}, no readable text, no logos, no unrelated consumer products, clean negative space for HTML overlays`,
       motion: "large readable headline, restrained camera push, immediate value reveal",
       body: "Make the value obvious in one beat."
     },
@@ -80015,7 +80056,7 @@ function threeBeatDraft(opts) {
       title: "Proof",
       duration: opts.durations[1],
       narration: "The proof appears when each step is visible.",
-      backdrop: `concrete proof frame for ${opts.product}, visible workflow, before and after contrast`,
+      backdrop: `topic-aligned proof background plate for ${opts.product}, abstract workflow structure, no readable text, no product photos, no shoes, no unrelated objects`,
       motion: "layered panels, highlighted cause and effect, precise transitions",
       body: "Show the mechanism, metric, or before/after that makes the promise believable."
     },
@@ -80024,7 +80065,7 @@ function threeBeatDraft(opts) {
       title: "Close",
       duration: opts.durations[2],
       narration: `${opts.product} is ready to show.`,
-      backdrop: `resolved final frame for ${opts.product}, clean negative space, confident lockup`,
+      backdrop: `resolved editorial background plate for ${opts.product}, clean negative space, confident lockup, no readable text, no logos, no unrelated products`,
       motion: "clean final title, subtle parallax, gentle fade to the final frame",
       body: "End on the product name, offer, command, or memorable final line."
     }
@@ -80257,6 +80298,12 @@ principles, type system, and visual-identity hard-gate. The same skill
 governs \`vibe scene lint\` so your authored HTML and the linter stay in
 agreement.
 
+For render-stable text, do not apply continuous \`scale\`, \`x\`, \`y\`,
+\`filter\`, or other transform tweens to \`.scene-content\` or any ancestor
+containing live text/cards. Put ambient zoom/parallax on background or media
+layers only; text should enter briefly and then hold still at its final CSS
+position.
+
 To retro-install on a project scaffolded before this command existed, run
 \`vibe scene install-skill [--host all]\`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibeframe/cli",
-  "version": "0.104.2",
+  "version": "0.104.3",
   "description": "VibeFrame CLI - natural language video editing from the terminal",
   "private": false,
   "license": "MIT",
@@ -183,8 +183,8 @@
     "tsx": "^4.21.0",
     "typescript": "^5.3.3",
     "vitest": "^1.2.2",
-    "@vibeframe/ai-providers": "0.104.2",
-    "@vibeframe/core": "0.104.2"
+    "@vibeframe/core": "0.104.3",
+    "@vibeframe/ai-providers": "0.104.3"
   },
   "engines": {
     "node": ">=20"