@vanillaskyai/video 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -4,6 +4,35 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.3.2
+
+- Rebuilds text legibility over photo and video backdrops. Scrims now ramp off
+  an eased curve instead of a two-stop linear fade, so they no longer leave a
+  visible band across the frame, and they are shaped to where each template's
+  copy actually sits rather than washing the whole picture. Type over media
+  carries its own halo, which lets the scrims stay lighter: the footage keeps
+  its contrast and highlights while the headline stays readable.
+- Stops darkening the brand gradient for media that never arrives. A dead,
+  blocked, or unresolved `mediaUrl` used to leave the full scrim stack over
+  the gradient fallback, so the scene rendered as a muddy, vignetted version
+  of the gradient scenes beside it. The fallback is now the clean gradient it
+  was always documented to be.
+- Holds a media scene's scrim back until the backdrop actually paints, so a
+  photo or video that is still loading shows the clean brand gradient instead
+  of a gradient wearing an overlay meant for footage. The scrim and the
+  picture now arrive on the same frame.
+- Preloads scene backdrops as soon as their URL is known — including the
+  `asset.patch` that carries a resolved stock lookup — so the loading window
+  is usually gone before the scene plays. Video posters are warmed; video
+  streams deliberately are not.
+- Hides playback controls while a video is playing until the viewer hovers,
+  focuses, or taps the player, and keeps paused and completed controls visible.
+- Makes fullscreen usable on mobile browsers through prefixed fullscreen APIs
+  and a viewport-filling fallback when native fullscreen is unavailable.
+- Restores configured soundtrack volume and end-of-video fades on iPhone Safari
+  by using a Web Audio gain stage for same-origin audio when element volume is
+  device-controlled, while preserving direct playback for cross-origin tracks.
+
 ## 0.3.1
 
 - Redesigns player controls for each playback state with responsive circular

package/README.md

@@ -1,6 +1,6 @@
 # Give your AI a video output
 
