npm - @evatril/video-templates - Versions diffs - 2.0.3 → 2.0.6 - Mend

@evatril/video-templates 2.0.3 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +1 -1
package/src/Invitations/Frames/F20012026_01.jsx +7 -5
package/src/Invitations/Frames/F20012026_02.jsx +203 -211
package/src/Invitations/Frames/F20012026_03.jsx +4 -11
package/src/Invitations/Themes/T20012026_01.jsx +95 -72
package/src/Invitations/hooks/usePreloadImages.js +11 -7

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.3",
+  "version": "2.0.6",
   "description": "",
   "main": "src/index.js",
   "remotion": {

package/src/Invitations/Frames/F20012026_01.jsx CHANGED Viewed

@@ -9,17 +9,17 @@ import {
   staticFile
 } from "remotion";
-import {  Butterflies20012026 } from "../Elements/Butterflies20012026.jsx";
+import { Butterflies20012026 } from "../Elements/Butterflies20012026.jsx";
 import { OpeningGate20012026 } from "../Elements/OpeningGate20012026.jsx";
 import { CoupleWalk20012026 } from "../Elements/CoupleWalk20012026.jsx";
-import {FlowersSide20012026} from "../Elements/FlowersSide20012026.jsx";
+import { FlowersSide20012026 } from "../Elements/FlowersSide20012026.jsx";
 export const F20012026_01 = ({
   firstName, secondName, welcomeMessage,
 }) => {
   /* -------------------- HOOKS (ONLY HERE) -------------------- */
   const frame = useCurrentFrame();
-  const { fps, width, height, durationInFrames } = useVideoConfig();
+  const { fps, width, height } = useVideoConfig();
   /* -------------------- MESSAGE REVEAL -------------------- */
   const messageStart = fps * 4;
@@ -58,6 +58,8 @@ export const F20012026_01 = ({
   const groomAnim = reveal(groomStart);
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
       {/* ================= BACKGROUND ================= */}
       <Img
         src={staticFile("video-images/20012026-bg.png")}
@@ -154,7 +156,7 @@ export const F20012026_01 = ({
           <h1
             style={{
-              width: "100%",
+              width: "100%",
               maxWidth: "80%",
               fontFamily: "Playfair Display",
               color: "#6B1E2E",
@@ -171,7 +173,7 @@ export const F20012026_01 = ({
             }}
           >
-            {secondName}
+            {secondName}
           </h1>
         </div>
       </div>

package/src/Invitations/Frames/F20012026_02.jsx CHANGED Viewed

@@ -13,22 +13,12 @@ import { SideTrees20012026 } from "../Elements/SideTrees20012026.jsx";
 import { PeacockDance20012026 } from "../Elements/PeacockDance20012026.jsx";
 import { SmoothRevealFromTop } from "../Elements/SmoothRevealFromTop.jsx";
-export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNote, invitationMessage ,occasionDate,fadeInDuration = 30,
+export const F20012026_02 = ({ firstName, secondName, firstSideNote, secondSideNote, invitationMessage, occasionDate, fadeInDuration = 30,
 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   /* ================= SCENE FADE + ZOOM  ================= */
-  const sceneOpacity = interpolate(
-    frame,
-    [0, fadeInDuration],
-    [0, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
-  );
   // 🎥 VERY SMOOTH CINEMATIC ZOOM
   const sceneScale = interpolate(
     frame,
@@ -42,19 +32,19 @@ export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNot
   /* ================= SAFE DATE FORMAT ================= */
   const formatDate = (date) => {
-  if (!date) return "";
-  const d = new Date(date);
-  if (isNaN(d.getTime())) return "";
+    if (!date) return "";
+    const d = new Date(date);
+    if (isNaN(d.getTime())) return "";
-  return d.toLocaleDateString("en-IN", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-};
+    return d.toLocaleDateString("en-IN", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    });
+  };
-   const DETAILS_START = fps * 3;
+  const DETAILS_START = fps * 3;
   /* ================= IMAGE ANIMATION ================= */
   const showImageAfter = fadeInDuration * 1;
@@ -80,232 +70,234 @@ export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNot
   );
   return (
-    <AbsoluteFill
-      style={{
-        opacity: sceneOpacity,
-        transform: `scale(${sceneScale})`,
-        transformOrigin: "center center",
-        overflow: "hidden",
-      }}
-    >
-      {/* ================= BACKGROUND ================= */}
-      <Img
-        src={staticFile("video-images/20012026-bg.png")}
+    <AbsoluteFill>
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
+      <AbsoluteFill
         style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-        }}
-      />
+          transform: `scale(${sceneScale})`,
+          transformOrigin: "center center",
+          overflow: "hidden",
-      <Img
-        src={staticFile("video-images/20012026-curtain-floral.png")}
-        style={{
-          position: "absolute",
-          left: "50%",
-          width: "100%",
-          opacity: imageOpacity,
-          transform: `translateX(-50%) scale(${imageScale})`,
-        }}
-      />
-      {/* ================= DECORATIONS ================= */}
-      <SideTrees20012026 startAfter={2} />
-      <PeacockDance20012026 startAfter={3} />
-      <div
-        style={{
-          position: "relative",
-          top: "26%",
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          textAlign: "center",
-          gap: "15px"
         }}
       >
-        {/* Invitation Message */}
-        <div
-          style={{
-            maxWidth: "50%",
-            fontFamily: "Dancing Script",
-            color: "#4A3A2A",
-            fontSize: 40,
-            fontWeight: "500",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 0,
-            })
-          }}
-        >
-          {invitationMessage}
-        </div>
-        {/* Bride Name */}
-        <h1
+        {/* ================= BACKGROUND ================= */}
+        <Img
+          src={staticFile("video-images/20012026-bg.png")}
           style={{
-            maxWidth: "70%",
-            fontFamily: "Playfair Display",
-            color: "#7A1E2E",
-            fontSize: 60,
-            fontWeight: "600",
-            lineHeight: 1.2,
-            letterSpacing: "3px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 25,
-            })
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
           }}
-        >
-          {firstName}
-        </h1>
+        />
-        {/* Bride Side Note */}
-        <div
+        <Img
+          src={staticFile("video-images/20012026-curtain-floral.png")}
           style={{
-            maxWidth: "60%",
-            fontFamily: "Dancing Script",
-            color: "#B87A6A",
-            fontSize: 40,
-            fontWeight: "600",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 50,
-            })
+            position: "absolute",
+            left: "50%",
+            width: "100%",
+            opacity: imageOpacity,
+            transform: `translateX(-50%) scale(${imageScale})`,
           }}
-        >
-          {firstSideNote}
-        </div>
+        />
-        {/* & Symbol */}
-        <div
-          style={{
-            fontSize: 40,
-            color: "#C9A24D",
-            letterSpacing: "6px",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 70,
-            })
-          }}
-        >
-          ❁ ❁ ❁
-        </div>
-        {/* Groom Name */}
-        <h1
-          style={{
-            maxWidth: "70%",
-            fontFamily: "Playfair Display",
-            color: "#7A1E2E",
-            fontSize: 60,
-            fontWeight: "600",
-            lineHeight: 1.2,
-            letterSpacing: "3px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 95,
-            })
-          }}
-        >
-          {secondName}
-        </h1>
-        {/* Groom Side Note */}
-        <div
-          style={{
-            maxWidth: "70%",
-            fontFamily: "Dancing Script",
-            color: "#B87A6A",
-            fontSize: 40,
-            fontWeight: "600",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 120,
-            })
-          }}
-        >
-          {secondSideNote}
-        </div>
+        {/* ================= DECORATIONS ================= */}
+        <SideTrees20012026 startAfter={2} />
+        <PeacockDance20012026 startAfter={3} />
-        {/* Date */}
         <div
           style={{
-            maxWidth: "70%",
-            marginTop: 20,
+            position: "relative",
+            top: "26%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
             textAlign: "center",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 145,
-            })
+            gap: "15px"
           }}
         >
