@vosjs/studio-core 0.5.1 → 0.7.0

package/dist/index.d.ts

@@ -922,6 +922,15 @@ interface EndCard {
     headline?: string;
     sub?: string;
     wordmark?: string;
+    /**
+     * The brand's MARK as an image (a take-dir path or a URL the render page
+     * can load), with its aspect (width over height), drawn above the
+     * wordmark; a wide mark (a stylised wordmark asset) stands alone.
+     */
+    mark?: {
+        key: string;
+        aspect: number;
+    };
     /**
      * The words' colour (any CSS colour). The house presets are white for
      * footage; over a light plate the brand's ink is what reads. Absent =
@@ -1050,6 +1059,12 @@ interface TextOverlayClip extends OverlayClipBase {
     letterSpacing?: number;
     /** Line height multiplier (default OVERLAY_LINE_HEIGHT). */
     lineHeight?: number;
+    /**
+     * Legibility shadow strength 0..1 (the preset's when absent; 0 = none).
+     * Words on a plate ground carry none: the shadow exists for words over
+     * footage.
+     */
+    shadow?: number;
     /** Text outline, drawn under the fill. */
     stroke?: TextOverlayStroke;
     /** Background pill behind the text block (absent = none). */

package/dist/index.js

@@ -1266,6 +1266,7 @@ var CARD_FOV = 30;
 var OVERLAY_Z = -2;
 var CARD_Z = -4;
 var BACKGROUND_Z = -6;
+var CARD_OVERSCAN = 1.25;
 var CAMERA_NEAR = 0.1;
 var CAMERA_FAR = 100;
 function planeSizeAtDepth(distance, fovDeg, aspect) {
@@ -1361,6 +1362,7 @@ function resolveOverlayStyle(clip) {
       )
     } : {},
     ...clip.color ? { color: clip.color } : {},
+    ...clip.shadow !== void 0 ? { shadow: Math.min(1, Math.max(0, clip.shadow)) } : {},
     fontStyle: clip.italic ? "italic" : "normal",
     align: clip.align ?? "center",
     letterSpacing: clip.letterSpacing ?? 0,
@@ -2850,11 +2852,44 @@ function expandEndCard(doc, outputDuration) {
     enter: "rise",
     exit: "none",
     align: "center",
-    ...card.ink ? { color: card.ink } : {}
+    ...card.ink ? { color: card.ink } : {},
+    shadow: 0
   });
-  if (card.headline?.trim()) clips.push(text("endcard-title", card.headline.trim(), "title", 0.44, 0.35));
-  if (card.sub?.trim()) clips.push(text("endcard-sub", card.sub.trim(), "caption", 0.57, 0.5));
-  if (card.wordmark?.trim()) clips.push(text("endcard-mark", card.wordmark.trim(), "label", 0.88, 0.65));
+  if (card.headline?.trim())
+    clips.push(text("endcard-title", card.headline.trim(), "title", 0.44, 0.35));
+  if (card.sub?.trim())
+    clips.push(text("endcard-sub", card.sub.trim(), "caption", 0.57, 0.5));
+  const mark = card.mark;
+  const wide = !!mark && mark.aspect > 2.2;
+  if (mark && mark.key) {
+    const size = resolveExportSize(doc);
+    const designW = 1080 * size.width / Math.max(1, size.height);
+    const hPx = wide ? 44 : 30;
+    const clip = {
+      id: "endcard-markimg",
+      kind: "image",
+      key: mark.key,
+      width: Math.min(0.9, hPx * Math.max(0.2, mark.aspect) / designW),
+      radius: 0,
+      shadow: "none",
+      start: endStart + 0.65,
+      duration: Math.max(0.3, seconds - 0.65),
+      transform: { x: 0.5, y: wide ? 0.88 : 0.835, scale: 1, rotation: 0 },
+      enter: "rise",
+      exit: "none"
+    };
+    clips.push(clip);
+  }
+  if (card.wordmark?.trim() && !wide)
+    clips.push(
+      text(
+        "endcard-mark",
+        card.wordmark.trim(),
+        "label",
+        mark && mark.key ? 0.895 : 0.88,
+        0.65
+      )
+    );
   const overlays = [...doc.overlays ?? [], ...clips];
   return { doc: { ...doc, segments, overlays }, endStart, seconds };
 }
