@vanillaskyai/video 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -4,6 +4,16 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.3.4
+
+- Mounts a scene that brings a new photo or video 1.2s before it appears,
+  instead of 0.3s, so the element has time to decode and the scene arrives
+  showing its picture rather than a gradient that pops a beat later. The extra
+  time is invisible: the layer stays fully transparent until the existing
+  0.3s cross-fade begins, so every rendered frame is unchanged, and the mounted
+  element is handed to the incoming scene rather than rebuilt. Scenes that
+  reuse the backdrop already on screen are unaffected.
+
 ## 0.3.3
 
 - Keeps a soundtrack audible on iPhone Safari when its audio context cannot be

package/README.md

@@ -1,6 +1,6 @@
 # Give your AI a video output
 
-![Version 0.3.3 beta](https://img.shields.io/badge/version-0.3.3_beta-7c3aed)
+![Version 0.3.4 beta](https://img.shields.io/badge/version-0.3.4_beta-7c3aed)
 
 **VanillaSky is the open-source video response layer.** Turn text, structured
 data, and live application context into personalized video responses that start
@@ -17,7 +17,7 @@ the planning prompt, trusted templates, validation, streaming, and player.
 For humans:
 
 ```bash
-npm install @vanillaskyai/video@0.3.3 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.4 ai @ai-sdk/openai
 ```
 
 For coding agents:
@@ -106,7 +106,7 @@ shows each complete, validated scene as soon as it is ready and returns a
 deterministic `Video` object when generation finishes.
 
 A copy-and-run app is in
-[`examples/nextjs-quickstart`](https://github.com/VanillaSkyAi/video/tree/v0.3.3/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart`](https://github.com/VanillaSkyAi/video/tree/v0.3.4/examples/nextjs-quickstart).
 
 ## Shape the response
 

package/dist/check-runtime.js

@@ -1,6 +1,6 @@
 import {
   VideoFrame
-} from "./chunk-HXSV6RHF.js";
+} from "./chunk-N3KUA7VP.js";
 import "./chunk-XWWLKRNU.js";
 import "./chunk-SPVTJH3F.js";
 import {

package/dist/{chunk-HXSV6RHF.js → chunk-N3KUA7VP.js}

@@ -31,6 +31,7 @@ function scaleSafeZone(zone, factor) {
 // src/player/video-frame.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var SCENE_TRANSITION_SECONDS = 0.3;
+var MEDIA_PREROLL_SECONDS = 1.2;
 var CONTIGUITY_ULP_FACTOR = 4;
 function clamp01(value) {
   return Math.max(0, Math.min(1, value));
@@ -51,6 +52,9 @@ function brandBackgroundFallback(config) {
   const background = config.style.brand.background;
   return background.type === "solid" ? background.color : background.colors[0];
 }
+function sceneHasBackdrop(range) {
+  return String(range.scene.variables.mediaType || "auto") !== "gradient" && String(range.scene.variables.mediaUrl || "").trim() !== "";
+}
 function sceneBackgroundChanges(left, right) {
   const mediaUrl = (range) => String(range.scene.variables.mediaType || "auto") === "gradient" ? "" : String(range.scene.variables.mediaUrl || "");
   return mediaUrl(left) !== mediaUrl(right);
@@ -178,6 +182,14 @@ function VideoFrame({
   );
   const blendStart = active.end - blendDuration;
   const blendEnd = blendStart + blendDuration;
+  const prerollsNext = Boolean(
+    contiguousNext && sceneHasBackdrop(contiguousNext) && sceneBackgroundChanges(active, contiguousNext)
+  );
+  const prerollDuration = prerollsNext ? Math.min(Math.max(MEDIA_PREROLL_SECONDS, blendDuration), Math.max(0, duration)) : blendDuration;
+  const prerollStart = active.end - prerollDuration;
+  const mountingNext = Boolean(
+    contiguousNext && time >= prerollStart && time < blendEnd && (eligibleNextTransition || prerollsNext)
+  );
   const previewingNext = Boolean(
     eligibleNextTransition && time >= blendStart && time < blendEnd
   );
@@ -232,7 +244,7 @@ function VideoFrame({
                 }
               }
             ),
-            previewingNext && contiguousNext && nextTiming ? [
+            mountingNext && contiguousNext ? [
               /* @__PURE__ */ jsx(
                 SceneLayer,
                 {
@@ -244,7 +256,7 @@ function VideoFrame({
                   width: canvas.width,
                   height: canvas.height,
                   playing,
-                  layer: "outgoing",
+                  layer: previewingNext ? "outgoing" : "active",
                   opacity: 1 - blendProgress,
                   interactive: true,
                   zIndex: 1

package/dist/react.js

@@ -29,7 +29,7 @@ import "./chunk-2E6T633S.js";
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-HXSV6RHF.js";
+} from "./chunk-N3KUA7VP.js";
 import {
   fontStack
 } from "./chunk-XWWLKRNU.js";

package/docs/getting-started.md

@@ -5,7 +5,7 @@
 Install VanillaSky:
 
 ```bash
-npm install @vanillaskyai/video@0.3.3 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.4 ai @ai-sdk/openai
 ```
 
 Set your provider key in `.env.local` (never commit it):
@@ -50,7 +50,7 @@ sets its marker only for `next dev`, and it accepts only localhost. Every
 production request is denied. Replace it with your real session validation
 before deploying. For literal files and commands,
 use the tested
-[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.3/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.4/examples/nextjs-quickstart).
 
 `model` can come from any AI SDK provider, registry, gateway, compatible API,
 or custom implementation. The application can choose a cheaper or faster model

package/docs/integrate-nextjs.md

@@ -5,7 +5,7 @@
 Install VanillaSky and one AI SDK provider:
 
 ```bash
-npm install @vanillaskyai/video@0.3.3 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.4 ai @ai-sdk/openai
 ```
 
 Create an ignored `.env.local`:
@@ -74,7 +74,7 @@ requests; replace it with your application's session validation before
 deploying.
 
 The copy-and-run app is in the
-[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.3/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart` directory](https://github.com/VanillaSkyAi/video/tree/v0.3.4/examples/nextjs-quickstart).
 
 For another LLM, replace `openai(...)` with the matching AI SDK model. The route
 shape and React code stay the same. See [Provider integration](provider-integration.md)

package/examples/nextjs-quickstart/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^4.0.42",
-    "@vanillaskyai/video": "0.3.3",
+    "@vanillaskyai/video": "0.3.4",
     "ai": "^7.0.66",
     "next": "16.3.1",
     "react": "19.2.8",

package/package.json

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