-          {/* -------- Message Line -------- */}
+          {/* Invitation Message */}
           <div
             style={{
-              fontSize: 45,
-              fontFamily:"Great Vibes",
+              maxWidth: "50%",
+              fontFamily: "Dancing Script",
+              color: "#4A3A2A",
+              fontSize: 40,
               fontWeight: "500",
+              lineHeight: 1.2,
+              letterSpacing: "2px",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 0,
+              })
+            }}
+          >
+            {invitationMessage}
+          </div>
+          {/* Bride Name */}
+          <h1
+            style={{
+              maxWidth: "70%",
+              fontFamily: "Playfair Display",
+              color: "#7A1E2E",
+              fontSize: 60,
+              fontWeight: "600",
+              lineHeight: 1.2,
               letterSpacing: "3px",
-              color: "#2F6B4F",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 25,
+              })
+            }}
+          >
+            {firstName}
+          </h1>
+          {/* Bride Side Note */}
+          <div
+            style={{
+              maxWidth: "60%",
+              fontFamily: "Dancing Script",
+              color: "#B87A6A",
+              fontSize: 40,
+              fontWeight: "600",
               lineHeight: 1.2,
-              marginBottom: 8,
-              whiteSpace: "nowrap",
+              letterSpacing: "2px",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 50,
+              })
+            }}
+          >
+            {firstSideNote}
+          </div>
+          {/* & Symbol */}
+          <div
+            style={{
+              fontSize: 40,
+              color: "#C9A24D",
+              letterSpacing: "6px",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 70,
+              })
             }}
           >