-![Version 0.3.1 beta](https://img.shields.io/badge/version-0.3.1_beta-7c3aed)
+![Version 0.3.2 beta](https://img.shields.io/badge/version-0.3.2_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.1 ai @ai-sdk/openai
+npm install @vanillaskyai/video@0.3.2 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.1/examples/nextjs-quickstart).
+[`examples/nextjs-quickstart`](https://github.com/VanillaSkyAi/video/tree/v0.3.2/examples/nextjs-quickstart).
 
 ## Shape the response
 

package/dist/{bg-confetti-WNQXS7ZS.js → bg-confetti-KTHLUJPO.js}

@@ -4,15 +4,15 @@ import {
 import "./chunk-QAAO7OAY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
 import {
   BrandGradientOverlay
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/scene-templates/bg-confetti.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{bg-emoji-ETI47GLS.js → bg-emoji-AW7374DZ.js}

@@ -3,17 +3,17 @@ import {
 } from "./chunk-QAAO7OAY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import {
   Emoji
 } from "./chunk-L5BTTCZV.js";
 import {
   BrandGradientOverlay
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/scene-templates/bg-emoji.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{bg-media-SVUZAMGX.js → bg-media-KGYE6UVS.js}

@@ -1,20 +1,23 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   ConfettiLayer
 } from "./chunk-CJ7F2CE6.js";
 import "./chunk-QAAO7OAY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/scene-templates/bg-media.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -55,6 +58,7 @@ var BgMediaTemplate = ({
             width,
             height,
             ...getMediaBackgroundProps(variables),
+            textAnchor: "center",
             backgroundEffect,
             seed: String(variables.texts || ""),
             isPlaying,
@@ -74,6 +78,7 @@ var BgMediaTemplate = ({
         /* @__PURE__ */ jsx(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: resolveTokens(style).preset.type,
             archetype: textArchetype ?? "subtle",

package/dist/{brand-message-F3RD4P3P.js → brand-message-AY43ZQR2.js}

@@ -4,15 +4,16 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import "./chunk-35LIYILY.js";
 import {
   renderWithEmoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-ABZACD4G.js";
+import "./chunk-IJM4B2ZN.js";
 import {
   interpolate
 } from "./chunk-XTOXFMLM.js";
-import "./chunk-FNAEQ7QO.js";
+import "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/typography/BrandMessageBubble.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/{chart-bar-CNSC7BNK.js → chart-bar-Z42RDRQT.js}

@@ -1,15 +1,18 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   SPRING_SNAPPY,
   interpolate,
@@ -17,7 +20,7 @@ import {
 } from "./chunk-XTOXFMLM.js";
 import {
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/charts/BarChart.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -279,6 +282,7 @@ var ChartBarTemplate = ({
         /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: height * TOP_TEXT_AREA_RATIO, overflow: "visible" }, children: /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: resolveTokens(style).preset.type,
             archetype: "subtle",

package/dist/{chart-counter-MCRHKN77.js → chart-counter-X7NAOQ2C.js}

@@ -4,27 +4,31 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   ConfettiLayer
 } from "./chunk-CJ7F2CE6.js";
 import "./chunk-QAAO7OAY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
 import {
+  MEDIA_TEXT_SHADOW,
   TOKEN_DEFAULTS,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/typography/CountUpNumber.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -93,7 +97,7 @@ var CountUpNumber = ({
     [0, 1],
     { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
   );
-  const mediaTextShadow = hasMediaShadow ? "0 2px 8px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35)" : void 0;
+  const mediaTextShadow = hasMediaShadow ? MEDIA_TEXT_SHADOW : void 0;
   const finalLabelFontSize = labelFontSize ?? 36 * s * 1.3;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -253,6 +257,7 @@ var ChartCounterTemplate = ({
         /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: height * TOP_TEXT_AREA_RATIO, overflow: "visible" }, children: /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: resolveTokens(style).preset.type,
             archetype: "subtle",

package/dist/{chart-progress-ring-RMI4A7ZK.js → chart-progress-ring-7NSNNHL4.js}

@@ -5,22 +5,25 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-IFOW65Z6.js";
+} from "./chunk-4AODC6MS.js";
+import {
+  hasSceneMedia
+} from "./chunk-35LIYILY.js";
 import {
   TemplateText
-} from "./chunk-BCRUUJ6A.js";
+} from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 import {
   interpolate
 } from "./chunk-XTOXFMLM.js";
 import {
   TOKEN_DEFAULTS,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/charts/ProgressRing.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -254,6 +257,7 @@ var ChartProgressRingTemplate = ({
         /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: height * TOP_TEXT_AREA_RATIO, overflow: "visible" }, children: /* @__PURE__ */ jsx2(
           TemplateText,
           {
+            overMedia: hasSceneMedia(variables),
             motionProgress,
             typeTreatment: resolveTokens(style).preset.type,
             archetype: "subtle",

package/dist/check-runtime.js

@@ -1,7 +1,7 @@
 import {
   VideoFrame
-} from "./chunk-QTMHS7JD.js";
-import "./chunk-FNAEQ7QO.js";
+} from "./chunk-HXSV6RHF.js";
+import "./chunk-XWWLKRNU.js";
 import "./chunk-SPVTJH3F.js";
 import {
   resolveVideoBrand

package/dist/chunk-35LIYILY.js

@@ -0,0 +1,25 @@
+// src/visual-system/scene-templates/media-source.ts
+var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".m4v", ".avi"];
+function isVideoUrl(url) {
+  try {
+    const pathname = new URL(url).pathname.toLowerCase();
+    return VIDEO_EXTENSIONS.some((ext) => pathname.endsWith(ext));
+  } catch {
+    const lower = url.toLowerCase();
+    return VIDEO_EXTENSIONS.some((ext) => lower.endsWith(ext));
+  }
+}
+function resolveMediaType(mediaType, mediaUrl) {
+  if (mediaType === "gradient") return "gradient";
+  if (mediaType === "video") return "video";
+  if (mediaType === "photo") return "photo";
+  return mediaUrl && isVideoUrl(mediaUrl) ? "video" : "photo";
+}
+function hasSceneMedia(variables) {
+  return String(variables.mediaUrl || "").trim() !== "" && String(variables.mediaType || "auto") !== "gradient";
+}
+
+export {
+  resolveMediaType,
+  hasSceneMedia
+};

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

@@ -1,21 +1,14 @@
+import {
+  resolveMediaType
+} from "./chunk-35LIYILY.js";
 import {
   BrandGradientOverlay,
   getBackgroundTransform
-} from "./chunk-ABZACD4G.js";
+} from "./chunk-IJM4B2ZN.js";
 
 // src/visual-system/scene-templates/scene-background.tsx
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".m4v", ".avi"];
-function isVideoUrl(url) {
-  try {
-    const pathname = new URL(url).pathname.toLowerCase();
-    return VIDEO_EXTENSIONS.some((ext) => pathname.endsWith(ext));
-  } catch {
-    const lower = url.toLowerCase();
-    return VIDEO_EXTENSIONS.some((ext) => lower.endsWith(ext));
-  }
-}
 var MEDIA_POSITIONS = {
   center: "center center",
   top: "center top",
@@ -29,38 +22,57 @@ function resolveMediaPosition(value) {
 function resolveMediaTreatment(value) {
   return value === "subtle" || value === "text-safe" ? value : "cinematic";
 }
-function getMediaTreatmentLayers(value) {
+var SCRIM_STOP_COUNT = 7;
+function smoothstep(t) {
+  return t * t * (3 - 2 * t);
+}
+function easedStops(peakAlpha, start, end, direction) {
+  const alphaAt = (t) => {
+    const eased = direction === "fade-out" ? 1 - smoothstep(t) : smoothstep(t);
+    return `rgba(0,0,0,${Number((peakAlpha * eased).toFixed(3))})`;
+  };
+  const stops = [];
+  if (start > 0) stops.push(`${alphaAt(0)} 0%`);
+  for (let i = 0; i < SCRIM_STOP_COUNT; i += 1) {
+    const t = i / (SCRIM_STOP_COUNT - 1);
+    const position = Number((start + (end - start) * t).toFixed(2));
+    stops.push(`${alphaAt(t)} ${position}%`);
+  }
+  if (end < 100) stops.push(`${alphaAt(1)} 100%`);
+  return stops.join(", ");
+}
+function getMediaTreatmentLayers(value, anchor = "full") {
   const treatment = resolveMediaTreatment(value);
   const vignette = {
     id: "vignette",
-    background: treatment === "subtle" ? "radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.28) 100%)" : "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.75) 100%)"
+    background: treatment === "subtle" ? `radial-gradient(ellipse at center, ${easedStops(0.28, 45, 100, "fade-in")})` : `radial-gradient(ellipse at center, ${easedStops(0.72, 32, 100, "fade-in")})`
   };
   if (treatment === "subtle") return [vignette];
-  const cinematic = [
-    vignette,
-    {
+  const textSafe = treatment === "text-safe";
+  const layers = [vignette];
+  if (anchor !== "bottom") {
+    layers.push({
       id: "center-scrim",
-      background: treatment === "text-safe" ? "radial-gradient(ellipse 90% 56% at 50% 50%, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.18) 55%, transparent 84%)" : "radial-gradient(ellipse 85% 50% at 50% 50%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.10) 50%, transparent 80%)"
-    },
-    {
+      background: textSafe ? `radial-gradient(ellipse 92% 58% at 50% 50%, ${easedStops(0.46, 34, 90, "fade-out")})` : `radial-gradient(ellipse 88% 52% at 50% 50%, ${easedStops(0.26, 30, 88, "fade-out")})`
+    });
+  }
+  if (anchor !== "center") {
+    layers.push({
       id: "bottom-scrim",
-      background: treatment === "text-safe" ? "linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 100%)" : "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)",
+      background: `linear-gradient(to top, ${easedStops(textSafe ? 0.64 : 0.5, 8, 100, "fade-out")})`,
       style: { top: "55%" }
-    }
-  ];
-  if (treatment === "text-safe") {
-    cinematic.splice(1, 0, {
-      id: "full-wash",
-      background: "rgba(0,0,0,0.30)"
     });
   }
-  return cinematic;
+  return layers;
 }
-function resolveMediaType(mediaType, mediaUrl) {
-  if (mediaType === "gradient") return "gradient";
-  if (mediaType === "video") return "video";
-  if (mediaType === "photo") return "photo";
-  return mediaUrl && isVideoUrl(mediaUrl) ? "video" : "photo";
+function initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster) {
+  if (typeof window === "undefined") return "ready";
+  if (!wantsMedia) return "ready";
+  if (resolved === "video") return mediaPoster ? "ready" : "pending";
+  if (typeof Image === "undefined") return "ready";
+  const cached = new Image();
+  cached.src = mediaUrl;
+  return cached.complete && cached.naturalWidth > 0 ? "ready" : "pending";
 }
 function getMediaBackgroundProps(variables) {
   return {
@@ -83,6 +95,7 @@ var SceneBackground = ({
   mediaPoster,
   mediaPosition = "center",
   mediaTreatment = "cinematic",
+  textAnchor = "full",
   backgroundEffect,
   seed,
   isPlaying = true,
@@ -91,10 +104,35 @@ var SceneBackground = ({
   void _width;
   void _height;
   const resolved = resolveMediaType(mediaType, mediaUrl);
-  const showMedia = resolved !== "gradient" && !!mediaUrl;
+  const wantsMedia = resolved !== "gradient" && !!mediaUrl;
+  const [mediaPaint, setMediaPaint] = useState(
+    () => initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster)
+  );
+  useEffect(() => {
+    setMediaPaint(initialMediaPaint(wantsMedia, resolved, mediaUrl, mediaPoster));
+    if (!wantsMedia || resolved !== "photo") return;
+    if (typeof Image === "undefined") return;
+    let cancelled = false;
+    const probe = new Image();
+    probe.onload = () => {
+      if (!cancelled) setMediaPaint("ready");
+    };
+    probe.onerror = () => {
+      if (!cancelled) setMediaPaint("failed");
+    };
+    probe.src = mediaUrl;
+    if (probe.complete) setMediaPaint(probe.naturalWidth > 0 ? "ready" : "failed");
+    return () => {
+      cancelled = true;
+      probe.onload = null;
+      probe.onerror = null;
+    };
+  }, [mediaUrl, mediaPoster, resolved, wantsMedia]);
+  const showMedia = wantsMedia && mediaPaint !== "failed";
+  const showTreatment = wantsMedia && mediaPaint === "ready";
   const resolvedPosition = resolveMediaPosition(mediaPosition);
   const resolvedTreatment = resolveMediaTreatment(mediaTreatment);
-  const treatmentLayers = getMediaTreatmentLayers(resolvedTreatment);
+  const treatmentLayers = getMediaTreatmentLayers(resolvedTreatment, textAnchor);
   const gradSeed = typeof seed === "number" ? seed : typeof seed === "string" ? seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) : 0;
   const bgTransform = getBackgroundTransform(
     backgroundEffect,
@@ -154,6 +192,8 @@ var SceneBackground = ({
         loop: true,
         playsInline: true,
         preload: "auto",
+        onLoadedData: () => setMediaPaint("ready"),
+        onError: () => setMediaPaint("failed"),
         "data-media-position": mediaPosition,
         style: {
           position: "absolute",
@@ -181,7 +221,7 @@ var SceneBackground = ({
         }
       }
     )),
-    showMedia && treatmentLayers.map((layer) => /* @__PURE__ */ jsx(
+    showTreatment && treatmentLayers.map((layer) => /* @__PURE__ */ jsx(
       "div",
       {
         "data-media-treatment": resolvedTreatment,

package/dist/{chunk-FSG2PYWG.js → chunk-G5JPHBX7.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-XTOXFMLM.js";
 import {
   TOKEN_DEFAULTS
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/primitives/devices/product-surface-config.ts
 function resolveProductSurfaceMotion(value) {

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

@@ -1,6 +1,6 @@
 import {
   resolveDensity
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 import {
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";

package/dist/{chunk-ABZACD4G.js → chunk-IJM4B2ZN.js}

@@ -4,7 +4,7 @@ import {
 import {
   darken,
   resolveTokens
-} from "./chunk-FNAEQ7QO.js";
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/theme/colors.ts
 function withOpacity(hex, opacity) {

package/dist/{chunk-BCRUUJ6A.js → chunk-TCEHK2BW.js}

@@ -9,6 +9,9 @@ import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import {
+  MEDIA_TEXT_SHADOW
+} from "./chunk-XWWLKRNU.js";
 
 // src/visual-system/scene-templates/text-archetypes.ts
 var TEXT_ARCHETYPES = [
@@ -526,7 +529,8 @@ var TemplateText = ({
   safeZone = DEFAULT_SAFE_ZONE,
   font = DEFAULT_FONT,
   color = "#FFFFFF",
-  beatIntensity = 0
+  beatIntensity = 0,
+  overMedia = false
 }) => {
   const textSafe = typeof textRaw === "string" ? textRaw : "";
   const isDevelopment = import.meta.env?.DEV;
@@ -568,7 +572,7 @@ var TemplateText = ({
   } : baseTypo;
   const presetWeight = tt ? Math.min(900, Math.max(100, fontWeight + tt.weightDelta)) : fontWeight;
   const presetSize = tt ? fontSize * tt.sizeScale : fontSize;
-  const textShadow = dropShadowFor(color);
+  const textShadow = overMedia ? MEDIA_TEXT_SHADOW : dropShadowFor(color);
   const containerStyle = {
     position: "absolute",
     left: 0,

package/dist/{chunk-FNAEQ7QO.js → chunk-XWWLKRNU.js}

@@ -144,6 +144,7 @@ function lighten(hex, factor) {
   const lb = Math.min(255, Math.round(b + (255 - b) * factor));
   return `#${lr.toString(16).padStart(2, "0")}${lg.toString(16).padStart(2, "0")}${lb.toString(16).padStart(2, "0")}`;
 }
+var MEDIA_TEXT_SHADOW = "0 2px 8px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35)";
 
 export {
   TOKEN_DEFAULTS,
@@ -151,5 +152,6 @@ export {
   resolveDensity,
   resolveTokens,
   darken,
-  lighten
+  lighten,
+  MEDIA_TEXT_SHADOW
 };