@vosjs/studio-core 0.45.0 → 0.45.2

package/dist/index.d.ts

@@ -1868,6 +1868,12 @@ interface HtmlOverlayClip extends OverlayClipBase {
      * timeline's clock in the preview and in every export chunk alike. One
      * rasterize per frame while on screen. Absent = a still, byte-identical
      * to before the field existed.
+     *
+     * Move the LAYER with `motion` poses, never its text with CSS: the
+     * browser places text on whole device pixels each time it rasterizes, so
+     * text a keyframe drifts or scales slowly steps a pixel at a time beside
+     * shapes that glide. A layer with a motion track is drawn from one raster
+     * of each picture and moves by resampling it, which glides.
      */
     live?: boolean;
     /** Values for a live layer's `{{data.<name>}}` placeholders. */

package/dist/index.js

@@ -1515,6 +1515,8 @@ var DESIGN_FRAME_WIDTH = 1920;
 var HTML_LAYER_WARN_BYTES = 32e3;
 var HTML_LAYER_MAX_BYTES = 128e3;
 var HTML_LAYER_LIVE_HZ = 60;
+var HTML_LAYER_RASTER_SCALE = 2;
+var HTML_LAYER_RASTER_MAX_AREA = 4096 * 4096;
 var HTML_LAYER_ASSET_HOST = "https://assets.vos.so/";
 function splitTopLevel(value) {
   const out = [];
@@ -5834,6 +5836,35 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     else { cc.beginPath(); cc.rect(x, y, w, h) }
   }
 
+  // A moving html layer's raster: its picture drawn ONCE at the largest size
+  // its track reaches (so a pose only ever scales it down), into one canvas
+  // per clip, redrawn only when a new picture lands or the frame's size
+  // changes. A still layer in motion rasterizes once; a live one once per
+  // picture, as before.
+  function hlRaster(ol, el, nw, nh) {
+    if (typeof document === 'undefined') return el
+    var hlPk = ol.scale
+    var hlKs = ol.track.keyframes
+    for (var hlKi = 0; hlKi < hlKs.length; hlKi++) if (hlKs[hlKi].value[2] > hlPk) hlPk = hlKs[hlKi].value[2]
+    var hlBW = ol.w * W * hlPk
+    var hlBH = hlBW * nh / nw
+    var hlSS = Math.min(${HTML_LAYER_RASTER_SCALE}, Math.sqrt(${HTML_LAYER_RASTER_MAX_AREA} / Math.max(1, hlBW * hlBH)))
+    var hlRW = Math.max(1, Math.floor(hlBW * hlSS))
+    var hlRH = Math.max(1, Math.floor(hlBH * hlSS))
+    var hlRs = ns.htmlRaster || (ns.htmlRaster = {})
+    var hlR = hlRs[ol.id]
+    if (!hlR) hlR = hlRs[ol.id] = { c: document.createElement('canvas'), el: null }
+    if (hlR.el !== el || hlR.c.width !== hlRW || hlR.c.height !== hlRH) {
+      if (hlR.c.width !== hlRW) hlR.c.width = hlRW
+      if (hlR.c.height !== hlRH) hlR.c.height = hlRH
+      var hlX = hlR.c.getContext('2d')
+      hlX.clearRect(0, 0, hlRW, hlRH)
+      try { hlX.drawImage(el, 0, 0, hlRW, hlRH) } catch (e) { return el }
+      hlR.el = el
+    }
+    return hlR.c
+  }
+
   // Text overlays: visibility signature + "a transition is animating".
   // During a hold the drawn pixels are static, so the signature alone drives
   // redraws (position/text/style edits change it \u2014 live SET_DATA); during
@@ -5894,6 +5925,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       if (ns.htmlKeys) delete ns.htmlKeys[hlK]
       if (ns.htmlWant) delete ns.htmlWant[hlK]
       if (ns.htmlErrors) delete ns.htmlErrors[hlK]
+      if (ns.htmlRaster) delete ns.htmlRaster[hlK]
     }
   }
   // A styled layer's cached layout leaves with its clip.
@@ -6110,7 +6142,15 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       }
       ovC.save()
       rr(-olDW / 2, -olDH / 2, olDW, olDH, olRad, ovC); ovC.clip()