-            – Join us on this auspicious day –
+            ❁ ❁ ❁
           </div>
-          {/* -------- Date Line -------- */}
+          {/* Groom Name */}
+          <h1
+            style={{
+              maxWidth: "70%",
+              fontFamily: "Playfair Display",
+              color: "#7A1E2E",
+              fontSize: 60,
+              fontWeight: "600",
+              lineHeight: 1.2,
+              letterSpacing: "3px",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 95,
+              })
+            }}
+          >
+            {secondName}
+          </h1>
+          {/* Groom Side Note */}
           <div
             style={{
-              fontSize: 55,
-              fontFamily:"Playfair Display",
-              fontWeight: "400",
-              color: "#5A4632",
+              maxWidth: "70%",
+              fontFamily: "Dancing Script",
+              color: "#B87A6A",
+              fontSize: 40,
+              fontWeight: "600",
               lineHeight: 1.2,
-              letterSpacing: "4px",
-              whiteSpace: "nowrap", // 🔥 force single line
+              letterSpacing: "2px",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 120,
+              })
             }}
           >
-            {formatDate(occasionDate)}
+            {secondSideNote}
           </div>
-        </div>
+          {/* Date */}
+          <div
+            style={{
+              maxWidth: "70%",
+              marginTop: 20,
+              textAlign: "center",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 145,
+              })
+            }}
+          >
+            {/* -------- Message Line -------- */}
+            <div
+              style={{
+                fontSize: 45,
+                fontFamily: "Great Vibes",
+                fontWeight: "500",
+                letterSpacing: "3px",
+                color: "#2F6B4F",
+                lineHeight: 1.2,
+                marginBottom: 8,
+                whiteSpace: "nowrap",
+              }}
+            >
+              – Join us on this auspicious day –
+            </div>
-      </div>
+            {/* -------- Date Line -------- */}
+            <div
+              style={{
+                fontSize: 55,
+                fontFamily: "Playfair Display",
+                fontWeight: "400",
+                color: "#5A4632",
+                lineHeight: 1.2,
+                letterSpacing: "4px",
+                whiteSpace: "nowrap", // 🔥 force single line
+              }}
+            >
+              {formatDate(occasionDate)}
+            </div>
+          </div>
+        </div>
+      </AbsoluteFill>
     </AbsoluteFill>
   );
 };

package/src/Invitations/Frames/F20012026_03.jsx CHANGED Viewed