@@ -3526,24 +3561,33 @@ var ON_FRAME = `(ctx, content, dt) => {
   // the GPU texture allocated at the original dims and re-uploads the new canvas
   // against stale dims \u2192 stretch/duplicate; dispose() forces a full realloc) and
   // rebuilding each frustum-filling plane at the new aspect + syncing the camera.
-  if (cv.width !== W || cv.height !== H) {
+  // Card OVERSCAN (stage.ts CARD_OVERSCAN): a frame whose inset bleeds the
+  // card past an edge paints it on a canvas and a plane larger than the
+  // frame by ck about the centre, so a tilt that turns the bled edge back
+  // toward the viewer shows card there, not the texture's edge. Every doc
+  // that keeps its card inside the frame (and the flat stub, which has no
+  // card layer) stays at 1: byte- and pixel-identical.
+  var d = ctx.data || {}
+  var ckIns = (d.frame && d.frame.inset) || {}
+  var ck = r.card && (ckIns.left < 0 || ckIns.right < 0 || ckIns.top < 0 || ckIns.bottom < 0) ? ${CARD_OVERSCAN} : 1
+  var cW = Math.round(W * ck), cH = Math.round(H * ck)
+  if (cv.width !== cW || cv.height !== cH) {
     var THREE = ctx.THREE
     var aspect = W / H
     var cm = ctx.camera
     if (cm && cm.isPerspectiveCamera) { cm.aspect = aspect; cm.updateProjectionMatrix() }
-    var lyr = [[bg, ${BACKGROUND_Z}], [card, ${CARD_Z}], [ov, ${OVERLAY_Z}]]
+    var lyr = [[bg, ${BACKGROUND_Z}, 1], [card, ${CARD_Z}, ck], [ov, ${OVERLAY_Z}, 1]]
     for (var Li = 0; Li < lyr.length; Li++) {
-      var Ly = lyr[Li][0], Lz = lyr[Li][1]
-      if (Ly.canvas) { Ly.canvas.width = W; Ly.canvas.height = H }
+      var Ly = lyr[Li][0], Lz = lyr[Li][1], Lk = lyr[Li][2]
+      if (Ly.canvas) { Ly.canvas.width = Math.round(W * Lk); Ly.canvas.height = Math.round(H * Lk) }
       if (Ly.texture && Ly.texture.dispose) Ly.texture.dispose()
       if (Ly.mesh && THREE) {
         if (Ly.mesh.geometry && Ly.mesh.geometry.dispose) Ly.mesh.geometry.dispose()
-        var Lh = 2 * Math.abs(Lz) * Math.tan(${CARD_FOV} * Math.PI / 180 / 2)
+        var Lh = 2 * Math.abs(Lz) * Math.tan(${CARD_FOV} * Math.PI / 180 / 2) * Lk
         Ly.mesh.geometry = new THREE.PlaneGeometry(Lh * aspect, Lh)
       }
     }
   }
-  var d = ctx.data || {}
   var frame = d.frame || {}
   var TL = globalThis.__vosTimeline
   // Output-timeline seconds (engine-fed master clock) \u2192 source seconds on screen.
@@ -3862,7 +3906,15 @@ var ON_FRAME = `(ctx, content, dt) => {
 
   // The CARD layer canvas starts transparent each frame \u2014 the padding around
   // the contain-fit card shows the background layer through the plane's alpha.
-  c.clearRect(0, 0, W, H)
+  // Under overscan the canvas is larger than the frame and every frame-space
+  // draw below rides a base translation to its centre.
+  if (ck !== 1) c.setTransform(1, 0, 0, 1, 0, 0)
+  c.clearRect(0, 0, cv.width, cv.height)
+  if (ck !== 1) c.setTransform(1, 0, 0, 1, (cW - W) / 2, (cH - H) / 2)
+  // Footage is nearly always drawn SMALLER than it was recorded (a 1920
+  // recording in a padded 1080 card, or a 440-wide tile): the default
+  // bilinear tap aliases and blurs a large downscale; 'high' resamples.
+  c.imageSmoothingQuality = 'high'
 
   // video destination rect (contain within the padded area). The optional browser-bar
   // strip is part of the card: it takes barH from the available height and the video
@@ -3973,14 +4025,21 @@ var ON_FRAME = `(ctx, content, dt) => {
   // corners, drawn by the clip alone, hid theirs inside the arc.
   var shD = ceZs * (cardW + cardH) + 2 * (W + H)
   var shX = cardX - shD / ceZs
-  // soft shadow behind the card (bar strip + video)
+  // The card shadow is LAYERED: three shadows whose blur and offset grow
+  // while each stays at a low alpha (shadow is the strength they share),
+  // so the card reads as lifted a little off the ground. One wide layer at
+  // the full strength was the old paint, and at the default 0.4 it read as
+  // a dark pool under the card.
   if (shadow > 0) {
-    c.save()
-    c.shadowColor = 'rgba(' + shRgb + ',' + shadow + ')'
-    c.shadowBlur = 60 * s2; c.shadowOffsetX = shD; c.shadowOffsetY = 24 * s2
-    c.fillStyle = '#000'
-    rr(shX, cardY, cardW, cardH, radius); c.fill()
-    c.restore()
+    var shL = [[3, 1, 0.2], [14, 6, 0.22], [48, 22, 0.3]]
+    for (var shI = 0; shI < shL.length; shI++) {
+      c.save()
+      c.shadowColor = 'rgba(' + shRgb + ',' + +(shadow * shL[shI][2]).toFixed(3) + ')'
+      c.shadowBlur = shL[shI][0] * s2; c.shadowOffsetX = shD; c.shadowOffsetY = shL[shI][1] * s2
+      c.fillStyle = '#000'
+      rr(shX, cardY, cardW, cardH, radius); c.fill()
+      c.restore()
+    }
   }
   // contact shadow: tight and close, over the ambient layer
   if (shC > 0) {
@@ -5884,8 +5943,8 @@ var LOOKS = {
     cardWidth: 0.84,
     headroom: 0.16,
     radius: 12,
-    shadow: 0.22,
-    shadowContact: 0.16,
+    shadow: 0.42,
+    shadowContact: 0,
     border: 0.08,
     borderColor: "#000000"
   },
@@ -5895,8 +5954,8 @@ var LOOKS = {
     cardWidth: 0.84,
     headroom: 0.16,
     radius: 12,
-    shadow: 0.35,
-    shadowContact: 0.2,
+    shadow: 0.5,
+    shadowContact: 0,
     border: 0
   },
   dark: {
@@ -5905,8 +5964,8 @@ var LOOKS = {
     cardWidth: 0.86,
     headroom: 0.14,
     radius: 12,
-    shadow: 0.5,
-    shadowContact: 0.3,
+    shadow: 0.7,
+    shadowContact: 0,
     shadowColor: "#000000",
     border: 0.12,
     borderColor: "#ffffff"