-      try { ovC.drawImage(olEl, -olDW / 2, -olDH / 2, olDW, olDH) } catch (e) {}
+      // A MOVING html layer is drawn from a raster of its picture, never from
+      // the picture itself: the browser rasterizes an SVG image afresh at
+      // every draw transform and places text on whole device pixels as it
+      // does, so text under a slow move or scale held still and then jumped
+      // a pixel while the shapes beside it glided. A fixed raster moves by
+      // resampling, every frame.
+      var olSrc = ol.html && ol.track ? hlRaster(ol, olEl, olNW, olNH) : olEl
+      if (olSrc !== olEl) ovC.imageSmoothingQuality = 'high'
+      try { ovC.drawImage(olSrc, -olDW / 2, -olDH / 2, olDW, olDH) } catch (e) {}
       ovC.restore()
       if (ol.border && ol.border.width > 0) {
         ovC.strokeStyle = ol.border.color || '#ffffff'
@@ -6231,8 +6271,20 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       var rbPY = ol.box.py * olMS * s
       var rbW = rtL.width + rbPX * 2
       var rbH = rtN * rtLH + rbPY * 2
+      // A per-unit entrance leaves the clip at full strength while its
+      // units arrive one by one, so the box follows the EARLIEST unit (the
+      // units' own delay, seconds and ease) or it stands empty until the
+      // first word shows. A typewriter's field is there from its first frame.
+      var rbA = 1
+      if (rtFx && rtFx.k !== 'typewriter') {
+        var rbN = 0
+        for (var rbi = 0; rbi < rtN; rbi++) rbN += rtL.lines[rbi].units.length
+        var rbO = rtFx.d === 2 && rbN % 2 === 0 ? 0.5 : 0
+        var rbU = Math.max(0, Math.min(1, (olT - rbO * rtFx.st) / rtFx.dur))
+        rbA = rtFx.k === 'pop' ? Math.min(1, rbU * 2) : 1 - Math.pow(1 - rbU, 3)
+      }
       ovC.save()
-      ovC.globalAlpha = olA * ol.box.o
+      ovC.globalAlpha = olA * ol.box.o * rbA
       ovC.fillStyle = ol.box.c
       rr(-rbW / 2, -rbH / 2, rbW, rbH, Math.min(ol.box.r * olMS * s, rbH / 2), ovC)
       ovC.fill()
@@ -9047,8 +9099,18 @@ var ON_FRAME = `(ctx, content, dt) => {
     var tqAx = (tqA[0] - W / 2) * trGsc + W / 2 + trGox * W, tqAy = (tqA[1] - H / 2) * trGsc + H / 2 - trGoy * H
     var tqBx = (tqB[0] - W / 2) * trSc + W / 2 + trOx * W, tqBy = (tqB[1] - H / 2) * trSc + H / 2 - trOy * H
     var tqX2 = tqAx + (tqBx - tqAx) * tqP, tqY2 = tqAy + (tqBy - tqAy) * tqP
+    // A slide pulls the two cards a frame apart, so the lerp would cross
+    // the bare ground between them: the dot rides the card that holds
+    // more of the frame instead, moved with it, and only a card's own
+    // point is ever drawn on that card.
+    var tqOn = true
+    if (trOut.kind === 'slide' || (trIn && trIn.kind === 'slide')) {
+      var tqOut = Math.abs(trGox) + Math.abs(trGoy) <= Math.abs(trOx) + Math.abs(trOy)
+      tqOn = tqOut ? !!trQa : !!trQb
+      tqX2 = tqOut ? tqAx : tqBx; tqY2 = tqOut ? tqAy : tqBy
+    }
     var tqR = trQs || (((d.cursorStyle && d.cursorStyle.size) || 24) * s * 0.5)
-    drawCur(ovC, tqX2, tqY2, tqR, 1, 2 * (trQw || s))
+    if (tqOn) drawCur(ovC, tqX2, tqY2, tqR, 1, 2 * (trQw || s))
   }
   ov.sig = ovSig
   ov.active = camActiveNow || !!trOut || pqLive