@@ -23,16 +23,6 @@ export const F20012026_03 = ({
   const { fps } = useVideoConfig();
   /* ================= SCENE REVEAL (SMOKE FOLLOW-UP) ================= */
-  const sceneOpacity = interpolate(
-    frame,
-    [0, fadeInDuration],
-    [0, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
-  );
   // 🎥 VERY SMOOTH CINEMATIC ZOOM
   const sceneScale = interpolate(
     frame,
@@ -102,9 +92,10 @@ export const F20012026_03 = ({
   );
   return (
+     <AbsoluteFill>
+    <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
     <AbsoluteFill
       style={{
-        opacity: sceneOpacity,
         transform: `scale(${sceneScale})`,
         transformOrigin: "center center",
         overflow: "hidden",
@@ -313,5 +304,7 @@ export const F20012026_03 = ({
       </div>
     </AbsoluteFill>
+    </AbsoluteFill>
   );
 };

package/src/Invitations/Themes/T20012026_01.jsx CHANGED Viewed

@@ -1,5 +1,12 @@
-import React from "react";
-import { Sequence, useVideoConfig, Audio, staticFile,AbsoluteFill } from "remotion";
+import React, { useMemo } from "react";
+import {
+  Sequence,
+  useVideoConfig,
+  Audio,
+  staticFile,
+  AbsoluteFill,
+} from "remotion";
 import { F20012026_01 } from "../Frames/F20012026_01.jsx";
 import { F20012026_02 } from "../Frames/F20012026_02.jsx";
 import { F20012026_03 } from "../Frames/F20012026_03.jsx";
@@ -18,7 +25,8 @@ export const T20012026_01 = ({
 }) => {
   const { durationInFrames } = useVideoConfig();
-  // Detect creator safely
+  /* ---------------- SAFE DATA ---------------- */
   const whoIsCreating =
     event?.occasion_data?.who_is_creating ??
     event?.who_is_creating;
@@ -26,7 +34,6 @@ export const T20012026_01 = ({
   const isBrideCreating =
     whoIsCreating === "Bride" || !whoIsCreating;
-  // Names
   const brideName =
     event?.occasion_data?.bride_name ??
     event?.bride_name ??
@@ -42,7 +49,6 @@ export const T20012026_01 = ({
   const firstName = isBrideCreating ? brideName : groomName;
   const secondName = isBrideCreating ? groomName : brideName;
-  // Side notes (safe)
   const firstSideNote = isBrideCreating
     ? formData?.bride_side_note || ""
     : formData?.groom_side_note || "";
@@ -51,82 +57,99 @@ export const T20012026_01 = ({
     ? formData?.groom_side_note || ""
     : formData?.bride_side_note || "";
-  // Venue (safe)
   const venueName =
     venue?.name || formData?.venue_name || "";
   const venueAddress =
     venue?.address || formData?.venue_address || "";
+  /* ---------------- TIMING ---------------- */
   const framesPerPage = Math.floor(durationInFrames / 3);
-  const transitionDuration = Math.floor(framesPerPage * 0.25); // ~1 sec
-  usePreloadImages([
-  staticFile("video-images/20012026-bg.png"),
-  staticFile("video-images/20012026-bride.png"),
-  staticFile("video-images/20012026-butterfly.png"),
-  staticFile("video-images/20012026-couple-walk.png"),
-  staticFile("video-images/20012026-curtain-floral.png"),
-  staticFile("video-images/20012026-floral-left.png"),
-  staticFile("video-images/20012026-floral-right.png"),
-  staticFile("video-images/20012026-groom.png"),
-  staticFile("video-images/20012026-opening-gate.png"),
-  staticFile("video-images/20012026-peacock.png"),
-  staticFile("video-images/20012026-tree-left.png"),
-  staticFile("video-images/20012026-tree-right.png"),
-  staticFile("video-images/20012026-wedding-gate.png"),
-]);
+  const transitionDuration = Math.floor(framesPerPage * 0.25);
+  /* ---------------- PRELOAD IMAGES ---------------- */
+  const imagesToPreload = useMemo(
+    () => [
+      staticFile("video-images/20012026-bg.png"),
+      staticFile("video-images/20012026-bride.png"),
+      staticFile("video-images/20012026-butterfly.png"),
+      staticFile("video-images/20012026-couple-walk.png"),
+      staticFile("video-images/20012026-curtain-floral.png"),
+      staticFile("video-images/20012026-floral-left.png"),
+      staticFile("video-images/20012026-floral-right.png"),
+      staticFile("video-images/20012026-groom.png"),
+      staticFile("video-images/20012026-opening-gate.png"),
+      staticFile("video-images/20012026-peacock.png"),
+      staticFile("video-images/20012026-tree-left.png"),
+      staticFile("video-images/20012026-tree-right.png"),
+      staticFile("video-images/20012026-wedding-gate.png"),
+    ],
+    []
+  );
+  usePreloadImages(imagesToPreload);
+  /* ---------------- RENDER ---------------- */
   return (
-      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }}>
-        {/* 🎵 Background Music */}
-        <Audio
-          src={staticFile("video-images/wedding.mp3")}
-          startFrom={30}
-          endAt={900}
-          volume={0.4}
+    <AbsoluteFill>
+      {/* 🔒 GLOBAL BACKGROUND (never unmounts) */}
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
+      {/* 🎵 MUSIC */}
+      <Audio
+        src={staticFile("video-images/wedding.mp3")}
+        startFrom={30}
+        endAt={900}
+        volume={0.4}
+      />
+      {/* -------- SCENE 1 -------- */}
+      <Sequence from={0} durationInFrames={framesPerPage + 2}>
+        <F20012026_01
+          firstName={firstName}
+          secondName={secondName}
+          welcomeMessage={welcomeMessage}
+          eventDateTime={eventDateTime}
+        />
+      </Sequence>
+      {/* -------- SCENE 2 -------- */}
+      <Sequence from={framesPerPage - 2} durationInFrames={framesPerPage + 2}>
+        <F20012026_02
+          firstName={firstName}
+          secondName={secondName}
+          firstSideNote={firstSideNote}
+          secondSideNote={secondSideNote}
+          invitationMessage={invitationMessage}
+          occasionDate={occasionDate}
+          fadeInDuration={transitionDuration}
+        />
+      </Sequence>
+      {/* ☁️ TRANSITION 1 → 2 */}
+      <Sequence from={framesPerPage - 2} durationInFrames={transitionDuration + 2}>
+        <InkSmokeTransition20012026 />
+      </Sequence>
+      {/* -------- SCENE 3 -------- */}
+      <Sequence from={framesPerPage * 2 - 2} durationInFrames={framesPerPage + 2}>
+        <F20012026_03
+          eventDateTime={eventDateTime}
+          venueName={venueName}
+          venueAddress={venueAddress}
+          familyMember={familyMember}
         />
-       <Sequence from={0} durationInFrames={framesPerPage + 1}>
-          <F20012026_01
-            firstName={firstName}
-            secondName={secondName}
-            welcomeMessage={welcomeMessage}
-            eventDateTime={eventDateTime}
-          />
-        </Sequence>
-       <Sequence from={framesPerPage} durationInFrames={framesPerPage + 1}>
-          <F20012026_02
-            firstName={firstName}
-            secondName={secondName}
-            firstSideNote={firstSideNote}
-            secondSideNote={secondSideNote}
-            invitationMessage={invitationMessage}
-            occasionDate={occasionDate}
-            fadeInDuration={transitionDuration}
-          />
-        </Sequence>
-        {/* ☁️ TRANSITION: SCENE 1 ➜ 2 */}
-           <Sequence from={framesPerPage - 1} durationInFrames={transitionDuration + 2}
-      >
-          <InkSmokeTransition20012026 />
-        </Sequence>
-         <Sequence from={framesPerPage * 2} durationInFrames={framesPerPage + 1}>
-          <F20012026_03
-            eventDateTime={eventDateTime}
-            venueName={venueName}
-            venueAddress={venueAddress}
-            familyMember={familyMember}
-          />
-        </Sequence>
-        {/* ☁️ TRANSITION: SCENE 2 ➜ 3 */}
-        <Sequence from={framesPerPage * 2 - 1} durationInFrames={transitionDuration + 2}>
-          <InkSmokeTransition20012026 />
-        </Sequence>
-      </AbsoluteFill>
+      </Sequence>
+      {/* ☁️ TRANSITION 2 → 3 */}
+      <Sequence from={framesPerPage * 2 - 2} durationInFrames={transitionDuration + 2}>
+        <InkSmokeTransition20012026 />
+      </Sequence>
+    </AbsoluteFill>
   );
 };

package/src/Invitations/hooks/usePreloadImages.js CHANGED Viewed

@@ -12,13 +12,17 @@ export const usePreloadImages = (imageSources) => {
     let cancelled = false;
-    Promise.all(
-      imageSources.map((src) =>
-        prefetch(src)
-          .then(({ waitUntilDone }) => waitUntilDone())
-          .catch(() => null) // never block render
-      )
-    )
+    const promises = imageSources.map((src) => {
+      try {
+        const { waitUntilDone } = prefetch(src);
+        return waitUntilDone();
+      } catch (err) {
+        console.warn("Prefetch failed:", src, err);
+        return Promise.resolve(); // never block render
+      }
+    });
+    Promise.all(promises)
       .then(() => {
         if (!cancelled) {
           continueRender(handle);