@vanillaskyai/video 0.5.1 → 0.5.3

package/dist/{chunk-4AODC6MS.js → chunk-SNVWTK63.js}

@@ -4,7 +4,7 @@ import {
 import {
   BrandGradientOverlay,
   getBackgroundTransform
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 
 // src/visual-system/scene-templates/scene-background.tsx
 import { useEffect, useRef, useState } from "react";
@@ -108,6 +108,7 @@ var SceneBackground = ({
   const [mediaPaint, setMediaPaint] = useState(
     () => initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster)
   );
+  const [decodedVideoUrl, setDecodedVideoUrl] = useState();
   useEffect(() => {
     setMediaPaint(initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster));
     if (!wantsMedia || resolved !== "photo") return;
@@ -187,12 +188,15 @@ var SceneBackground = ({
       {
         ref: videoRef,
         src: mediaUrl,
-        poster: mediaPoster || void 0,
+        poster: decodedVideoUrl === mediaUrl ? void 0 : mediaPoster || void 0,
         muted: true,
         loop: true,
         playsInline: true,
         preload: "auto",
-        onLoadedData: () => setMediaPaint("ready"),
+        onLoadedData: () => {
+          setDecodedVideoUrl(mediaUrl);
+          setMediaPaint("ready");
+        },
         onError: () => setMediaPaint("failed"),
         "data-media-position": mediaPosition,
         style: {

package/dist/{compose-video-QJHKTOQ7.js → compose-video-JWIEDTEJ.js}

@@ -1,6 +1,6 @@
 import {
   createVideo
-} from "./chunk-3ROGEU5A.js";
+} from "./chunk-3OU7HIEB.js";
 import "./chunk-E7CL7UPB.js";
 import "./chunk-FZHMQFG3.js";
 import "./chunk-G66Z5CWR.js";

package/dist/{cta-logo-KNBLXUJU.js → cta-logo-CV5NCBHX.js}

@@ -4,9 +4,9 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   interpolate,

package/dist/{cta-media-NY4ASBGG.js → cta-media-TJ7F4GN7.js}

@@ -5,7 +5,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -13,7 +13,7 @@ import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   interpolate,

package/dist/{incoming-call-KWOXLGJN.js → incoming-call-FOD6Z4R2.js}

@@ -5,9 +5,9 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,

package/dist/{infographic-before-after-OEM4DSTZ.js → infographic-before-after-FQXCQ2CY.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk-L5BTTCZV.js";
 import {
   gradientBackground
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{infographic-feature-list-ZZ25JRYQ.js → infographic-feature-list-Z37COJMT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -17,7 +17,7 @@ import {
 import {
   Emoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{infographic-problem-solution-L3RLFDPE.js → infographic-problem-solution-WAJ76HQV.js}

@@ -4,13 +4,13 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   smoothSize
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{infographic-stat-row-3OL3TNSH.js → infographic-stat-row-ZTS6PO57.js}

@@ -1,7 +1,7 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -12,7 +12,7 @@ import "./chunk-L5BTTCZV.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{infographic-steps-LMBSW22P.js → infographic-steps-SNZCO5ZW.js}

@@ -8,7 +8,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -22,7 +22,7 @@ import {
   TOP_TEXT_AREA_RATIO,
   autoTextColor,
   withOpacity
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{prompt-input-XCQ6TS2L.js → prompt-input-VQ6WUBRH.js}

@@ -4,9 +4,9 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,

package/dist/react.js

@@ -24,7 +24,7 @@ import {
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-K6YVQODK.js";
+} from "./chunk-65MRKELL.js";
 import {
   fontStack
 } from "./chunk-XWWLKRNU.js";
@@ -76,34 +76,34 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "media": () => import("./bg-media-KGYE6UVS.js").then((module) => ({ default: module.BgMediaTemplate })),
-  "reaction": () => import("./reaction-YL6YPGPB.js").then((module) => ({ default: module.ReactionTemplate })),
-  "confetti": () => import("./bg-confetti-KTHLUJPO.js").then((module) => ({ default: module.BgConfettiTemplate })),
-  "emojiBurst": () => import("./bg-emoji-AW7374DZ.js").then((module) => ({ default: module.BgEmojiTemplate })),
-  "bigNumber": () => import("./chart-counter-X7NAOQ2C.js").then((module) => ({ default: module.ChartCounterTemplate })),
-  "barChart": () => import("./chart-bar-Z42RDRQT.js").then((module) => ({ default: module.ChartBarTemplate })),
-  "progressRing": () => import("./chart-progress-ring-7NSNNHL4.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
-  "phoneMockup": () => import("./showcase-phone-CTHXHEBT.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
-  "webMockup": () => import("./showcase-web-LAKHYXSD.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
-  "codeEditor": () => import("./showcase-code-EFVHRJUM.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
-  "terminal": () => import("./showcase-terminal-XAMPADHN.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
-  "tweet": () => import("./social-tweet-PBUKKPT3.js").then((module) => ({ default: module.SocialTweetTemplate })),
-  "notification": () => import("./social-notification-MELRWIB6.js").then((module) => ({ default: module.SocialNotificationTemplate })),
+  "media": () => import("./bg-media-VSFT5YC7.js").then((module) => ({ default: module.BgMediaTemplate })),
+  "reaction": () => import("./reaction-QECWNLCQ.js").then((module) => ({ default: module.ReactionTemplate })),
+  "confetti": () => import("./bg-confetti-572VDSYM.js").then((module) => ({ default: module.BgConfettiTemplate })),
+  "emojiBurst": () => import("./bg-emoji-T4IEJ6U2.js").then((module) => ({ default: module.BgEmojiTemplate })),
+  "bigNumber": () => import("./chart-counter-T3MXDPP6.js").then((module) => ({ default: module.ChartCounterTemplate })),
+  "barChart": () => import("./chart-bar-ZGGCV3ED.js").then((module) => ({ default: module.ChartBarTemplate })),
+  "progressRing": () => import("./chart-progress-ring-OT5Z2LMK.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
+  "phoneMockup": () => import("./showcase-phone-G32YB25H.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
+  "webMockup": () => import("./showcase-web-IRLNVEYD.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
+  "codeEditor": () => import("./showcase-code-PVPNSI6U.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
+  "terminal": () => import("./showcase-terminal-PLZTGUL6.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
+  "tweet": () => import("./social-tweet-UXTQA5VW.js").then((module) => ({ default: module.SocialTweetTemplate })),
+  "notification": () => import("./social-notification-P7ZSTEZ5.js").then((module) => ({ default: module.SocialNotificationTemplate })),
   "chatMessenger": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
   "chatWhatsapp": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
-  "milestone": () => import("./social-milestone-EOBEN7CX.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
-  "reviewStack": () => import("./social-review-stack-H3U437VT.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
-  "testimonial": () => import("./social-testimonial-GNNMKMDD.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
-  "incomingCall": () => import("./incoming-call-KWOXLGJN.js").then((module) => ({ default: module.IncomingCallTemplate })),
-  "brandMessage": () => import("./brand-message-AY43ZQR2.js").then((module) => ({ default: module.BrandMessageTemplate })),
-  "promptInput": () => import("./prompt-input-XCQ6TS2L.js").then((module) => ({ default: module.PromptInputTemplate })),
-  "beforeAfter": () => import("./infographic-before-after-OEM4DSTZ.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
-  "tripleStats": () => import("./infographic-stat-row-3OL3TNSH.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
-  "problemSolution": () => import("./infographic-problem-solution-L3RLFDPE.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
-  "cardList": () => import("./infographic-feature-list-ZZ25JRYQ.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
-  "steps": () => import("./infographic-steps-LMBSW22P.js").then((module) => ({ default: module.InfographicStepsTemplate })),
-  "ctaLogo": () => import("./cta-logo-KNBLXUJU.js").then((module) => ({ default: module.CtaLogoTemplate })),
-  "ctaMedia": () => import("./cta-media-NY4ASBGG.js").then((module) => ({ default: module.CtaMediaTemplate }))
+  "milestone": () => import("./social-milestone-T67PZ5RR.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
+  "reviewStack": () => import("./social-review-stack-IXAC23MY.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
+  "testimonial": () => import("./social-testimonial-AGSFR2IF.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
+  "incomingCall": () => import("./incoming-call-FOD6Z4R2.js").then((module) => ({ default: module.IncomingCallTemplate })),
+  "brandMessage": () => import("./brand-message-GSM2LOEP.js").then((module) => ({ default: module.BrandMessageTemplate })),
+  "promptInput": () => import("./prompt-input-VQ6WUBRH.js").then((module) => ({ default: module.PromptInputTemplate })),
+  "beforeAfter": () => import("./infographic-before-after-FQXCQ2CY.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
+  "tripleStats": () => import("./infographic-stat-row-ZTS6PO57.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
+  "problemSolution": () => import("./infographic-problem-solution-WAJ76HQV.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
+  "cardList": () => import("./infographic-feature-list-Z37COJMT.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
+  "steps": () => import("./infographic-steps-SNZCO5ZW.js").then((module) => ({ default: module.InfographicStepsTemplate })),
+  "ctaLogo": () => import("./cta-logo-CV5NCBHX.js").then((module) => ({ default: module.CtaLogoTemplate })),
+  "ctaMedia": () => import("./cta-media-TJ7F4GN7.js").then((module) => ({ default: module.CtaMediaTemplate }))
 };
 
 // src/visual-system/catalog/builtin-player.generated.ts

package/dist/{reaction-YL6YPGPB.js → reaction-QECWNLCQ.js}

@@ -1,12 +1,12 @@
 import {
   SceneBackground
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens

package/dist/server.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-34O5BY6X.js";
 import {
   createVideo
-} from "./chunk-3ROGEU5A.js";
+} from "./chunk-3OU7HIEB.js";
 import "./chunk-E7CL7UPB.js";
 import {
   BUILTIN_SERVER_TEMPLATE_KIT,

package/dist/{showcase-code-EFVHRJUM.js → showcase-code-PVPNSI6U.js}

@@ -5,7 +5,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -13,7 +13,7 @@ import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{showcase-phone-CTHXHEBT.js → showcase-phone-G32YB25H.js}

@@ -7,7 +7,7 @@ import "./chunk-S7HFLYNN.js";
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -15,7 +15,7 @@ import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   interpolate,

package/dist/{showcase-terminal-XAMPADHN.js → showcase-terminal-PLZTGUL6.js}

@@ -7,7 +7,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -15,7 +15,7 @@ import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   interpolate,
   spring

package/dist/{showcase-web-LAKHYXSD.js → showcase-web-IRLNVEYD.js}

@@ -9,7 +9,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import {
   hasSceneMedia
 } from "./chunk-35LIYILY.js";
@@ -17,7 +17,7 @@ import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   interpolate,

package/dist/{social-milestone-EOBEN7CX.js → social-milestone-T67PZ5RR.js}

@@ -4,7 +4,7 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   ConfettiLayer
@@ -17,7 +17,7 @@ import {
 import {
   accessibleTextColor,
   withOpacity
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,

package/dist/{social-notification-MELRWIB6.js → social-notification-P7ZSTEZ5.js}

@@ -4,13 +4,13 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   Emoji,
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-IJM4B2ZN.js";
+import "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   interpolate,

package/dist/{social-review-stack-H3U437VT.js → social-review-stack-IXAC23MY.js}

@@ -4,12 +4,12 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   accessibleTextColor,
   withOpacity
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   SPRING_SNAPPY,
   interpolate,

package/dist/{social-testimonial-GNNMKMDD.js → social-testimonial-AGSFR2IF.js}

@@ -4,13 +4,13 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   accessibleTextColor,
   autoTextColor,
   withOpacity
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   SPRING_SNAPPY,

package/dist/{social-tweet-PBUKKPT3.js → social-tweet-UXTQA5VW.js}

@@ -4,14 +4,14 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-4AODC6MS.js";
+} from "./chunk-SNVWTK63.js";
 import "./chunk-35LIYILY.js";
 import {
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
 import {
   autoTextColor
-} from "./chunk-IJM4B2ZN.js";
+} from "./chunk-MFYFZQHM.js";
 import {
   SPRING_SMOOTH,
   interpolate,

package/dist/test.js

@@ -233,7 +233,7 @@ async function* simulateVideoStream(parts, options = {}) {
   if (timeoutMs != null && (!Number.isFinite(timeoutMs) || timeoutMs < 0)) {
     throw new Error("Simulation timeoutMs must be a non-negative finite number");
   }
-  const { createVideo } = await import("./compose-video-QJHKTOQ7.js");
+  const { createVideo } = await import("./compose-video-JWIEDTEJ.js");
   const { createTextDeltaVideoPlanner } = await import("./text-stream-J6EDDJP4.js");
   const { BUILTIN_SERVER_TEMPLATE_KIT } = await import("./builtin-server-YHEZ2JRF.js");
   const { createTemplateSceneValidator } = await import("./validate-T7GBU2YF.js");

package/docs/motion-and-effects.md

@@ -34,11 +34,15 @@ Templates that support background motion can use:
 - `slow-tilt`;
 - `camera-shake`.
 
-`slow-zoom-in` is the default. Use `static` as the explicit opt-out.
+`static` is the default, so a media change cannot restart an implicit camera
+transform. Apply another effect explicitly when a still image or authored scene
+benefits from it; footage keeps its own native motion by default.
 
 ## Scene continuity
 
-`style.defaultTransition` accepts `crossfade` or `fade`. The player applies it
+Generated videos use `crossfade` by default. Persisted or application-authored
+`Video` values can set `style.defaultTransition` to `crossfade` or `fade`; an
+undefined or unknown value keeps the hard-cut behavior. The player applies a fade
 only when two ranges are contiguous (allowing floating-point arithmetic noise)
 and both templates declare `usesGlobalTransition: true` with valid
 `transitionTiming` metadata. It is also conditional on the effective backdrop:
@@ -87,6 +91,12 @@ player hides that wrapper for the incoming preview and reveals it as soon as
 the same mounted scene becomes active. This guard does not change `progress`,
 media time, the component lifecycle, or final values.
 
+As soon as a streamed scene arrives, the player starts warming its template and
+backdrop. A changed-media scene is also mounted invisibly before its cut so the
+browser can attach and decode the real element in advance. This media preroll
+also protects intentional hard cuts; it does not pause or otherwise alter the
+visual or soundtrack clocks.
+
 Undefined or unknown transition names preserve a hard cut and unmodified local
 motion. Overlapping ranges also hard-cut. A timeline gap renders the owned brand
 background instead of replaying an earlier scene.

package/examples/nextjs-quickstart/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^4.0.41",
-    "@vanillaskyai/video": "0.5.1",
+    "@vanillaskyai/video": "0.5.3",
     "ai": "^7.0.77",
     "next": "16.3.2",
     "react": "19.2.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Open-source video response SDK for personalized AI applications.",
   "keywords": [
     "generative-video",

package/registry/items/backgrounds.json

@@ -22,7 +22,7 @@
       "path": "src/visual-system/scene-templates/background-effect.ts",
       "type": "registry:lib",
       "target": "vanillasky/scene-templates/background-effect.ts",
-      "content": "/**\n * Background motion effects for templates.\n *\n * Applied to the background layer (media, gradient) throughout the entire scene.\n * Continuous motion — not tied to text timing.\n *\n * Templates with usesGlobalBackgroundEffect: true consume the video-level default.\n *\n * 9 effects, each with a distinct mood:\n * - static:        No motion — intentional stillness\n * - slow-zoom-in:  Draw attention inward, build focus\n * - slow-zoom-out: Reveal, establish, pull back\n * - ken-burns:     Classic cinematic photo motion (zoom + pan, direction alternates per scene)\n * - drift:         Gentle lateral pan (direction alternates per scene)\n * - pulse:         Beat-synced energy\n * - breathe:       Ambient dreamy float\n * - slow-tilt:     Tension, Dutch angle drift\n * - camera-shake:  Intensity, handheld drama\n */\n\nimport { interpolate } from \"../motion\";\n\nexport interface BackgroundTransform {\n  transform: string;\n  transformOrigin: string;\n}\n\nexport const BACKGROUND_EFFECTS = [\n  \"static\",\n  \"slow-zoom-in\",\n  \"slow-zoom-out\",\n  \"ken-burns\",\n  \"drift\",\n  \"pulse\",\n  \"breathe\",\n  \"slow-tilt\",\n  \"camera-shake\",\n] as const;\n\n// ─── Directional variant helpers ────────────────────────────────\n// Ken Burns and Drift have internal direction variants that alternate\n// by scene index to create visual variety across a video.\n\ntype Direction = \"right\" | \"left\" | \"up\" | \"down\";\nconst DIRECTIONS: Direction[] = [\"right\", \"left\", \"up\", \"down\"];\n\nfunction getKenBurnsTransform(progress: number, direction: Direction): BackgroundTransform {\n  const scale = interpolate(progress, [0, 1], [1.05, 1.15]);\n  const mainAxis = direction === \"right\" || direction === \"left\";\n  const sign = direction === \"right\" || direction === \"down\" ? 1 : -1;\n  const primary = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);\n  const secondary = interpolate(progress, [0, 1], [-0.5, 0.5]);\n\n  const x = mainAxis ? primary : secondary;\n  const y = mainAxis ? secondary : primary;\n\n  return {\n    transform: `scale(${scale}) translate(${x}%, ${y}%)`,\n    transformOrigin: \"center\",\n  };\n}\n\nfunction getDriftTransform(progress: number, direction: Direction): BackgroundTransform {\n  const horizontal = direction === \"right\" || direction === \"left\";\n  const sign = direction === \"right\" || direction === \"down\" ? 1 : -1;\n  const offset = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);\n\n  return {\n    transform: horizontal\n      ? `scale(1.1) translateX(${offset}%)`\n      : `scale(1.1) translateY(${offset}%)`,\n    transformOrigin: \"center\",\n  };\n}\n\n// ─── Public API ─────────────────────────────────────────────────\n\n/**\n * Get background transform for the current progress.\n *\n * @param effect — background effect name\n * @param progress — scene progress 0→1\n * @param beatIntensity — 0→1 for beat-reactive effects\n * @param sceneIndex — used to alternate direction for ken-burns/drift\n */\nexport function getBackgroundTransform(\n  effect: string | undefined,\n  progress: number,\n  beatIntensity = 0,\n  sceneIndex = 0,\n): BackgroundTransform {\n  const dir = DIRECTIONS[sceneIndex % DIRECTIONS.length];\n\n  // Undefined falls through to slow-zoom-in. Previously the missing\n  // case landed in the `default:` branch alongside `\"static\"`, returning\n  // `transform: \"none\"` — so every video where the AI didn't set\n  // backgroundEffect (i.e. nearly all of them) rendered with zero\n  // motion while the editor UI displayed \"Slow zoom in\" as default.\n  // Now renderer and UI agree: `undefined` means motion, `\"static\"`\n  // is the explicit opt-out. Slow zoom in (scale 1.00 → 1.12, no\n  // translate) is the safest default for 2-4 s scenes — visible\n  // enough to register, gentle enough not to pull focus from text.\n  // Ken Burns adds translate that's too fast on short clips; reserve\n  // for longer photo scenes via an explicit opt-in.\n  const resolved = effect ?? \"slow-zoom-in\";\n\n  switch (resolved) {\n    case \"slow-zoom-in\":\n      return {\n        transform: `scale(${interpolate(progress, [0, 1], [1, 1.12])})`,\n        transformOrigin: \"center\",\n      };\n\n    case \"slow-zoom-out\":\n      return {\n        transform: `scale(${interpolate(progress, [0, 1], [1.12, 1])})`,\n        transformOrigin: \"center\",\n      };\n\n    case \"ken-burns\":\n      return getKenBurnsTransform(progress, dir);\n\n    case \"drift\":\n      return getDriftTransform(progress, dir);\n\n    case \"pulse\": {\n      // Subtle scale pulse synced to beat\n      const base = 1 + beatIntensity * 0.04;\n      const breathe = 1 + Math.sin(progress * Math.PI * 2) * 0.02;\n      return {\n        transform: `scale(${base * breathe})`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"breathe\": {\n      // Slow ambient float — gentle scale + vertical drift, not beat-synced\n      const s = 1 + Math.sin(progress * Math.PI) * 0.03;\n      const y = Math.sin(progress * Math.PI) * 0.5;\n      return {\n        transform: `scale(${s}) translateY(${y}%)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"slow-tilt\": {\n      // Subtle Dutch angle drift\n      const angle = interpolate(progress, [0, 1], [0, 2.5]);\n      return {\n        transform: `scale(1.08) rotate(${angle}deg)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"camera-shake\": {\n      // Rapid small offsets for handheld/dramatic feel\n      // Deterministic noise based on progress for reproducibility\n      const t = progress * 40;\n      const sx = Math.sin(t * 2.3) * 0.4 + Math.sin(t * 5.7) * 0.2;\n      const sy = Math.cos(t * 3.1) * 0.3 + Math.cos(t * 4.9) * 0.15;\n      const sr = Math.sin(t * 1.7) * 0.3;\n      return {\n        transform: `scale(1.05) translate(${sx}%, ${sy}%) rotate(${sr}deg)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"static\":\n    default:\n      return {\n        transform: \"none\",\n        transformOrigin: \"center\",\n      };\n  }\n}\n"
+      "content": "/**\n * Background motion effects for templates.\n *\n * Applied to the background layer (media, gradient) throughout the entire scene.\n * Continuous motion — not tied to text timing.\n *\n * Templates with usesGlobalBackgroundEffect: true consume the video-level default.\n *\n * 9 effects, each with a distinct mood:\n * - static:        No motion — intentional stillness\n * - slow-zoom-in:  Draw attention inward, build focus\n * - slow-zoom-out: Reveal, establish, pull back\n * - ken-burns:     Classic cinematic photo motion (zoom + pan, direction alternates per scene)\n * - drift:         Gentle lateral pan (direction alternates per scene)\n * - pulse:         Beat-synced energy\n * - breathe:       Ambient dreamy float\n * - slow-tilt:     Tension, Dutch angle drift\n * - camera-shake:  Intensity, handheld drama\n */\n\nimport { interpolate } from \"../motion\";\n\nexport interface BackgroundTransform {\n  transform: string;\n  transformOrigin: string;\n}\n\nexport const BACKGROUND_EFFECTS = [\n  \"static\",\n  \"slow-zoom-in\",\n  \"slow-zoom-out\",\n  \"ken-burns\",\n  \"drift\",\n  \"pulse\",\n  \"breathe\",\n  \"slow-tilt\",\n  \"camera-shake\",\n] as const;\n\n// ─── Directional variant helpers ────────────────────────────────\n// Ken Burns and Drift have internal direction variants that alternate\n// by scene index to create visual variety across a video.\n\ntype Direction = \"right\" | \"left\" | \"up\" | \"down\";\nconst DIRECTIONS: Direction[] = [\"right\", \"left\", \"up\", \"down\"];\n\nfunction getKenBurnsTransform(progress: number, direction: Direction): BackgroundTransform {\n  const scale = interpolate(progress, [0, 1], [1.05, 1.15]);\n  const mainAxis = direction === \"right\" || direction === \"left\";\n  const sign = direction === \"right\" || direction === \"down\" ? 1 : -1;\n  const primary = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);\n  const secondary = interpolate(progress, [0, 1], [-0.5, 0.5]);\n\n  const x = mainAxis ? primary : secondary;\n  const y = mainAxis ? secondary : primary;\n\n  return {\n    transform: `scale(${scale}) translate(${x}%, ${y}%)`,\n    transformOrigin: \"center\",\n  };\n}\n\nfunction getDriftTransform(progress: number, direction: Direction): BackgroundTransform {\n  const horizontal = direction === \"right\" || direction === \"left\";\n  const sign = direction === \"right\" || direction === \"down\" ? 1 : -1;\n  const offset = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);\n\n  return {\n    transform: horizontal\n      ? `scale(1.1) translateX(${offset}%)`\n      : `scale(1.1) translateY(${offset}%)`,\n    transformOrigin: \"center\",\n  };\n}\n\n// ─── Public API ─────────────────────────────────────────────────\n\n/**\n * Get background transform for the current progress.\n *\n * @param effect — background effect name\n * @param progress — scene progress 0→1\n * @param beatIntensity — 0→1 for beat-reactive effects\n * @param sceneIndex — used to alternate direction for ken-burns/drift\n */\nexport function getBackgroundTransform(\n  effect: string | undefined,\n  progress: number,\n  beatIntensity = 0,\n  sceneIndex = 0,\n): BackgroundTransform {\n  const dir = DIRECTIONS[sceneIndex % DIRECTIONS.length];\n\n  // Camera motion is opt-in. In particular, a scene-relative zoom restarts\n  // at every cut and can look like the incoming media snaps backwards.\n  // Footage already contains motion, while photo scenes that benefit from a\n  // Ken Burns treatment can request one explicitly.\n  const resolved = effect ?? \"static\";\n\n  switch (resolved) {\n    case \"slow-zoom-in\":\n      return {\n        transform: `scale(${interpolate(progress, [0, 1], [1, 1.12])})`,\n        transformOrigin: \"center\",\n      };\n\n    case \"slow-zoom-out\":\n      return {\n        transform: `scale(${interpolate(progress, [0, 1], [1.12, 1])})`,\n        transformOrigin: \"center\",\n      };\n\n    case \"ken-burns\":\n      return getKenBurnsTransform(progress, dir);\n\n    case \"drift\":\n      return getDriftTransform(progress, dir);\n\n    case \"pulse\": {\n      // Subtle scale pulse synced to beat\n      const base = 1 + beatIntensity * 0.04;\n      const breathe = 1 + Math.sin(progress * Math.PI * 2) * 0.02;\n      return {\n        transform: `scale(${base * breathe})`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"breathe\": {\n      // Slow ambient float — gentle scale + vertical drift, not beat-synced\n      const s = 1 + Math.sin(progress * Math.PI) * 0.03;\n      const y = Math.sin(progress * Math.PI) * 0.5;\n      return {\n        transform: `scale(${s}) translateY(${y}%)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"slow-tilt\": {\n      // Subtle Dutch angle drift\n      const angle = interpolate(progress, [0, 1], [0, 2.5]);\n      return {\n        transform: `scale(1.08) rotate(${angle}deg)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"camera-shake\": {\n      // Rapid small offsets for handheld/dramatic feel\n      // Deterministic noise based on progress for reproducibility\n      const t = progress * 40;\n      const sx = Math.sin(t * 2.3) * 0.4 + Math.sin(t * 5.7) * 0.2;\n      const sy = Math.cos(t * 3.1) * 0.3 + Math.cos(t * 4.9) * 0.15;\n      const sr = Math.sin(t * 1.7) * 0.3;\n      return {\n        transform: `scale(1.05) translate(${sx}%, ${sy}%) rotate(${sr}deg)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"static\":\n    default:\n      return {\n        transform: \"none\",\n        transformOrigin: \"center\",\n      };\n  }\n}\n"
     },
     {
       "path": "src/visual-system/scene-templates/color-utils.ts",