@remotion/promo-pages 4.0.485 → 4.0.486

package/dist/Homepage.js

@@ -1091,8 +1091,8 @@ import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
   useContext as useContext32,
-  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo31,
   useRef as useRef23,
   useState as useState16
@@ -1100,7 +1100,7 @@ import {
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -1126,8 +1126,8 @@ import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
   useContext as useContext36,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect11,
+  useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
@@ -1136,13 +1136,13 @@ import React37, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
   useState as useState20
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React39, { useMemo as useMemo37 } from "react";
@@ -1159,9 +1159,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo39,
   useRef as useRef28
 } from "react";
@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.485";
+var VERSION = "4.0.486";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2741,6 +2741,12 @@ var textSchema = {
     default: undefined,
     description: "Color"
   },
+  "style.fontFamily": {
+    type: "font-family",
+    default: undefined,
+    description: "Font family",
+    keyframable: false
+  },
   "style.fontSize": {
     type: "number",
     default: undefined,
@@ -10071,6 +10077,18 @@ var loadImage = ({
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
+var waitForNextFrame = ({
+  onFrame
+}) => {
+  if (typeof requestAnimationFrame === "undefined") {
+    onFrame();
+    return () => {
+      return;
+    };
+  }
+  const frame = requestAnimationFrame(onFrame);
+  return () => cancelAnimationFrame(frame);
+};
 var CanvasImageContent = forwardRef10(({
   src,
   width,
@@ -10100,6 +10118,17 @@ var CanvasImageContent = forwardRef10(({
     overrideId: controls?.overrideId ?? null
   });
   const sequenceContext = useContext32(SequenceContext);
+  const pendingLoadDelayRef = useRef23(null);
+  const continuePendingLoadDelay = useCallback17(() => {
+    const pending = pendingLoadDelayRef.current;
+    if (!pending || pending.continued) {
+      return;
+    }
+    pending.continued = true;
+    pending.unblock();
+    continueRender2(pending.handle);
+    pendingLoadDelayRef.current = null;
+  }, [continueRender2]);
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
@@ -10117,7 +10146,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -10129,17 +10158,13 @@ var CanvasImageContent = forwardRef10(({
     };
     const controller = new AbortController;
     let cancelled = false;
-    let continued = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
-    const continueRenderOnce = () => {
-      if (continued) {
-        return;
-      }
-      continued = true;
-      unblock();
-      continueRender2(handle);
+    pendingLoadDelayRef.current = {
+      handle,
+      unblock,
+      continued: false
     };
     const attemptLoad = () => {
       loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
@@ -10147,13 +10172,9 @@ var CanvasImageContent = forwardRef10(({
           return;
         }
         setLoadedImage(image);
-      }).then(() => {
-        if (!cancelled) {
-          continueRenderOnce();
-        }
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continueRenderOnce();
+          continuePendingLoadDelay();
           return;
         }
         errorCount++;
@@ -10167,7 +10188,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continueRenderOnce();
+          continuePendingLoadDelay();
         } else {
           cancelRender2(err);
         }
@@ -10180,12 +10201,12 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continueRenderOnce();
+      continuePendingLoadDelay();
     };
   }, [
     actualSrc,
     cancelRender2,
-    continueRender2,
+    continuePendingLoadDelay,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
@@ -10196,13 +10217,16 @@ var CanvasImageContent = forwardRef10(({
     sequenceContext?.postmounting,
     sequenceContext?.premounting
   ]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
     const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
     let cancelled = false;
     let continued = false;
+    let cancelWaitForNextFrame = () => {
+      return;
+    };
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -10237,7 +10261,15 @@ var CanvasImageContent = forwardRef10(({
       height: canvasHeight
     }).then((completed) => {
       if (completed && !cancelled) {
-        continueRenderOnce();
+        cancelWaitForNextFrame = waitForNextFrame({
+          onFrame: () => {
+            if (cancelled) {
+              return;
+            }
+            continueRenderOnce();
+            continuePendingLoadDelay();
+          }
+        });
       }
     }).catch((err) => {
       if (cancelled) {
@@ -10246,12 +10278,14 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
+        continuePendingLoadDelay();
       } else {
         cancelRender2(err);
       }
     });
     return () => {
       cancelled = true;
+      cancelWaitForNextFrame();
       continueRenderOnce();
     };
   }, [
@@ -10259,6 +10293,7 @@ var CanvasImageContent = forwardRef10(({
     cancelRender2,
     chainState,
     continueRender2,
+    continuePendingLoadDelay,
     delayRender2,
     fit,
     height,
@@ -10468,7 +10503,7 @@ var ImgContent = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -11364,7 +11399,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -11421,7 +11456,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -11525,7 +11560,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -11700,7 +11735,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11743,7 +11778,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11760,7 +11795,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -12541,7 +12576,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -12585,7 +12620,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12675,7 +12710,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect12(() => {
+    useLayoutEffect13(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -13289,6 +13324,9 @@ var ExpertsPageContent = ({ Link }) => {
     })
   });
 };
+// src/components/homepage/Pricing.tsx
+import { useMemo as useMemo53 } from "react";
+
 // ../design/dist/esm/index.mjs
 import * as React23 from "react";
 import * as React8 from "react";
@@ -14635,7 +14673,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect22, useMemo as useMemo43, useState as useState21 } from "react";
+import React32, { useEffect as useEffect21, useMemo as useMemo43, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -16741,6 +16779,94 @@ var getBoundingBox = (d) => {
   const unarced = removeATSHVQInstructions(normalizeInstructions(parsed));
   return getBoundingBoxFromInstructions(unarced);
 };
+var translateSegments = (segments, x, y) => {
+  return segments.map((segment) => {
+    if (segment.type === "a" || segment.type === "c" || segment.type === "v" || segment.type === "s" || segment.type === "h" || segment.type === "l" || segment.type === "m" || segment.type === "q" || segment.type === "t") {
+      return segment;
+    }
+    if (segment.type === "V") {
+      return {
+        type: "V",
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "H") {
+      return {
+        type: "H",
+        x: segment.x + x
+      };
+    }
+    if (segment.type === "A") {
+      return {
+        type: "A",
+        rx: segment.rx,
+        ry: segment.ry,
+        largeArcFlag: segment.largeArcFlag,
+        sweepFlag: segment.sweepFlag,
+        xAxisRotation: segment.xAxisRotation,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "Z") {
+      return segment;
+    }
+    if (segment.type === "C") {
+      return {
+        type: "C",
+        cp1x: segment.cp1x + x,
+        cp1y: segment.cp1y + y,
+        cp2x: segment.cp2x + x,
+        cp2y: segment.cp2y + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "Q") {
+      return {
+        type: "Q",
+        cpx: segment.cpx + x,
+        cpy: segment.cpy + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "S") {
+      return {
+        type: "S",
+        cpx: segment.cpx + x,
+        cpy: segment.cpy + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "T") {
+      return {
+        type: "T",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "L") {
+      return {
+        type: "L",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "M") {
+      return {
+        type: "M",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    throw new Error(`Unknown segment type: ${segment.type}`);
+  });
+};
+var translatePath = (path, x, y) => {
+  return serializeInstructions(translateSegments(parsePath(path), x, y));
+};
 var mod = (x, m) => {
   return (x % m + m) % m;
 };
@@ -17302,94 +17428,6 @@ var getLength = (path) => {
   const constructucted = construct(path);
   return constructucted.totalLength;
 };
-var translateSegments = (segments, x, y) => {
-  return segments.map((segment) => {
-    if (segment.type === "a" || segment.type === "c" || segment.type === "v" || segment.type === "s" || segment.type === "h" || segment.type === "l" || segment.type === "m" || segment.type === "q" || segment.type === "t") {
-      return segment;
-    }
-    if (segment.type === "V") {
-      return {
-        type: "V",
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "H") {
-      return {
-        type: "H",
-        x: segment.x + x
-      };
-    }
-    if (segment.type === "A") {
-      return {
-        type: "A",
-        rx: segment.rx,
-        ry: segment.ry,
-        largeArcFlag: segment.largeArcFlag,
-        sweepFlag: segment.sweepFlag,
-        xAxisRotation: segment.xAxisRotation,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "Z") {
-      return segment;
-    }
-    if (segment.type === "C") {
-      return {
-        type: "C",
-        cp1x: segment.cp1x + x,
-        cp1y: segment.cp1y + y,
-        cp2x: segment.cp2x + x,
-        cp2y: segment.cp2y + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "Q") {
-      return {
-        type: "Q",
-        cpx: segment.cpx + x,
-        cpy: segment.cpy + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "S") {
-      return {
-        type: "S",
-        cpx: segment.cpx + x,
-        cpy: segment.cpy + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "T") {
-      return {
-        type: "T",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "L") {
-      return {
-        type: "L",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "M") {
-      return {
-        type: "M",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    throw new Error(`Unknown segment type: ${segment.type}`);
-  });
-};
-var translatePath = (path, x, y) => {
-  return serializeInstructions(translateSegments(parsePath(path), x, y));
-};
 var resetPath = (d) => {
   const box = getBoundingBox(d);
   return translatePath(d, -box.x1, -box.y1);
@@ -20325,7 +20363,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef31 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef31 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -20580,7 +20618,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo43(() => new EventTarget, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -20727,7 +20765,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect22(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -20848,7 +20886,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef31([]);
-  useEffect23(() => {
+  useEffect22(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {
@@ -28914,7 +28952,10 @@ var CompanyPricing = () => {
 
 // src/components/homepage/Pricing.tsx
 import { jsx as jsx50, jsxs as jsxs9 } from "react/jsx-runtime";
-var Pricing = () => {
+var Pricing = ({ faqHref = "/docs/pricing#faq" }) => {
+  const faqLinkTarget = useMemo53(() => {
+    return faqHref.startsWith("http") ? "_blank" : undefined;
+  }, [faqHref]);
   return /* @__PURE__ */ jsxs9("div", {
     style: {
       display: "flex",
@@ -28939,9 +28980,9 @@ var Pricing = () => {
             "See our",
             " ",
             /* @__PURE__ */ jsx50("a", {
-              target: "_blank",
+              target: faqLinkTarget,
               className: "bluelink",
-              href: "https://remotion.pro/faq",
+              href: faqHref,
               children: "FAQ"
             }),
             " ",
@@ -29312,7 +29353,7 @@ var AutomationsSection = () => {
 var AutomationsSection_default = AutomationsSection;
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect40 } from "react";
 import { jsx as jsx56, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -29338,7 +29379,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect41(() => {
+  useEffect40(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -29551,7 +29592,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "51K",
+            content: "52K",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29729,16 +29770,16 @@ var CommunityStats_default = CommunityStats;
 import { createContext as createContext32 } from "react";
 import { jsx as jsx59, jsxs as jsxs14, Fragment as Fragment12 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment23 } from "react/jsx-runtime";
-import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect42, useState as useState38 } from "react";
-import { useContext as useContext46, useLayoutEffect as useLayoutEffect17 } from "react";
+import React57 from "react";
+import { useContext as useContext210, useEffect as useEffect41, useState as useState38 } from "react";
+import { useContext as useContext46, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext47, useEffect as useEffect52, useRef as useRef47 } from "react";
 import { useEffect as useEffect310, useRef as useRef212 } from "react";
-import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo53, useRef as useRef48, useState as useState39 } from "react";
-import { useEffect as useEffect43, useRef as useRef310 } from "react";
+import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo54, useRef as useRef48, useState as useState39 } from "react";
+import { useEffect as useEffect42, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
@@ -29770,7 +29811,7 @@ import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52
 import React54, { useCallback as useCallback310, useMemo as useMemo310, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo54, useState as useState82 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo55, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
 import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
@@ -31675,8 +31716,8 @@ var calculateOuter = ({
     overflow: overflowVisible ? "visible" : "hidden"
   };
 };
-var PlayerEventEmitterContext = React56.createContext(undefined);
-var ThumbnailEmitterContext = React56.createContext(undefined);
+var PlayerEventEmitterContext = React57.createContext(undefined);
+var ThumbnailEmitterContext = React57.createContext(undefined);
 
 class PlayerEmitter {
   listeners = {
@@ -31794,7 +31835,7 @@ var useBufferStateEmitter = (emitter) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -31815,7 +31856,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect42(() => {
+  useEffect41(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -32004,7 +32045,7 @@ var usePlayer = () => {
   const isBuffering = useCallback39(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo53(() => {
+  const returnValue = useMemo54(() => {
     return {
       frameBack,
       frameForward,
@@ -32190,7 +32231,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef310(getIsBackgrounded());
-  useEffect43(() => {
+  useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -32981,7 +33022,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo54(() => {
+  const actualStyle = useMemo55(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -33048,7 +33089,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo54(() => {
+  const playbackPopup = useMemo55(() => {
     return {
       position: "absolute",
       right: 0,
@@ -34966,8 +35007,8 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback55,
-  useEffect as useEffect58,
-  useMemo as useMemo67,
+  useEffect as useEffect57,
+  useMemo as useMemo68,
   useRef as useRef59,
   useState as useState56
 } from "react";
@@ -35718,15 +35759,15 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React57, { useContext as useContext48, useMemo as useMemo55 } from "react";
+import React58, { useContext as useContext48, useMemo as useMemo56 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
-var Context = React57.createContext(undefined);
+var Context = React58.createContext(undefined);
 var ColorModeProvider = ({
   children,
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo55(() => {
+  const value = useMemo56(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx60(Context.Provider, {
@@ -35744,14 +35785,14 @@ function useColorMode() {
 
 // ../media/dist/esm/index.mjs
 import { useMemo as useMemo312, useState as useState311 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo57, useRef as useRef50, useState as useState40 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState40 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import {
   AudioBufferSink,
   InputDisposedError
 } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext50, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext50, useLayoutEffect as useLayoutEffect19 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
 import React211 from "react";
@@ -35781,7 +35822,7 @@ import { jsx as jsx412 } from "react/jsx-runtime";
 import {
   useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
-  useMemo as useMemo56,
+  useMemo as useMemo57,
   useRef as useRef312,
   useState as useState53
 } from "react";
@@ -37808,7 +37849,7 @@ var useCommonEffects = ({
   label: label3
 }) => {
   const sharedAudioContext = useContext50(Internals.SharedAudioContext);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
       return;
@@ -37825,7 +37866,7 @@ var useCommonEffects = ({
     frame,
     mediaPlayerRef
   ]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     if (!sharedAudioContext)
       return;
     const { remove } = sharedAudioContext.audioSyncAnchorEmitter.subscribe((event) => {
@@ -37837,90 +37878,90 @@ var useCommonEffects = ({
       remove();
     };
   }, [sharedAudioContext, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
   }, [trimBefore, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
   }, [trimAfter, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
     mediaPlayer.setMuted(effectiveMuted);
   }, [effectiveMuted, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setVolume(userPreferredVolume);
   }, [userPreferredVolume, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setPlaybackRate(playbackRate, currentTimeRef.current);
   }, [playbackRate, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate, currentTimeRef.current);
   }, [globalPlaybackRate, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setLoop(loop, currentTimeRef.current);
   }, [loop, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setSequenceDurationInFrames(durationInFrames, currentTimeRef.current);
   }, [durationInFrames, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer) {
       return;
     }
     mediaPlayer.setIsPremounting(isPremounting);
   }, [isPremounting, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer) {
       return;
     }
     mediaPlayer.setIsPostmounting(isPostmounting);
   }, [isPostmounting, mediaPlayerReady, mediaPlayerRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setFps(fps, currentTimeRef.current);
   }, [fps, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setSequenceOffset(sequenceOffset, currentTimeRef.current);
   }, [sequenceOffset, mediaPlayerReady, mediaPlayerRef, currentTimeRef]);
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
@@ -38034,7 +38075,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect44(() => {
+  useEffect43(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -38224,7 +38265,7 @@ var AudioForPreview2 = ({
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo57(() => {
+  const showShow = useMemo58(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -40874,7 +40915,7 @@ var VideoForRendering2 = ({
   const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const sequenceContext = useContext53(Internals.SequenceContext);
-  const id = useMemo56(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo57(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -41087,10 +41128,10 @@ var VideoForRendering2 = ({
     initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo56(() => {
+  const classNameValue = useMemo57(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
-  const styleWithObjectFit = useMemo56(() => {
+  const styleWithObjectFit = useMemo57(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -41444,13 +41485,13 @@ var Video = Interactive.withSchema({
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback47, useEffect as useEffect50, useMemo as useMemo60, useState as useState48 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo61, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
   useCallback as useCallback46,
-  useEffect as useEffect49,
+  useEffect as useEffect48,
   useRef as useRef56,
   useState as useState47
 } from "react";
@@ -41818,14 +41859,14 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 import {
   forwardRef as forwardRef38,
   useCallback as useCallback45,
-  useEffect as useEffect48,
+  useEffect as useEffect47,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef55
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect46, useRef as useRef53, useState as useState44 } from "react";
+import { useEffect as useEffect45, useRef as useRef53, useState as useState44 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -41901,14 +41942,14 @@ var Lottie = ({
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
-  useEffect46(() => {
+  useEffect45(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect46(() => {
+  useEffect45(() => {
     if (!containerRef.current) {
       return;
     }
@@ -41953,17 +41994,17 @@ var Lottie = ({
     renderer,
     continueRender
   ]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect46(() => {
+  useEffect45(() => {
     if (!animationRef.current) {
       return;
     }
@@ -41996,14 +42037,14 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect47, useMemo as useMemo58, useState as useState46 } from "react";
+import { useEffect as useEffect46, useMemo as useMemo59, useState as useState46 } from "react";
 import { jsx as jsx71 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
   const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
-  const src = useMemo58(() => {
+  const src = useMemo59(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -42016,7 +42057,7 @@ var DisplayedEmoji = ({ emoji }) => {
     throw new Error("Unknown emoji");
   }, [emoji]);
   const [handle] = useState46(() => delayRender2("Loading emojis!"));
-  useEffect47(() => {
+  useEffect46(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
         duration: getLottieMetadata(json)?.durationInSeconds,
@@ -42027,7 +42068,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender2(err);
     });
   }, [handle, src, continueRender, cancelRender2]);
-  useEffect47(() => {
+  useEffect46(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -42123,7 +42164,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -42140,7 +42181,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -42430,7 +42471,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/TrendingRepos.tsx
-import { useMemo as useMemo59 } from "react";
+import { useMemo as useMemo60 } from "react";
 import { jsx as jsx81, jsxs as jsxs25 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
@@ -42443,7 +42484,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo59(() => {
+  const item = useMemo60(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -42555,7 +42596,7 @@ var Cards = ({
   const positions = useRef56(getInitialPositions());
   const shouldBePositions = useRef56(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -42650,7 +42691,7 @@ var HomepageVideoComp = ({
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo60(() => {
+  const emoji = useMemo61(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -42659,7 +42700,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo60(() => {
+  const audioSrc = useMemo61(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -42668,7 +42709,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect50(() => {
+  useEffect49(() => {
     const a2 = prefetch(fireAudio);
     const b2 = prefetch(partyHornAudio);
     const c2 = prefetch(sadAudio);
@@ -42744,7 +42785,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.485";
+var VERSION2 = "4.0.486";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -46488,10 +46529,7 @@ var getDefaultTextDecorationThickness = (fontSizePx) => {
   return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
 };
 var getTextDecorationStyle = (style2) => {
-  if (style2 === "wavy") {
-    return null;
-  }
-  if (style2 === "double" || style2 === "dotted" || style2 === "dashed") {
+  if (style2 === "double" || style2 === "dotted" || style2 === "dashed" || style2 === "wavy") {
     return style2;
   }
   return "solid";
@@ -46501,9 +46539,6 @@ var parseTextDecoration = ({
   style: style2
 }) => {
   const textDecorationStyle = getTextDecorationStyle(style2.getPropertyValue("text-decoration-style").trim());
-  if (textDecorationStyle === null) {
-    return null;
-  }
   const textDecorationLine = style2.getPropertyValue("text-decoration-line");
   const lineParts = textDecorationLine.split(/\s+/);
   const lines2 = textDecorationLines.filter((line) => lineParts.includes(line));
@@ -46577,6 +46612,34 @@ var getTextDecorationLineDashPattern = (style2, thickness) => {
   }
   return [];
 };
+var drawWavyTextDecorationLine = ({
+  contextToDraw,
+  endX,
+  lineY,
+  startX,
+  thickness
+}) => {
+  const step = Math.max(2, thickness);
+  const amplitude = step;
+  const halfWavelength = step * 2;
+  const wavelength = halfWavelength * 2;
+  const phaseStartX = Math.floor(startX / wavelength) * wavelength;
+  contextToDraw.save();
+  contextToDraw.beginPath();
+  contextToDraw.rect(startX, lineY - amplitude - thickness, endX - startX, (amplitude + thickness) * 2);
+  contextToDraw.clip();
+  contextToDraw.beginPath();
+  contextToDraw.moveTo(phaseStartX, lineY);
+  let x = phaseStartX;
+  let direction = 1;
+  while (x < endX) {
+    contextToDraw.quadraticCurveTo(x + halfWavelength / 2, lineY + direction * amplitude * 2, x + halfWavelength, lineY);
+    x += halfWavelength;
+    direction = -direction;
+  }
+  contextToDraw.stroke();
+  contextToDraw.restore();
+};
 var strokeTextDecorationLine = ({
   contextToDraw,
   endX,
@@ -46618,6 +46681,17 @@ var drawTextDecoration = ({
         thickness: textDecoration.thickness,
         fontSizePx
       });
+      if (textDecoration.style === "wavy") {
+        contextToDraw.setLineDash([]);
+        drawWavyTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY,
+          startX,
+          thickness: textDecoration.thickness
+        });
+        continue;
+      }
       if (textDecoration.style === "double") {
         contextToDraw.setLineDash([]);
         strokeTextDecorationLine({
@@ -47564,7 +47638,7 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React69, { useCallback as useCallback48 } from "react";
+import React70, { useCallback as useCallback48 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -47670,7 +47744,7 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo61 } from "react";
+import { useMemo as useMemo64 } from "react";
 import { jsx as jsx97, jsxs as jsxs30, Fragment as Fragment15 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
@@ -47678,7 +47752,7 @@ var className2 = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
 var translated3 = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
 var Spinner2 = ({ size: size4, duration }) => {
-  const style2 = useMemo61(() => {
+  const style2 = useMemo64(() => {
     return {
       width: size4,
       height: size4
@@ -47762,7 +47836,7 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError, playerRef }) => {
-  const [state, setState] = React69.useState({
+  const [state, setState] = React70.useState({
     type: "idle"
   });
   const triggerRender = useCallback48(async () => {
@@ -47940,13 +48014,13 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback50, useEffect as useEffect53, useMemo as useMemo66, useRef as useRef57, useState as useState51 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect51, useMemo as useMemo67, useRef as useRef57, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback49, useEffect as useEffect51, useMemo as useMemo64, useState as useState50 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect50, useMemo as useMemo66, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
-  const observer = useMemo64(() => {
+  const observer = useMemo66(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -47967,7 +48041,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect51(() => {
+  useEffect50(() => {
     updateSize();
     if (!observer) {
       return;
@@ -48023,7 +48097,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState51(false);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -48074,7 +48148,7 @@ var PlayerSeekBar2 = ({
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
   const [frame, setFrame] = useState51(0);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48087,7 +48161,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48148,7 +48222,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect53(() => {
+  useEffect51(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -48160,7 +48234,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo66(() => {
+  const knobStyle = useMemo67(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -48174,7 +48248,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo66(() => {
+  const fillStyle = useMemo67(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -48183,7 +48257,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo66(() => {
+  const active = useMemo67(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -48218,7 +48292,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback51, useEffect as useEffect55, useRef as useRef58, useState as useState54 } from "react";
+import { useCallback as useCallback51, useEffect as useEffect53, useRef as useRef58, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx105 } from "react/jsx-runtime";
@@ -48279,7 +48353,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef58(null);
-  useEffect55(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48292,7 +48366,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect55(() => {
+  useEffect53(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -48337,7 +48411,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React73, { useCallback as useCallback53, useEffect as useEffect56 } from "react";
+import React75, { useCallback as useCallback53, useEffect as useEffect55 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -48354,8 +48428,8 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React73.useState(true);
-  useEffect56(() => {
+  const [playing, setPlaying] = React75.useState(true);
+  useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48392,7 +48466,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React75, { useEffect as useEffect57 } from "react";
+import React76, { useEffect as useEffect56 } from "react";
 import { jsx as jsx109 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -48400,8 +48474,8 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React75.useState(0);
-  useEffect57(() => {
+  const [time, setTime] = React76.useState(0);
+  useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -48479,7 +48553,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React76 from "react";
+import React77 from "react";
 import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
@@ -48502,7 +48576,7 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React76.useCallback((e) => {
+  const toggleTheme = React77.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
@@ -48573,7 +48647,7 @@ var Demo = () => {
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
   const [error2, setError] = useState56(false);
-  useEffect58(() => {
+  useEffect57(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -48581,7 +48655,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect58(() => {
+  useEffect57(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -48597,7 +48671,7 @@ var Demo = () => {
   const updateCardOrder = useCallback55((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo67(() => {
+  const props = useMemo68(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -48684,7 +48758,7 @@ var Demo = () => {
 };
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect59, useState as useState57 } from "react";
+import { useEffect as useEffect58, useState as useState57 } from "react";
 
 // src/components/homepage/layout/Button.tsx
 import { jsx as jsx117 } from "react/jsx-runtime";
@@ -48729,7 +48803,7 @@ var BlueButton = (props) => {
 import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState57([]);
-  useEffect59(() => {
+  useEffect58(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -48826,7 +48900,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect60, useState as useState58 } from "react";
+import { useEffect as useEffect59, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -48842,7 +48916,7 @@ var icon3 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState58("/img/compose.webm");
-  useEffect60(() => {
+  useEffect59(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -48989,7 +49063,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect61, useRef as useRef60, useState as useState60 } from "react";
+import { useEffect as useEffect60, useRef as useRef60, useState as useState60 } from "react";
 import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -48998,7 +49072,7 @@ var icon4 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef60(null);
   const [vid, setVid] = useState60("/img/editing-vp9-chrome.webm");
-  useEffect61(() => {
+  useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -49112,7 +49186,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect63, useRef as useRef61, useState as useState61 } from "react";
+import { useEffect as useEffect61, useRef as useRef61, useState as useState61 } from "react";
 import { jsx as jsx125, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon5 = {
   height: 16,
@@ -49122,12 +49196,12 @@ var RealMP4Videos = () => {
   const ref = useRef61(null);
   const videoRef = useRef61(null);
   const [vid, setVid] = useState61("/img/render-progress.webm");
-  useEffect63(() => {
+  useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect63(() => {
+  useEffect61(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -49377,16 +49451,16 @@ import { useRef as useRef66, useState as useState66 } from "react";
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef41, useEffect as useEffect66, useImperativeHandle as useImperativeHandle15, useRef as useRef65 } from "react";
+import { forwardRef as forwardRef41, useEffect as useEffect65, useImperativeHandle as useImperativeHandle15, useRef as useRef65 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef40, useCallback as useCallback57, useEffect as useEffect65, useRef as useRef63, useState as useState64 } from "react";
+import { forwardRef as forwardRef40, useCallback as useCallback57, useEffect as useEffect63, useRef as useRef63, useState as useState64 } from "react";
 import { jsx as jsx128 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef63(null);
-  useEffect65(() => {
+  useEffect63(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -49415,12 +49489,12 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect65(() => {
+  useEffect63(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect65(() => {
+  useEffect63(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -49463,7 +49537,7 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect65(() => {
+  useEffect63(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -49490,7 +49564,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef65(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle15(ref, () => videoRef.current, []);
-  useEffect66(() => {
+  useEffect65(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -51121,7 +51195,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx167("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "51k"
+        children: "52k"
       })
     ]
   });