@vanillaskyai/video 0.5.6 → 0.5.8

package/dist/react.js

@@ -24,7 +24,8 @@ import {
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-3QEKIC6C.js";
+} from "./chunk-NGY3TNND.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   fontStack
@@ -34,6 +35,7 @@ import {
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";
 import "./chunk-XGRA2MUV.js";
+import "./chunk-WJ6FLKNC.js";
 import "./chunk-73NTSFFI.js";
 
 // src/player/video-player.tsx
@@ -77,34 +79,34 @@ import { createElement } from "react";
 
 // src/visual-system/catalog/builtin-loaders.generated.ts
 var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
-  "media": () => import("./bg-media-2D5SQSJX.js").then((module) => ({ default: module.BgMediaTemplate })),
-  "reaction": () => import("./reaction-IDFJZ7HI.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-HYGBGXNX.js").then((module) => ({ default: module.ChartCounterTemplate })),
-  "barChart": () => import("./chart-bar-GAJMUB2E.js").then((module) => ({ default: module.ChartBarTemplate })),
-  "progressRing": () => import("./chart-progress-ring-DUUVMJAJ.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
-  "phoneMockup": () => import("./showcase-phone-STUZJRXV.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
-  "webMockup": () => import("./showcase-web-57R4RMTG.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
-  "codeEditor": () => import("./showcase-code-EIGXDZE3.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
-  "terminal": () => import("./showcase-terminal-SYP6TKP2.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
-  "tweet": () => import("./social-tweet-T7RTFQ6T.js").then((module) => ({ default: module.SocialTweetTemplate })),
-  "notification": () => import("./social-notification-2RYS7NM4.js").then((module) => ({ default: module.SocialNotificationTemplate })),
+  "media": () => import("./bg-media-FEBATBT2.js").then((module) => ({ default: module.BgMediaTemplate })),
+  "reaction": () => import("./reaction-Z3JIM3MQ.js").then((module) => ({ default: module.ReactionTemplate })),
+  "confetti": () => import("./bg-confetti-SHQI7ATB.js").then((module) => ({ default: module.BgConfettiTemplate })),
+  "emojiBurst": () => import("./bg-emoji-XYFRA63Q.js").then((module) => ({ default: module.BgEmojiTemplate })),
+  "bigNumber": () => import("./chart-counter-HFYNE4HT.js").then((module) => ({ default: module.ChartCounterTemplate })),
+  "barChart": () => import("./chart-bar-ZB45ZRKH.js").then((module) => ({ default: module.ChartBarTemplate })),
+  "progressRing": () => import("./chart-progress-ring-ZKMLRGSB.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
+  "phoneMockup": () => import("./showcase-phone-5UW45ATT.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
+  "webMockup": () => import("./showcase-web-3AW6VHIG.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
+  "codeEditor": () => import("./showcase-code-NWQAAJIA.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
+  "terminal": () => import("./showcase-terminal-UVOD25UF.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
+  "tweet": () => import("./social-tweet-6JUM323G.js").then((module) => ({ default: module.SocialTweetTemplate })),
+  "notification": () => import("./social-notification-EDOU6TZB.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-J6QVX4YJ.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
-  "reviewStack": () => import("./social-review-stack-25C6JJ4W.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
-  "testimonial": () => import("./social-testimonial-SH54T4CW.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
-  "incomingCall": () => import("./incoming-call-2O5NPJ7B.js").then((module) => ({ default: module.IncomingCallTemplate })),
-  "brandMessage": () => import("./brand-message-2JCTRIGS.js").then((module) => ({ default: module.BrandMessageTemplate })),
-  "promptInput": () => import("./prompt-input-IL7HP5WX.js").then((module) => ({ default: module.PromptInputTemplate })),
-  "beforeAfter": () => import("./infographic-before-after-FQXCQ2CY.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
-  "tripleStats": () => import("./infographic-stat-row-4DLC5NSC.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
-  "problemSolution": () => import("./infographic-problem-solution-ZUF54SNF.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
-  "cardList": () => import("./infographic-feature-list-MVJ3GQVK.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
-  "steps": () => import("./infographic-steps-IT23RFV6.js").then((module) => ({ default: module.InfographicStepsTemplate })),
-  "ctaLogo": () => import("./cta-logo-JIG22SWA.js").then((module) => ({ default: module.CtaLogoTemplate })),
-  "ctaMedia": () => import("./cta-media-GIHQTPPK.js").then((module) => ({ default: module.CtaMediaTemplate }))
+  "milestone": () => import("./social-milestone-KPKHFOB5.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
+  "reviewStack": () => import("./social-review-stack-EZOO33SV.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
+  "testimonial": () => import("./social-testimonial-DLOINMMY.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
+  "incomingCall": () => import("./incoming-call-5IWJ2TAS.js").then((module) => ({ default: module.IncomingCallTemplate })),
+  "brandMessage": () => import("./brand-message-P56WEJPG.js").then((module) => ({ default: module.BrandMessageTemplate })),
+  "promptInput": () => import("./prompt-input-6ZWXEL3V.js").then((module) => ({ default: module.PromptInputTemplate })),
+  "beforeAfter": () => import("./infographic-before-after-2I7YZVDD.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
+  "tripleStats": () => import("./infographic-stat-row-XHUZZPDM.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
+  "problemSolution": () => import("./infographic-problem-solution-IW35S6BR.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
+  "cardList": () => import("./infographic-feature-list-7SK65U3K.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
+  "steps": () => import("./infographic-steps-JDDEDI7X.js").then((module) => ({ default: module.InfographicStepsTemplate })),
+  "ctaLogo": () => import("./cta-logo-S4OMTNXD.js").then((module) => ({ default: module.CtaLogoTemplate })),
+  "ctaMedia": () => import("./cta-media-EROTHDRR.js").then((module) => ({ default: module.CtaMediaTemplate }))
 };
 
 // src/visual-system/catalog/builtin-player.generated.ts
@@ -704,7 +706,7 @@ function preloadBuiltinTemplate(id) {
 
 // src/player/warm-scene-media.ts
 function warmSceneMedia(variables) {
-  void import("./preload-media-IYFMPMLB.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
+  void import("./preload-media-LJXWKTWG.js").then((module) => module.preloadSceneMedia(variables)).catch(() => {
   });
 }
 

package/dist/{reaction-IDFJZ7HI.js → reaction-Z3JIM3MQ.js}

@@ -1,12 +1,14 @@
 import {
   SceneBackground
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   resolveTokens
@@ -66,7 +68,7 @@ var ReactionTemplate = ({
   const color = foreground;
   const mediaUrl = String(variables.mediaUrl || "");
   const hasClip = mediaUrl.trim().length > 0;
-  return /* @__PURE__ */ jsxs("div", { style: { width, height, backgroundColor: "#000", position: "relative", overflow: "hidden", fontFamily: font }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { width, height, backgroundColor: "var(--vanillasky-template-surface, #000)", position: "relative", overflow: "hidden", fontFamily: font }, children: [
     /* @__PURE__ */ jsx(
       SceneBackground,
       {

package/dist/scene-video-backdrop-IL4F2SVD.js

@@ -0,0 +1,9 @@
+import {
+  SceneVideoBackdrop
+} from "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
+import "./chunk-XTOXFMLM.js";
+import "./chunk-XWWLKRNU.js";
+export {
+  SceneVideoBackdrop
+};

package/dist/{showcase-code-EIGXDZE3.js → showcase-code-NWQAAJIA.js}

@@ -5,16 +5,18 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -293,7 +295,7 @@ var ShowcaseCodeTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{showcase-phone-STUZJRXV.js → showcase-phone-5UW45ATT.js}

@@ -7,17 +7,19 @@ import "./chunk-S7HFLYNN.js";
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -203,7 +205,7 @@ var ShowcasePhoneTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{showcase-terminal-SYP6TKP2.js → showcase-terminal-UVOD25UF.js}

@@ -7,16 +7,18 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -247,7 +249,7 @@ var ShowcaseTerminalTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{showcase-web-57R4RMTG.js → showcase-web-3AW6VHIG.js}

@@ -9,17 +9,19 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -320,7 +322,7 @@ var ShowcaseWebTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{social-milestone-J6QVX4YJ.js → social-milestone-KPKHFOB5.js}

@@ -1,28 +1,30 @@
 import {
   stripPipe
 } from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
 import {
   ConfettiLayer
 } from "./chunk-CJ7F2CE6.js";
 import "./chunk-QAAO7OAY.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-6M6DATLW.js";
 import {
   Emoji,
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   accessibleTextColor,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   MEDIA_TEXT_SHADOW,
@@ -242,7 +244,7 @@ var SocialMilestoneTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font,

package/dist/{social-notification-2RYS7NM4.js → social-notification-EDOU6TZB.js}

@@ -4,17 +4,19 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   Emoji,
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   resolveTokens
@@ -202,7 +204,7 @@ var SocialNotificationTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{social-review-stack-25C6JJ4W.js → social-review-stack-EZOO33SV.js}

@@ -4,16 +4,18 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
+import "./chunk-HT6BGERF.js";
 import {
   accessibleTextColor,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   SPRING_SNAPPY,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   lighten,
@@ -194,7 +196,7 @@ var SocialReviewStackTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font,

package/dist/{social-testimonial-SH54T4CW.js → social-testimonial-DLOINMMY.js}

@@ -4,18 +4,20 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
+import "./chunk-HT6BGERF.js";
 import {
   accessibleTextColor,
   autoTextColor,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   SPRING_SNAPPY,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   TOKEN_DEFAULTS,
@@ -220,7 +222,7 @@ var SocialTestimonialTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font,

package/dist/{social-tweet-T7RTFQ6T.js → social-tweet-6JUM323G.js}

@@ -4,18 +4,20 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   autoTextColor
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   resolveTokens
@@ -249,7 +251,7 @@ var SocialTweetTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"

package/examples/nextjs-quickstart/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^4.0.41",
-    "@vanillaskyai/video": "0.5.6",
+    "@vanillaskyai/video": "0.5.8",
     "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.6",
+  "version": "0.5.8",
   "description": "Open-source video response SDK for personalized AI applications.",
   "keywords": [
     "generative-video",

package/registry/items/backgrounds.json

@@ -24,11 +24,29 @@
       "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  // 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/external-video-backdrop.tsx",
+      "type": "registry:lib",
+      "target": "vanillasky/scene-templates/external-video-backdrop.tsx",
+      "content": "import React from \"react\";\n\n// Source-owned templates may live in a consumer's tree while VideoFrame comes\n// from the package. Both copies must observe the same internal context or the\n// consumer template would mount a second video over the player-owned plane.\nexport type ExternalVideoBackdropMode = false | \"pending\" | \"ready\" | \"fallback\";\n\nconst sharedContext = globalThis as typeof globalThis & {\n  __vanillaskyExternalVideoBackdropContext?: React.Context<ExternalVideoBackdropMode>;\n};\nconst ExternalVideoBackdropContext = sharedContext.__vanillaskyExternalVideoBackdropContext\n  ??= React.createContext<ExternalVideoBackdropMode>(false);\n\nexport function ExternalVideoBackdropProvider({\n  mode,\n  children,\n}: {\n  mode: ExternalVideoBackdropMode;\n  children: React.ReactNode;\n}) {\n  return (\n    <ExternalVideoBackdropContext.Provider value={mode}>\n      {children}\n    </ExternalVideoBackdropContext.Provider>\n  );\n}\n\nexport function useExternalVideoBackdrop(): ExternalVideoBackdropMode {\n  return React.useContext(ExternalVideoBackdropContext);\n}\n"
+    },
+    {
+      "path": "src/visual-system/scene-templates/media-position.ts",
+      "type": "registry:lib",
+      "target": "vanillasky/scene-templates/media-position.ts",
+      "content": "export type MediaPosition = \"center\" | \"top\" | \"bottom\" | \"left\" | \"right\";\n\nconst MEDIA_POSITIONS: Record<MediaPosition, string> = {\n  center: \"center center\",\n  top: \"center top\",\n  bottom: \"center bottom\",\n  left: \"left center\",\n  right: \"right center\",\n};\n\nexport function resolveMediaPosition(value: string): string {\n  return MEDIA_POSITIONS[value as MediaPosition] ?? MEDIA_POSITIONS.center;\n}\n"
+    },
+    {
+      "path": "src/visual-system/scene-templates/scene-video-backdrop.tsx",
+      "type": "registry:lib",
+      "target": "vanillasky/scene-templates/scene-video-backdrop.tsx",
+      "content": "import React, { useEffect, useRef, useState } from \"react\";\nimport { getBackgroundTransform } from \"../backgrounds\";\nimport { resolveMediaPosition } from \"./media-position\";\n\nexport interface SceneVideoBackdropProps {\n  mediaUrl: string;\n  mediaPoster?: string;\n  mediaPosition?: string;\n  backgroundEffect?: string;\n  progress: number;\n  beatIntensity?: number;\n  isPlaying: boolean;\n  playbackId?: string;\n  retainPoster?: boolean;\n  persistent?: boolean;\n  preparedPoster?: {\n    presentationKey: string;\n    mediaPoster: string;\n    mediaPosition: string;\n    backgroundEffect?: string;\n    /** Existing global transition progress. On decoder-constrained Safari,\n     * this fades the decoded incoming still above the outgoing video before\n     * the single video element changes source. */\n    opacity?: number;\n  };\n  onReady?: () => void;\n  onError?: () => void;\n}\n\nexport const SceneVideoBackdrop: React.FC<SceneVideoBackdropProps> = ({\n  mediaUrl,\n  mediaPoster,\n  mediaPosition = \"center\",\n  backgroundEffect,\n  progress,\n  beatIntensity = 0,\n  isPlaying,\n  playbackId = mediaUrl,\n  retainPoster = false,\n  persistent = false,\n  preparedPoster,\n  onReady,\n  onError,\n}) => {\n  const resolvedPosition = resolveMediaPosition(mediaPosition);\n  const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);\n  const [decodedVideoUrl, setDecodedVideoUrl] = useState<string>();\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const startedVideoUrl = useRef<string | undefined>(undefined);\n  const startedPlaybackId = useRef<string | undefined>(undefined);\n  const videoPresentationKey = `${playbackId}\\0${mediaUrl}`;\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    if (!isPlaying) {\n      video.pause();\n      startedVideoUrl.current = undefined;\n      startedPlaybackId.current = undefined;\n      return;\n    }\n    if (startedPlaybackId.current === playbackId) return;\n    const changingSource = startedVideoUrl.current !== undefined && startedVideoUrl.current !== mediaUrl;\n    video.playbackRate = 1;\n    if (!changingSource && video.currentTime > 0) video.currentTime = 0;\n    video.play().catch(() => {});\n    startedVideoUrl.current = mediaUrl;\n    startedPlaybackId.current = playbackId;\n  }, [isPlaying, mediaUrl, playbackId]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    return () => {\n      if (!video) return;\n      video.pause();\n      video.removeAttribute(\"src\");\n      video.load();\n    };\n  }, []);\n\n  const mediaStyle: React.CSSProperties = {\n    position: \"absolute\",\n    inset: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    objectPosition: resolvedPosition,\n    transform: bgTransform.transform,\n    transformOrigin: bgTransform.transformOrigin,\n    zIndex: persistent ? 1 : undefined,\n  };\n  const preparedPosition = preparedPoster\n    ? resolveMediaPosition(preparedPoster.mediaPosition)\n    : resolvedPosition;\n  const preparedTransform = getBackgroundTransform(preparedPoster?.backgroundEffect, 0, 0);\n  const posterPlanes = [\n    ...(persistent && mediaPoster ? [{\n      presentationKey: videoPresentationKey,\n      mediaPoster,\n      mediaPosition: resolvedPosition,\n      transform: bgTransform.transform,\n      transformOrigin: bgTransform.transformOrigin,\n      opacity: 1,\n      zIndex: 0,\n      role: \"current\",\n    }] : []),\n    ...(preparedPoster && preparedPoster.presentationKey !== videoPresentationKey ? [{\n      presentationKey: preparedPoster.presentationKey,\n      mediaPoster: preparedPoster.mediaPoster,\n      mediaPosition: preparedPosition,\n      transform: preparedTransform.transform,\n      transformOrigin: preparedTransform.transformOrigin,\n      opacity: preparedPoster.opacity ?? 0,\n      zIndex: 2,\n      role: \"prepared\",\n    }] : []),\n  ];\n\n  return (\n    <>\n      {posterPlanes.map((posterPlane) => (\n        <img\n          key={posterPlane.presentationKey}\n          src={posterPlane.mediaPoster}\n          alt=\"\"\n          aria-hidden=\"true\"\n          draggable={false}\n          data-video-poster-plane={posterPlane.role}\n          data-video-poster-visible={posterPlane.opacity > 0 ? \"true\" : \"false\"}\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\",\n            objectPosition: posterPlane.mediaPosition,\n            transform: posterPlane.transform,\n            transformOrigin: posterPlane.transformOrigin,\n            zIndex: posterPlane.zIndex,\n            opacity: posterPlane.opacity,\n            pointerEvents: \"none\",\n          }}\n        />\n      ))}\n      <video\n        ref={videoRef}\n        src={mediaUrl}\n        poster={retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || undefined : undefined}\n        muted\n        loop\n        playsInline\n        preload=\"auto\"\n        onLoadedData={(event) => {\n          const video = event.currentTarget;\n          const markPresented = () => {\n            if (!video.isConnected) return;\n            onReady?.();\n            if (!retainPoster) setDecodedVideoUrl(mediaUrl);\n          };\n          if (video.requestVideoFrameCallback) {\n            video.requestVideoFrameCallback(markPresented);\n            return;\n          }\n          markPresented();\n        }}\n        onError={onError}\n        data-media-position={mediaPosition}\n        data-video-backdrop={persistent ? \"persistent\" : \"scene\"}\n        style={mediaStyle}\n      />\n    </>\n  );\n};\n"
+    },
     {
       "path": "src/visual-system/scene-templates/color-utils.ts",
       "type": "registry:lib",
       "target": "vanillasky/scene-templates/color-utils.ts",
-      "content": "/**\n * Color utilities for scene templates.\n *\n * Provides safe color manipulation that works with hex colors\n * and graceful fallbacks for non-hex inputs.\n */\nimport React from \"react\";\nimport { resolveTokens, darken, orderDarkToLight, type BackgroundFamily } from \"../theme\";\n\n// ─── Layout constants ───────────────────────────────────────\n//\n// Shared vertical layout for templates that place a TextOverlay at the top of\n// the scene (showcase-*, chart-*, infographic-*). Using a single constant\n// guarantees the headline sits in the same place across every template, so\n// scene-to-scene cuts don't visually jump.\n//\n// TextOverlay vertically centers itself inside its container, so the visual\n// midline of the headline = TOP_TEXT_AREA_RATIO / 2 of the scene height.\nexport const TOP_TEXT_AREA_RATIO = 0.32;\n\n/**\n * Gradient background — clean 2-color linear gradient with a subtle\n * animated breathing overlay. Matches the look of a plain CSS\n * `linear-gradient(90deg, colorA, colorB)` so palette chips preview\n * exactly what templates render.\n *\n * The animation is deliberately minimal: two low-opacity radial blobs\n * of the same two colors drift slowly, adding just enough motion for\n * video without introducing a third \"midtone\" color that muddies\n * the gradient (a common source of unwanted purple/brown tints).\n */\nexport function gradientBackground({\n  colorA,\n  colorB,\n  solidBg,\n  progress,\n  sceneDuration,\n  seed,\n  family,\n}: {\n  colorA: string;\n  colorB: string;\n  /**\n   * When set, the function returns this color as a solid background\n   * (no gradient, no animated radial overlays). Used when the user has\n   * a scraped brand whose darkest color reads as a real surface — the\n   * accent stays on text/CTAs, but the bg goes flat instead of pairing\n   * with an unrelated brand color and producing a noisy gradient.\n   */\n  solidBg?: string;\n  progress: number;\n  sceneDuration?: number;\n  seed: number;\n  /**\n   * Background family from the style preset. Omitted = \"mesh\", the original\n   * look — so existing configs are untouched. All families are pure CSS\n   * background strings (no `filter`, which the SVG export can't rasterize)\n   * and stay deterministic in `progress`.\n   */\n  family?: BackgroundFamily;\n}): string {\n  if (solidBg) return solidBg;\n  // Every scene owns its foreground motion clock, but consecutive scenes that\n  // use the same brand backdrop must not visibly reset that backdrop. Run one\n  // eased closed loop per scene: the gradient has zero velocity and the exact\n  // same pixels at progress 0 and 1, regardless of scene duration or content\n  // seed. Seeded variation is strongest mid-scene and converges to zero at\n  // both handoff edges.\n  const normalizedProgress = Math.max(0, Math.min(1, progress));\n  const atBoundary = normalizedProgress === 0 || normalizedProgress === 1;\n  const easedLoop = normalizedProgress * normalizedProgress * (3 - 2 * normalizedProgress);\n  const seedEnvelope = atBoundary ? 0 : Math.sin(normalizedProgress * Math.PI) ** 2;\n  void sceneDuration;\n\n  const seededRandom = (s: number): number => {\n    const x = Math.sin(s * 12.9898 + s * 78.233) * 43758.5453;\n    return x - Math.floor(x);\n  };\n  const phase = seededRandom(seed) * Math.PI * 2 * seedEnvelope;\n  const t = (atBoundary ? 0 : easedLoop * Math.PI * 2) + phase;\n\n  // Darker of the two colors anchors the top of the frame so text and logos\n  // sit over the stronger value. 180deg = top→bottom.\n  const [topColor, bottomColor] = orderDarkToLight(colorA, colorB);\n\n  if (family === \"wash\") {\n    // No radials: one calm vertical ramp that drifts a few percent over the\n    // scene. Reads considered rather than energetic.\n    const shift = Math.sin(t) * 6;\n    return `linear-gradient(${175 + shift}deg, ${topColor} 0%, ${bottomColor} 100%)`;\n  }\n\n  if (family === \"spotlight\") {\n    // A single hard pool of accent high in the frame over a near-black\n    // surround — high contrast, very little colour area.\n    const x = 50 + Math.sin(t) * 8;\n    const y = 28 + Math.cos(t + 1) * 5;\n    return `\n      radial-gradient(ellipse 70% 55% at ${x}% ${y}%, ${colorA}66 0%, ${colorA}1a 45%, transparent 72%),\n      linear-gradient(180deg, ${darken(topColor, 0.55)} 0%, ${darken(bottomColor, 0.7)} 100%)\n    `;\n  }\n\n  const x1 = 25 + Math.sin(t) * 25;\n  const y1 = 30 + Math.cos(t + 1.0) * 25;\n  const x2 = 75 + Math.sin(t + 2.0) * 25;\n  const y2 = 70 + Math.cos(t + 3.5) * 25;\n\n  return `\n    radial-gradient(ellipse 60% 60% at ${x1}% ${y1}%, ${colorA}4d 0%, transparent 65%),\n    radial-gradient(ellipse 60% 60% at ${x2}% ${y2}%, ${colorB}4d 0%, transparent 65%),\n    linear-gradient(180deg, ${topColor} 0%, ${bottomColor} 100%)\n  `;\n}\n\n/**\n * Animated brand-background overlay. Foreground semantic colours never alter\n * this visual background.\n */\nexport const BrandGradientOverlay: React.FC<{\n  style: Parameters<typeof resolveTokens>[0];\n  progress: number;\n  sceneDuration?: number;\n  seed: number;\n}> = ({ style: globalStyle, progress, sceneDuration, seed }) => {\n  const tokens = resolveTokens(globalStyle);\n  const [first, second] = tokens.background.type === \"gradient\"\n    ? tokens.background.colors\n    : [tokens.background.color, tokens.background.color];\n  const solidBg = tokens.background.type === \"solid\" ? tokens.background.color : undefined;\n\n  return React.createElement(\"div\", {\n    style: {\n      position: \"absolute\" as const,\n      inset: 0,\n      background: gradientBackground({ colorA: first, colorB: second, solidBg, progress, sceneDuration, seed, family: tokens.preset.background }),\n      pointerEvents: \"none\" as const,\n    },\n  });\n};\n"
+      "content": "/**\n * Color utilities for scene templates.\n *\n * Provides safe color manipulation that works with hex colors\n * and graceful fallbacks for non-hex inputs.\n */\nimport React from \"react\";\nimport { resolveTokens, darken, orderDarkToLight, type BackgroundFamily } from \"../theme\";\n\n// ─── Layout constants ───────────────────────────────────────\n//\n// Shared vertical layout for templates that place a TextOverlay at the top of\n// the scene (showcase-*, chart-*, infographic-*). Using a single constant\n// guarantees the headline sits in the same place across every template, so\n// scene-to-scene cuts don't visually jump.\n//\n// TextOverlay vertically centers itself inside its container, so the visual\n// midline of the headline = TOP_TEXT_AREA_RATIO / 2 of the scene height.\nexport const TOP_TEXT_AREA_RATIO = 0.32;\n\n/**\n * Gradient background — clean 2-color linear gradient with a subtle\n * animated breathing overlay. Matches the look of a plain CSS\n * `linear-gradient(90deg, colorA, colorB)` so palette chips preview\n * exactly what templates render.\n *\n * The animation is deliberately minimal: two low-opacity radial blobs\n * of the same two colors drift slowly, adding just enough motion for\n * video without introducing a third \"midtone\" color that muddies\n * the gradient (a common source of unwanted purple/brown tints).\n */\nexport function gradientBackground({\n  colorA,\n  colorB,\n  solidBg,\n  progress,\n  sceneDuration,\n  seed,\n  family,\n}: {\n  colorA: string;\n  colorB: string;\n  /**\n   * When set, the function returns this color as a solid background\n   * (no gradient, no animated radial overlays). Used when the user has\n   * a scraped brand whose darkest color reads as a real surface — the\n   * accent stays on text/CTAs, but the bg goes flat instead of pairing\n   * with an unrelated brand color and producing a noisy gradient.\n   */\n  solidBg?: string;\n  progress: number;\n  sceneDuration?: number;\n  seed: number;\n  /**\n   * Background family from the style preset. Omitted = \"mesh\", the original\n   * look — so existing configs are untouched. All families are pure CSS\n   * background strings (no `filter`, which the SVG export can't rasterize)\n   * and stay deterministic in `progress`.\n   */\n  family?: BackgroundFamily;\n}): string {\n  if (solidBg) return solidBg;\n  // Every scene owns its foreground motion clock, but consecutive scenes that\n  // use the same brand backdrop must not visibly reset that backdrop. Run one\n  // eased closed loop per scene: the gradient has zero velocity and the exact\n  // same pixels at progress 0 and 1, regardless of scene duration or content\n  // seed. Seeded variation is strongest mid-scene and converges to zero at\n  // both handoff edges.\n  const normalizedProgress = Math.max(0, Math.min(1, progress));\n  const atBoundary = normalizedProgress === 0 || normalizedProgress === 1;\n  const easedLoop = normalizedProgress * normalizedProgress * (3 - 2 * normalizedProgress);\n  const seedEnvelope = atBoundary ? 0 : Math.sin(normalizedProgress * Math.PI) ** 2;\n  void sceneDuration;\n\n  const seededRandom = (s: number): number => {\n    const x = Math.sin(s * 12.9898 + s * 78.233) * 43758.5453;\n    return x - Math.floor(x);\n  };\n  const phase = seededRandom(seed) * Math.PI * 2 * seedEnvelope;\n  const t = (atBoundary ? 0 : easedLoop * Math.PI * 2) + phase;\n\n  // Darker of the two colors anchors the top of the frame so text and logos\n  // sit over the stronger value. 180deg = top→bottom.\n  const [topColor, bottomColor] = orderDarkToLight(colorA, colorB);\n\n  if (family === \"wash\") {\n    // No radials: one calm vertical ramp that drifts a few percent over the\n    // scene. Reads considered rather than energetic.\n    const shift = Math.sin(t) * 6;\n    return `linear-gradient(${175 + shift}deg, ${topColor} 0%, ${bottomColor} 100%)`;\n  }\n\n  if (family === \"spotlight\") {\n    // A single hard pool of accent high in the frame over a near-black\n    // surround — high contrast, very little colour area.\n    const x = 50 + Math.sin(t) * 8;\n    const y = 28 + Math.cos(t + 1) * 5;\n    return `\n      radial-gradient(ellipse 70% 55% at ${x}% ${y}%, ${colorA}66 0%, ${colorA}1a 45%, transparent 72%),\n      linear-gradient(180deg, ${darken(topColor, 0.55)} 0%, ${darken(bottomColor, 0.7)} 100%)\n    `;\n  }\n\n  const x1 = 25 + Math.sin(t) * 25;\n  const y1 = 30 + Math.cos(t + 1.0) * 25;\n  const x2 = 75 + Math.sin(t + 2.0) * 25;\n  const y2 = 70 + Math.cos(t + 3.5) * 25;\n\n  return `\n    radial-gradient(ellipse 60% 60% at ${x1}% ${y1}%, ${colorA}4d 0%, transparent 65%),\n    radial-gradient(ellipse 60% 60% at ${x2}% ${y2}%, ${colorB}4d 0%, transparent 65%),\n    linear-gradient(180deg, ${topColor} 0%, ${bottomColor} 100%)\n  `;\n}\n\n/**\n * Animated brand-background overlay. Foreground semantic colours never alter\n * this visual background.\n */\nexport const BrandGradientOverlay: React.FC<{\n  style: Parameters<typeof resolveTokens>[0];\n  progress: number;\n  sceneDuration?: number;\n  seed: number;\n}> = ({ style: globalStyle, progress, sceneDuration, seed }) => {\n  const tokens = resolveTokens(globalStyle);\n  const [first, second] = tokens.background.type === \"gradient\"\n    ? tokens.background.colors\n    : [tokens.background.color, tokens.background.color];\n  const solidBg = tokens.background.type === \"solid\" ? tokens.background.color : undefined;\n\n  return React.createElement(\"div\", {\n    \"data-brand-gradient\": \"true\",\n    style: {\n      position: \"absolute\" as const,\n      inset: 0,\n      background: gradientBackground({ colorA: first, colorB: second, solidBg, progress, sceneDuration, seed, family: tokens.preset.background }),\n      pointerEvents: \"none\" as const,\n    },\n  });\n};\n"
     }
   ],
   "meta": {