@remotion/promo-pages 4.0.456 → 4.0.458

package/dist/Homepage.js

@@ -45,6 +45,10 @@ var experts = [
     linkedin: "in/sterv/",
     email: "stephen@middy.com",
     videocall: null,
+    discord: {
+      username: "stervdotcom",
+      userId: "613828260534550719"
+    },
     since: new Date("2022-08-15").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -69,6 +73,10 @@ var experts = [
     linkedin: "in/just-moh-it/",
     email: "yo@mohitya.dev",
     videocall: null,
+    discord: {
+      username: "justmohit",
+      userId: "616199379530940426"
+    },
     since: new Date("2022-08-15").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -95,6 +103,10 @@ var experts = [
     linkedin: "in/satelllte/",
     email: "lunaerxs@gmail.com",
     videocall: null,
+    discord: {
+      username: "satelllte",
+      userId: "564382615105306634"
+    },
     since: new Date("2022-09-16").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -124,6 +136,10 @@ var experts = [
     linkedin: null,
     email: "ben@captok.ai",
     videocall: null,
+    discord: {
+      username: "ben201000",
+      userId: "833862694372245515"
+    },
     since: new Date("2022-11-03").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -151,6 +167,7 @@ var experts = [
     since: new Date("2022-08-22").getTime(),
     email: "karel@asius.ai",
     videocall: null,
+    discord: null,
     description: /* @__PURE__ */ jsxs("div", {
       children: [
         "I have created Remotion videos for many companies and helped them with deployment, some examples are visible",
@@ -184,6 +201,10 @@ var experts = [
     linkedin: "in/alex-f-17a5bb56/",
     email: "alex.frndz@gmail.com",
     videocall: "https://cal.com/remotion-expert-alex-fernandez",
+    discord: {
+      username: "alex12345670000",
+      userId: "1046357837976182894"
+    },
     since: new Date("2022-12-02").getTime(),
     description: /* @__PURE__ */ jsx("div", {
       children: "I am an experienced integration developer using Mulesoft, a backend developer and on the side frontend and animation enthusiast."
@@ -199,6 +220,10 @@ var experts = [
     linkedin: "in/matthew-mcgillivray-68295a55",
     email: "mm@mattm9y.com",
     videocall: "https://cal.com/remotion-expert-matt-mcgillivray",
+    discord: {
+      username: "umungobungo",
+      userId: "225141342894948352"
+    },
     since: new Date("2023-01-30").getTime(),
     description: /* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsxs("p", {
@@ -263,6 +288,10 @@ var experts = [
     linkedin: "in/raymond-lotmar/",
     email: "ray@blocklab.ch",
     videocall: "https://cal.com/remotion-expert-ray-lotmar",
+    discord: {
+      username: "ray_block",
+      userId: "402806969980944384"
+    },
     since: new Date("2023-01-30").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -293,6 +322,10 @@ var experts = [
     linkedin: "in/lorenzobertolini/",
     email: "ciao@lorenzobertolini.com",
     videocall: null,
+    discord: {
+      username: "lorenzobertolini",
+      userId: "933408520789950516"
+    },
     since: new Date("2023-03-14").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -333,6 +366,10 @@ var experts = [
     linkedin: "in/antoine-caron-slash/",
     email: "antoine395.caron+remotion@gmail.com",
     videocall: null,
+    discord: {
+      username: "antoinecaron.",
+      userId: "199566011849113600"
+    },
     since: new Date("2023-03-17").getTime(),
     description: /* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsxs("p", {
@@ -359,6 +396,10 @@ var experts = [
     linkedin: "in/mickaelalves/",
     email: "alves.mckl@gmail.com",
     videocall: null,
+    discord: {
+      username: "cruuzazul",
+      userId: "455697698050277378"
+    },
     since: new Date("2023-03-17").getTime(),
     description: /* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsxs("p", {
@@ -385,6 +426,10 @@ var experts = [
     linkedin: "in/pranavk7/",
     email: "hey@pranava.dev",
     videocall: null,
+    discord: {
+      username: "thecmdrunner",
+      userId: "768013898385063936"
+    },
     since: new Date("2023-07-03").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -419,6 +464,10 @@ var experts = [
     linkedin: "in/rahulbansalrb/",
     email: "bansalrahul14@gmail.com",
     videocall: "https://cal.com/remotion-expert-rahul-bansal",
+    discord: {
+      username: "raxrb",
+      userId: "564805165211713536"
+    },
     since: new Date("2023-08-04").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -438,12 +487,16 @@ var experts = [
     slug: "pramod-kumar",
     name: "Pramod Kumar",
     image: "/img/freelancers/pramod.jpg",
-    website: "https://www.pramod73.in/",
+    website: null,
     x: "pramodk73",
     github: "pskd73",
     linkedin: "in/pramod-kumar-1a135b74/",
     email: "pramodkumar.damam73@gmail.com",
     videocall: "https://cal.com/remotion-expert-pramod-kumar",
+    discord: {
+      username: "pskd73",
+      userId: "517057574483525655"
+    },
     since: new Date("2024-03-10").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -473,7 +526,14 @@ var experts = [
           children: "remotion-animate-text"
         }),
         " ",
-        "for Remotion to animate text. I build products in public on X. I love helping the community. Feel free to reach out. Looking forward!"
+        "for Remotion to animate text. I build products in public on X and currently building",
+        " ",
+        /* @__PURE__ */ jsx("a", {
+          target: "_blank",
+          href: "https://crawlchat.app",
+          children: "CrawlChat"
+        }),
+        ". I love helping the community. Feel free to reach out. Looking forward!"
       ]
     })
   },
@@ -487,6 +547,10 @@ var experts = [
     linkedin: "in/ayushsoni1001/",
     email: "hi@ayushsoni.com",
     videocall: "https://cal.com/remotion-expert-ayush-soni",
+    discord: {
+      username: "ayushsoni",
+      userId: "624968675916513310"
+    },
     since: new Date("2024-03-17").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -518,6 +582,10 @@ var experts = [
     linkedin: "in/andrei-terteci-935331151/",
     email: "hello@andreiterteci.com",
     videocall: "https://cal.com/remotion-expert-andrei-terteci",
+    discord: {
+      username: "andreiterteci",
+      userId: "710924274361172078"
+    },
     since: new Date("2024-03-17").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -549,6 +617,10 @@ var experts = [
     linkedin: "in/sambowenhughes/",
     email: "sam@reactvideoeditor.com",
     videocall: "https://calendly.com/reactvideoeditor/30min",
+    discord: {
+      username: ".samelliott",
+      userId: "862593906972688385"
+    },
     since: new Date("2025-06-03").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -634,6 +706,10 @@ var experts = [
     email: "shankhadeepdey99@gmail.com",
     slug: "iamshankhadeep",
     videocall: "https://cal.com/iamshankhadeep",
+    discord: {
+      username: "iamshankhadeep",
+      userId: "441576588937527306"
+    },
     since: new Date("2021-02-13").getTime(),
     description: /* @__PURE__ */ jsx("div", {
       children: "I created @remotion/player and @remotion/lambda with Jonny. I have 5+ years of experience in building products using Remotion, React, Next.js, and Typescript. I have worked in companies like Camcorder and early-stage startups like a funnel builder marketplace. I can build products super fast from scratch. Looking forward to helping you."
@@ -649,6 +725,10 @@ var experts = [
     linkedin: "in/amirtadrisi/",
     email: "amir@cubite.io",
     videocall: null,
+    discord: {
+      username: "aioppsos1565",
+      userId: "709545234882756711"
+    },
     since: new Date("2025-01-01").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -718,6 +798,10 @@ var experts = [
     linkedin: "in/pablito-jean-pool-silva-inca-735a03192/",
     email: "pablito.silvainca@gmail.com",
     videocall: null,
+    discord: {
+      username: "pablituuu",
+      userId: "513743221109555206"
+    },
     since: new Date("2026-02-13").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -744,6 +828,10 @@ var experts = [
     linkedin: "in/haingt-dev/",
     email: "hai@haingt.dev",
     videocall: null,
+    discord: {
+      username: "haingt.dev",
+      userId: "384392709902827522"
+    },
     since: new Date("2026-04-02").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -771,6 +859,10 @@ var experts = [
     linkedin: "in/ashok-reddy-kakumanu-8a3078247/",
     email: "ashok17748@gmail.com",
     videocall: null,
+    discord: {
+      username: ".8gates",
+      userId: "668293302767845376"
+    },
     since: new Date("2026-04-30").getTime(),
     description: /* @__PURE__ */ jsxs("div", {
       children: [
@@ -786,10 +878,40 @@ var experts = [
         "Available for hourly and project/milestone-based engagements."
       ]
     })
+  },
+  {
+    slug: "huang-chi-chang",
+    name: "Huang Chi Chang",
+    image: "/img/freelancers/huang-chi-chang.jpg",
+    website: "https://swift-clip.vercel.app/",
+    x: null,
+    github: "zz41354899",
+    linkedin: null,
+    email: "zz41354899@gmail.com",
+    videocall: null,
+    discord: {
+      username: "Nocts",
+      userId: "444852671191580672"
+    },
+    since: new Date("2026-05-05").getTime(),
+    description: /* @__PURE__ */ jsxs("div", {
+      children: [
+        "I'm a Product Designer and Indie Hacker based in Taiwan. I specialize in using Remotion to automate video production, building dynamic templates and automated rendering pipelines.",
+        /* @__PURE__ */ jsx("br", {}),
+        "My project,",
+        " ",
+        /* @__PURE__ */ jsx("a", {
+          target: "_blank",
+          href: "https://swift-clip.vercel.app/",
+          children: "SwiftClip"
+        }),
+        ", is a tool designed to streamline professional video creation through programmatic workflows."
+      ]
+    })
   }
 ];
 // src/components/experts/ExpertsPage.tsx
-import { useMemo as useMemo39 } from "react";
+import { useMemo as useMemo38 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
@@ -834,11 +956,11 @@ import { jsx as jsx8 } from "react/jsx-runtime";
 import { useEffect as useEffect3, useMemo as useMemo10, useRef as useRef4 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef2,
-  useContext as useContext15,
+  forwardRef as forwardRef3,
+  useContext as useContext16,
   useEffect as useEffect5,
-  useMemo as useMemo15,
-  useState as useState5
+  useMemo as useMemo16,
+  useState as useState6
 } from "react";
 import { useRef as useRef5 } from "react";
 import { useContext as useContext14, useMemo as useMemo13 } from "react";
@@ -848,104 +970,105 @@ import { jsx as jsx10 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
 import React12, { useCallback as useCallback5, useMemo as useMemo14, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
+import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext15, useMemo as useMemo15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef3,
+  forwardRef as forwardRef4,
   useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef8,
-  useState as useState6
+  useState as useState7
 } from "react";
-import React14, { useCallback as useCallback6, useImperativeHandle, useRef as useRef7 } from "react";
+import React15, { useCallback as useCallback6, useImperativeHandle, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
+  createContext as createContext15,
   forwardRef as forwardRef5,
   useCallback as useCallback7,
+  useContext as useContext17,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo18,
+  useMemo as useMemo17,
   useRef as useRef9,
   useState as useState8
 } from "react";
-import React15, { forwardRef as forwardRef4, useMemo as useMemo17 } from "react";
-import { useContext as useContext16, useMemo as useMemo16, useState as useState7 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
+import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
-  createContext as createContext15,
+  createContext as createContext16,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo19,
+  useMemo as useMemo18,
   useRef as useRef10,
   useState as useState9
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext29 } from "react";
-import React17, { createContext as createContext16, useMemo as useMemo20 } from "react";
+import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
+import React17, { createContext as createContext17, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import { useContext as useContext18 } from "react";
-import { createContext as createContext17, useEffect as useEffect7, useState as useState11 } from "react";
+import { useContext as useContext19 } from "react";
+import { createContext as createContext18, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext18, useMemo as useMemo21, useReducer } from "react";
+import { createContext as createContext19, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
-  useContext as useContext27,
-  useEffect as useEffect14,
+  useContext as useContext28,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo29,
+  useMemo as useMemo28,
   useRef as useRef18,
   useState as useState16
 } from "react";
-import { useContext as useContext20, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
+import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
-  createContext as createContext19,
+  createContext as createContext20,
   createRef as createRef2,
   useCallback as useCallback9,
-  useContext as useContext19,
-  useMemo as useMemo23,
+  useContext as useContext20,
+  useMemo as useMemo22,
   useRef as useRef11,
   useState as useState12
 } from "react";
-import { useMemo as useMemo22 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo21 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext22, useEffect as useEffect8, useMemo as useMemo24, useState as useState13 } from "react";
-import { useContext as useContext21 } from "react";
+import { useContext as useContext23, useEffect as useEffect9, useMemo as useMemo23, useState as useState13 } from "react";
+import { useContext as useContext22 } from "react";
 import {
   useCallback as useCallback12,
-  useContext as useContext25,
-  useEffect as useEffect12,
+  useContext as useContext26,
+  useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo27, useRef as useRef15 } from "react";
-import { useContext as useContext24, useMemo as useMemo26 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef15 } from "react";
+import { useContext as useContext25, useMemo as useMemo25 } from "react";
 import React21, {
   useCallback as useCallback10,
-  useContext as useContext23,
-  useEffect as useEffect9,
+  useContext as useContext24,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo25,
+  useMemo as useMemo24,
   useRef as useRef14,
   useState as useState14
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import React22 from "react";
-import { useEffect as useEffect10, useState as useState15 } from "react";
-import { useEffect as useEffect11, useRef as useRef16 } from "react";
-import { useEffect as useEffect13 } from "react";
-import { createContext as createContext20, useContext as useContext26, useMemo as useMemo28 } from "react";
+import { useEffect as useEffect11, useState as useState15 } from "react";
+import { useEffect as useEffect12, useRef as useRef16 } from "react";
+import { useEffect as useEffect14 } from "react";
+import { createContext as createContext21, useContext as useContext27, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
-  useContext as useContext28,
-  useEffect as useEffect15,
+  useContext as useContext29,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo30,
+  useMemo as useMemo29,
   useRef as useRef19
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -954,7 +1077,7 @@ import { forwardRef as forwardRef9, useCallback as useCallback14, useState as us
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   useCallback as useCallback15,
-  useContext as useContext30,
+  useContext as useContext31,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef20,
@@ -966,57 +1089,57 @@ import React28 from "react";
 import {
   useCallback as useCallback16,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo31,
+  useMemo as useMemo30,
   useRef as useRef21,
   useState as useState19
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
-import { useMemo as useMemo33 } from "react";
-import { createContext as createContext21, useContext as useContext31, useMemo as useMemo32 } from "react";
+import { useMemo as useMemo32 } from "react";
+import { createContext as createContext22, useContext as useContext32, useMemo as useMemo31 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
-import React32, { createContext as createContext22 } from "react";
-import { useContext as useContext32 } from "react";
+import React32, { createContext as createContext23 } from "react";
+import { useContext as useContext33 } from "react";
 import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
-  useContext as useContext33,
-  useEffect as useEffect16,
+  useContext as useContext34,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo34,
+  useMemo as useMemo33,
   useState as useState20
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
-  useContext as useContext34,
-  useEffect as useEffect18,
+  useContext as useContext35,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo35,
+  useMemo as useMemo34,
   useRef as useRef22,
   useState as useState21
 } from "react";
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
-import React36, { useMemo as useMemo36 } from "react";
+import React36, { useMemo as useMemo35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef11, useMemo as useMemo37 } from "react";
+import { Children, forwardRef as forwardRef11, useMemo as useMemo36 } from "react";
 import React37 from "react";
-import React38, { createContext as createContext23 } from "react";
+import React38, { createContext as createContext24 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext37 } from "react";
 import {
   forwardRef as forwardRef12,
-  useContext as useContext35,
-  useEffect as useEffect19,
+  useContext as useContext36,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo38,
+  useMemo as useMemo37,
   useRef as useRef23
 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -2095,6 +2218,7 @@ __export2(exports_timeline_position_state, {
   useTimelinePosition: () => useTimelinePosition,
   useTimelineContext: () => useTimelineContext,
   usePlayingState: () => usePlayingState,
+  usePlaybackRate: () => usePlaybackRate,
   useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
   persistCurrentFrame: () => persistCurrentFrame,
   getInitialFrameState: () => getInitialFrameState,
@@ -2141,6 +2265,7 @@ var SetTimelineContext = createContext13({
   }
 });
 var TimelineContext = createContext13(null);
+var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
@@ -2183,11 +2308,15 @@ var TimelineContextProvider = ({ children, frameState }) => {
       playing,
       imperativePlaying,
       rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
       audioAndVideoTags
     };
-  }, [frame, playbackRate, playing, remotionRootId]);
+  }, [frame, playing, remotionRootId]);
+  const playbackRateContextValue = useMemo8(() => {
+    return {
+      playbackRate,
+      setPlaybackRate
+    };
+  }, [playbackRate]);
   const setTimelineContextValue = useMemo8(() => {
     return {
       setFrame,
@@ -2196,11 +2325,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
   }, []);
   return /* @__PURE__ */ jsx8(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
-    children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
-      value: timelineContextValue,
-      children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
-        value: setTimelineContextValue,
-        children
+    children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
+      value: playbackRateContextValue,
+      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+        value: timelineContextValue,
+        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+          value: setTimelineContextValue,
+          children
+        })
       })
     })
   });
@@ -2243,6 +2375,13 @@ var useTimelineContext = () => {
   }
   return state;
 };
+var usePlaybackRate = () => {
+  const state = useContext10(PlaybackRateContext);
+  if (state === null) {
+    throw new Error("PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+  }
+  return state;
+};
 var useTimelinePosition = () => {
   const state = useTimelineContext();
   return useTimelinePositionFromContext(state);
@@ -2534,7 +2673,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.456";
+var VERSION = "4.0.458";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2705,6 +2844,54 @@ var Freeze = ({
 var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
+var sequenceStyleSchema = {
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Offset"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  }
+};
+var sequenceSchema = {
+  layout: {
+    type: "enum",
+    default: "absolute-fill",
+    description: "Layout",
+    variants: {
+      "absolute-fill": sequenceStyleSchema,
+      none: {}
+    }
+  }
+};
+var sequenceSchemaDefaultLayoutNone = {
+  ...sequenceSchema,
+  layout: {
+    ...sequenceSchema.layout,
+    default: "none"
+  }
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -2826,6 +3013,204 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   });
 };
 var ENABLE_V5_BREAKING_CHANGES = false;
+var flattenActiveSchema = (schema, resolve) => {
+  const out = {};
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field.type === "enum") {
+      out[key] = field;
+      const current = resolve(key) ?? field.default;
+      const variant = field.variants[current];
+      if (variant) {
+        Object.assign(out, flattenActiveSchema(variant, resolve));
+      }
+    } else {
+      out[key] = field;
+    }
+  }
+  return out;
+};
+var getFlatSchemaWithAllKeys = (schema) => {
+  const out = {};
+  const addKey = (key, field) => {
+    if (key in out) {
+      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+    }
+    out[key] = field;
+  };
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    addKey(key, field);
+    if (field.type === "enum") {
+      for (const variant of Object.values(field.variants)) {
+        const flatVariant = getFlatSchemaWithAllKeys(variant);
+        for (const variantKey of Object.keys(flatVariant)) {
+          addKey(variantKey, flatVariant[variantKey]);
+        }
+      }
+    }
+  }
+  return out;
+};
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (!codeValue) {
+    return runtimeValue;
+  }
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+var findFieldInSchema = (schema, key) => {
+  if (key in schema) {
+    return schema[key];
+  }
+  for (const field of Object.values(schema)) {
+    if (field.type !== "enum") {
+      continue;
+    }
+    for (const variant of Object.values(field.variants)) {
+      const found = findFieldInSchema(variant, key);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return;
+};
+var computeEffectiveSchemaValuesDotNotation = ({
+  schema,
+  currentValue,
+  overrideValues,
+  propStatus
+}) => {
+  const merged = {};
+  for (const key of Object.keys(currentValue)) {
+    const codeValueStatus = propStatus?.[key] ?? null;
+    merged[key] = getEffectiveVisualModeValue({
+      codeValue: codeValueStatus,
+      runtimeValue: currentValue[key],
+      dragOverrideValue: overrideValues[key],
+      defaultValue: findFieldInSchema(schema, key)?.default,
+      shouldResortToDefaultValueIfUndefined: false
+    });
+  }
+  return merged;
+};
+var getNestedValue = (obj, key) => {
+  const parts = key.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== "object")
+      return;
+    current = current[part];
+  }
+  return current;
+};
+var readValuesFromProps = (props, keys) => {
+  const out = {};
+  for (const key of keys) {
+    out[key] = getNestedValue(props, key);
+  }
+  return out;
+};
+var selectActiveKeys = (schema, values) => {
+  return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
+};
+var mergeValues = ({
+  props,
+  valuesDotNotation,
+  schemaKeys
+}) => {
+  const merged = { ...props };
+  for (const key of schemaKeys) {
+    const value = valuesDotNotation[key];
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      merged[key] = value;
+      continue;
+    }
+    let current = merged;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] === "object" && current[part] !== null) {
+        current[part] = { ...current[part] };
+      } else {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+  return merged;
+};
+var wrapInSchema = (Component, schema) => {
+  if (typeof process === "undefined" || !process.env?.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
+    return Component;
+  }
+  const flatSchema = getFlatSchemaWithAllKeys(schema);
+  const flatKeys = Object.keys(flatSchema);
+  const Wrapped = forwardRef2((props, ref) => {
+    const env = useRemotionEnvironment();
+    const { visualModeEnabled, dragOverrides, codeValues } = useContext15(VisualModeOverridesContext);
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !visualModeEnabled) {
+      return React13.createElement(Component, {
+        ...props,
+        _experimentalControls: null,
+        ref
+      });
+    }
+    if (props._experimentalControls) {
+      return React13.createElement(Component, {
+        ...props,
+        ref
+      });
+    }
+    const [overrideId] = useState5(() => String(Math.random()));
+    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
+    const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const controls = useMemo15(() => {
+      return {
+        schema,
+        currentRuntimeValueDotNotation,
+        overrideId
+      };
+    }, [currentRuntimeValueDotNotation, overrideId]);
+    const valuesDotNotation = useMemo15(() => {
+      return computeEffectiveSchemaValuesDotNotation({
+        schema,
+        currentValue: currentRuntimeValueDotNotation,
+        overrideValues: dragOverrides[overrideId] ?? {},
+        propStatus: codeValues[overrideId]
+      });
+    }, [currentRuntimeValueDotNotation, dragOverrides, overrideId, codeValues]);
+    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const mergedProps = mergeValues({
+      props,
+      valuesDotNotation,
+      schemaKeys: activeKeys
+    });
+    return React13.createElement(Component, {
+      ...mergedProps,
+      _experimentalControls: controls,
+      ref
+    });
+  });
+  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  return Wrapped;
+};
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -2844,8 +3229,8 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext15(SequenceContext);
+  const [id] = useState6(() => String(Math.random()));
+  const parentSequence = useContext16(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -2853,7 +3238,7 @@ var RegularSequenceRefForwardingFunction = ({
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
   if (layout === "none" && typeof other.style !== "undefined") {
-    throw new TypeError('If layout="none", you may not pass a style.');
+    throw new TypeError('If layout="none", you may not pass a style. Passed: ' + JSON.stringify(other.style));
   }
   if (typeof durationInFrames !== "number") {
     throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
@@ -2871,15 +3256,15 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext15(SequenceManager);
-  const { hidden } = useContext15(SequenceVisibilityToggleContext);
-  const premounting = useMemo15(() => {
+  const { registerSequence, unregisterSequence } = useContext16(SequenceManager);
+  const { hidden } = useContext16(SequenceVisibilityToggleContext);
+  const premounting = useMemo16(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo15(() => {
+  const postmounting = useMemo16(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo15(() => {
+  const contextValue = useMemo16(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -2906,7 +3291,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo15(() => {
+  const timelineClipName = useMemo16(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
@@ -2989,7 +3374,7 @@ var RegularSequenceRefForwardingFunction = ({
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo15(() => {
+  const defaultStyle = useMemo16(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -3014,9 +3399,9 @@ var RegularSequenceRefForwardingFunction = ({
     })
   });
 };
-var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
+var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext15(PremountContext);
+  const parentPremountContext = useContext16(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
@@ -3036,7 +3421,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo15(() => {
+  const style = useMemo16(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -3054,7 +3439,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx12(Sequence, {
+    children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
@@ -3067,7 +3452,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     })
   });
 };
-var PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
+var PremountedPostmountedSequence = forwardRef3(PremountedPostmountedSequenceRefForwardingFunction);
 var SequenceRefForwardingFunction = (props, ref) => {
   const env = useRemotionEnvironment();
   const { fps } = useVideoConfig();
@@ -3086,7 +3471,8 @@ var SequenceRefForwardingFunction = (props, ref) => {
     ref
   });
 };
-var Sequence = forwardRef2(SequenceRefForwardingFunction);
+var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
+var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -3182,7 +3568,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
     style
   });
 };
-var Canvas = React14.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -3329,7 +3715,7 @@ var resolveAnimatedImageSource = (src) => {
   }
   return new URL(src, window.origin).href;
 };
-var AnimatedImage = forwardRef3(({
+var AnimatedImage = forwardRef4(({
   src,
   width,
   height,
@@ -3348,9 +3734,9 @@ var AnimatedImage = forwardRef3(({
     };
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState6(null);
+  const [imageDecoder, setImageDecoder] = useState7(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [decodeHandle] = useState7(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
@@ -3364,7 +3750,7 @@ var AnimatedImage = forwardRef3(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState6(() => loopBehavior);
+  const [initialLoopBehavior] = useState7(() => loopBehavior);
   useEffect6(() => {
     const controller = new AbortController;
     decodeImage({
@@ -3436,158 +3822,6 @@ var AnimatedImage = forwardRef3(({
     ...props
   });
 });
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  runtimeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
-}) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
-  }
-  if (!codeValue) {
-    return runtimeValue;
-  }
-  if (!codeValue.canUpdate) {
-    return runtimeValue;
-  }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
-  }
-  return codeValue.codeValue;
-};
-var useSchema = (schema, currentValue) => {
-  const env = useRemotionEnvironment();
-  const earlyReturn = useMemo16(() => {
-    if (!env.isStudio || env.isReadOnlyStudio) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    return;
-  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
-  if (earlyReturn) {
-    return earlyReturn;
-  }
-  const [overrideId] = useState7(() => String(Math.random()));
-  const {
-    visualModeEnabled,
-    dragOverrides: overrides,
-    codeValues
-  } = useContext16(VisualModeOverridesContext);
-  const controls = useMemo16(() => {
-    if (!visualModeEnabled) {
-      return;
-    }
-    if (schema === null || currentValue === null) {
-      return;
-    }
-    return {
-      schema,
-      currentValue,
-      overrideId
-    };
-  }, [schema, currentValue, overrideId, visualModeEnabled]);
-  return useMemo16(() => {
-    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    const overrideValues = overrides[overrideId] ?? {};
-    const propStatus = codeValues[overrideId];
-    const currentValueKeys = Object.keys(currentValue);
-    const keysToUpdate = [...new Set(currentValueKeys)];
-    const merged = {};
-    for (const key of keysToUpdate) {
-      const codeValueStatus = propStatus?.[key] ?? null;
-      merged[key] = getEffectiveVisualModeValue({
-        codeValue: codeValueStatus,
-        runtimeValue: currentValue[key],
-        dragOverrideValue: overrideValues[key],
-        defaultValue: schema[key]?.default,
-        shouldResortToDefaultValueIfUndefined: false
-      });
-    }
-    return {
-      controls,
-      values: merged
-    };
-  }, [
-    controls,
-    currentValue,
-    overrideId,
-    overrides,
-    codeValues,
-    schema,
-    visualModeEnabled
-  ]);
-};
-var getNestedValue = (obj, key) => {
-  const parts = key.split(".");
-  let current = obj;
-  for (const part of parts) {
-    if (current === null || current === undefined || typeof current !== "object")
-      return;
-    current = current[part];
-  }
-  return current;
-};
-var mergeValues = (props, values, schemaKeys) => {
-  const merged = { ...props };
-  for (const key of schemaKeys) {
-    const value = values[key];
-    const parts = key.split(".");
-    if (parts.length === 1) {
-      merged[key] = value;
-      continue;
-    }
-    let current = merged;
-    for (let i = 0;i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (typeof current[part] === "object" && current[part] !== null) {
-        current[part] = { ...current[part] };
-      } else {
-        current[part] = {};
-      }
-      current = current[part];
-    }
-    current[parts[parts.length - 1]] = value;
-  }
-  return merged;
-};
-var wrapInSchema = (Component, schema) => {
-  const schemaKeys = Object.keys(schema);
-  const Wrapped = forwardRef4((props, ref) => {
-    const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-      return React15.createElement(Component, {
-        ...props,
-        _experimentalControls: null,
-        ref
-      });
-    }
-    const schemaInput = useMemo17(() => {
-      const input = {};
-      for (const key of schemaKeys) {
-        input[key] = getNestedValue(props, key);
-      }
-      return input;
-    }, schemaKeys.map((key) => getNestedValue(props, key)));
-    const { controls, values } = useSchema(schema, schemaInput);
-    const mergedProps = mergeValues(props, values, schemaKeys);
-    return React15.createElement(Component, {
-      ...mergedProps,
-      _experimentalControls: controls,
-      ref
-    });
-  });
-  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
-  return Wrapped;
-};
 var cachedSupport = null;
 var isHtmlInCanvasSupported = () => {
   if (cachedSupport !== null) {
@@ -3625,40 +3859,11 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var htmlInCanvasSchema = {
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Position"
-  },
-  "style.scale": {
-    type: "number",
-    min: 0.05,
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale"
-  },
-  "style.rotate": {
-    type: "rotation",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity"
-  }
-};
+var HtmlInCanvasAncestorContext = createContext15(false);
 var HtmlInCanvasInner = forwardRef5(({
   width,
   height,
-  _experimentalEffects: experimentalEffects = [],
+  _experimentalEffects: effects = [],
   children,
   onPaint,
   onInit,
@@ -3667,6 +3872,7 @@ var HtmlInCanvasInner = forwardRef5(({
   durationInFrames,
   ...sequenceProps
 }, ref) => {
+  const isInsideAncestorHtmlInCanvas = useContext17(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
@@ -3687,8 +3893,8 @@ var HtmlInCanvasInner = forwardRef5(({
   }, [ref]);
   const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
-  const effectsRef = useRef9(experimentalEffects);
-  effectsRef.current = experimentalEffects;
+  const effectsRef = useRef9(effects);
+  effectsRef.current = effects;
   const frameRef = useRef9(frame);
   frameRef.current = frame;
   const onPaintRef = useRef9(onPaint);
@@ -3802,35 +4008,42 @@ var HtmlInCanvasInner = forwardRef5(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2]);
-  const innerStyle = useMemo18(() => {
+  const innerStyle = useMemo17(() => {
     return {
       width,
-      height,
-      ...style
+      height
     };
-  }, [width, height, style]);
+  }, [width, height]);
+  if (isInsideAncestorHtmlInCanvas) {
+    throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
+  }
   return /* @__PURE__ */ jsx15(Sequence, {
     durationInFrames: resolvedDuration,
     name: "<HtmlInCanvas>",
     _experimentalControls: controls,
+    _experimentalEffects: effects,
     layout: "none",
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx15("canvas", {
-      ref: setLayoutCanvasRef,
-      width,
-      height,
-      children: /* @__PURE__ */ jsx15("div", {
-        ref: divRef,
-        style: innerStyle,
-        children
+    children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsx15("canvas", {
+        ref: setLayoutCanvasRef,
+        width,
+        height,
+        style,
+        children: /* @__PURE__ */ jsx15("div", {
+          ref: divRef,
+          style: innerStyle,
+          children
+        })
       })
     })
   });
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
-var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
+var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, sequenceStyleSchema);
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
-  isHtmlInCanvasSupported
+  isSupported: isHtmlInCanvasSupported
 });
 HtmlInCanvas.displayName = "HtmlInCanvas";
 addSequenceStackTraces(HtmlInCanvas);
@@ -3863,7 +4076,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext15({
+var RenderAssetManager = createContext16({
   registerRenderAsset: () => {
     return;
   },
@@ -3906,7 +4119,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo19(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -3920,7 +4133,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext17(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext18(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState10(() => {
@@ -4001,7 +4214,7 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext16(null);
+var LoopContext = createContext17(null);
 var useLoop = () => {
   return React17.useContext(LoopContext);
 };
@@ -4035,14 +4248,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo20(() => {
+  const loopDisplay = useMemo19(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo20(() => {
+  const loopContext = useMemo19(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -4072,7 +4285,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext17({});
+var PreloadContext = createContext18({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -4110,7 +4323,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext18(PreloadContext);
+  const preloads2 = useContext19(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -4393,7 +4606,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext18({
+var DurationsContext = createContext19({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -4401,7 +4614,7 @@ var DurationsContext = createContext18({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo21(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -4535,7 +4748,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  return useMemo22(() => {
+  const context = useMemo21(() => {
     if (env.isRendering) {
       return null;
     }
@@ -4552,11 +4765,19 @@ var useSingletonAudioContext = ({
     });
     const gainNode = audioContext.createGain();
     gainNode.connect(audioContext.destination);
+    Log.trace({ logLevel, tag: "audio" }, "Creating new audio context");
+    audioContext.suspend();
     return {
       audioContext,
       gainNode
     };
   }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
+  useEffect8(() => {
+    return () => {
+      context?.audioContext?.close();
+    };
+  }, [context]);
+  return context;
 };
 var waitUntilActuallyResumed = (audioContext, logLevel) => {
   return new Promise((resolve) => {
@@ -4604,8 +4825,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext19(null);
-var SharedAudioTagsContext = createContext19(null);
+var SharedAudioContext = createContext20(null);
+var SharedAudioTagsContext = createContext20(null);
 var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
   const logLevel = useLogLevel();
   const ctxAndGain = useSingletonAudioContext({
@@ -4615,9 +4836,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   });
   const audioContextIsPlayingEventually = useRef11(false);
   const isResuming = useRef11(null);
-  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef11([]);
-  const audioSyncAnchorEmitter = useMemo23(() => {
+  const audioSyncAnchorEmitter = useMemo22(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -4637,7 +4858,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo23(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -4689,16 +4910,22 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       return Promise.resolve();
     }
     audioContextIsPlayingEventually.current = true;
-    isResuming.current = waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(() => {}).finally(() => {
+    const resumePromise = ctxAndGain.audioContext.resume();
+    isResuming.current = new Promise((resolve) => {
+      waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(resolve);
+      resumePromise.catch((err) => {
+        Log.warn({ logLevel, tag: "audio" }, "AudioContext resume rejected, continuing without audio sync", err);
+        resolve();
+      });
+    }).finally(() => {
       isResuming.current = null;
     });
     ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode?.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode?.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-    return ctxAndGain.audioContext.resume().then(() => {
-      nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
-      nodesToResume.current.clear();
-    });
+    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
+    nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
+    nodesToResume.current.clear();
+    return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
   const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current;
@@ -4713,7 +4940,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     audioContextIsPlayingEventually.current = false;
     ctxAndGain.audioContext.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo23(() => {
+  const audioContextValue = useMemo22(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       gainNode: ctxAndGain?.gainNode ?? null,
@@ -4749,10 +4976,10 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext19(SharedAudioContext);
+  const audioCtx = useContext20(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo23(() => {
+  const refs = useMemo22(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -4889,7 +5116,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo23(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -4924,8 +5151,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext19(SharedAudioContext);
-  const tagsCtx = useContext19(SharedAudioTagsContext);
+  const audioCtx = useContext20(SharedAudioContext);
+  const tagsCtx = useContext20(SharedAudioTagsContext);
   const [elem] = useState12(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -5104,7 +5331,7 @@ var useVolume = ({
   const audioStuffRef = useRef13(null);
   const currentVolumeRef = useRef13(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext20(SharedAudioContext);
+  const sharedAudioContext = useContext21(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -5169,7 +5396,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext21(SequenceContext);
+  const parentSequence = useContext22(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -5258,7 +5485,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   const [initialVolume] = useState13(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -5268,7 +5495,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo24(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -5280,7 +5507,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, mediaStartsAt, volume, mediaVolume]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -5289,7 +5516,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo24(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -5325,8 +5552,8 @@ var useImageInTimeline = ({
   loopDisplay,
   controls
 }) => {
-  const parentSequence = useContext22(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext22(SequenceManager);
+  const parentSequence = useContext23(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -5343,7 +5570,7 @@ var useImageInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5407,9 +5634,9 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext22(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -5426,7 +5653,7 @@ var useMediaInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5528,7 +5755,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (rendering) {
       return;
     }
@@ -5558,13 +5785,13 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo25(() => {
+  return useMemo24(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
 var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext23(LogLevelContext);
+  const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -5573,7 +5800,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState14(bufferManager.buffering.current);
-  useEffect9(() => {
+  useEffect10(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -5594,9 +5821,9 @@ var useIsPlayerBuffering = (bufferManager) => {
   return isBuffering;
 };
 var useBufferState = () => {
-  const buffer = useContext24(BufferingContextReact);
+  const buffer = useContext25(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo26(() => ({
+  return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -5693,7 +5920,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo27(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -5742,7 +5969,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState15(false);
-  useEffect10(() => {
+  useEffect11(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -5875,7 +6102,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef16(null);
-  useEffect11(() => {
+  useEffect12(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -6095,11 +6322,11 @@ var useMediaPlayback = ({
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useTimelineContext();
+  const { playbackRate: globalPlaybackRate } = usePlaybackRate();
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext25(BufferingContextReact);
+  const buffering = useContext26(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef17(null);
@@ -6161,7 +6388,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect12(() => {
+  useEffect13(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -6206,7 +6433,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect12(() => {
+  useEffect13(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -6335,7 +6562,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect13(() => {
+  useEffect14(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -6374,11 +6601,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext20({
+var MediaVolumeContext = createContext21({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext20({
+var SetMediaVolumeContext = createContext21({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -6387,16 +6614,16 @@ var SetMediaVolumeContext = createContext20({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext26(MediaVolumeContext);
-  const { setMediaVolume } = useContext26(SetMediaVolumeContext);
-  return useMemo28(() => {
+  const { mediaVolume } = useContext27(MediaVolumeContext);
+  const { setMediaVolume } = useContext27(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext26(MediaVolumeContext);
-  const { setMediaMuted } = useContext26(SetMediaVolumeContext);
-  return useMemo28(() => {
+  const { mediaMuted } = useContext27(MediaVolumeContext);
+  const { setMediaMuted } = useContext27(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -6445,12 +6672,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext27(SequenceVisibilityToggleContext);
+  const { hidden } = useContext28(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext27(SequenceContext);
+  const sequenceContext = useContext28(SequenceContext);
   const [timelineId] = useState16(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -6464,7 +6691,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo29(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -6482,7 +6709,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -6554,7 +6781,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef18(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect15(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -6605,10 +6832,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext28(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext28(RenderAssetManager);
+  const sequenceContext = useContext29(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -6623,7 +6850,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -6715,7 +6942,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 };
 var AudioForRendering = forwardRef7(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext29(SharedAudioTagsContext);
+  const audioTagsContext = useContext30(SharedAudioTagsContext);
   const {
     startFrom,
     endAt,
@@ -6734,7 +6961,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext29(DurationsContext);
+  const { durations, setDurations } = useContext30(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -6873,36 +7100,6 @@ function truncateSrcForLabel(src) {
   }
   return src;
 }
-var imgSchema = {
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Position"
-  },
-  "style.scale": {
-    type: "number",
-    min: 0.05,
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale"
-  },
-  "style.rotate": {
-    type: "rotation",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity"
-  }
-};
 var ImgInner = ({
   onError,
   maxRetries = 2,
@@ -6922,7 +7119,7 @@ var ImgInner = ({
   const imageRef = useRef20(null);
   const errors = useRef20({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext31(SequenceContext);
   const [timelineId] = useState18(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
@@ -7066,7 +7263,7 @@ var ImgInner = ({
     decoding: "sync"
   });
 };
-var Img = wrapInSchema(ImgInner, imgSchema);
+var Img = wrapInSchema(ImgInner, sequenceStyleSchema);
 addSequenceStackTraces(Img);
 var compositionsRef = React28.createRef();
 var CompositionManagerProvider = ({
@@ -7122,7 +7319,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo31(() => {
+  const compositionManagerSetters = useMemo30(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -7138,7 +7335,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo31(() => {
+  const compositionManagerContextValue = useMemo30(() => {
     return {
       compositions,
       folders,
@@ -7242,9 +7439,9 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext21(null);
+var MediaEnabledContext = createContext22(null);
 var useVideoEnabled = () => {
-  const context = useContext31(MediaEnabledContext);
+  const context = useContext32(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -7254,7 +7451,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext31(MediaEnabledContext);
+  const context = useContext32(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -7268,7 +7465,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo32(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo31(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
@@ -7284,13 +7481,13 @@ var RemotionRootContexts = ({
   frameState,
   visualModeEnabled
 }) => {
-  const nonceContext = useMemo33(() => {
+  const nonceContext = useMemo32(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo33(() => {
+  const logging = useMemo32(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx29(LogLevelContext.Provider, {
@@ -7524,7 +7721,7 @@ var setupEnvVariables = () => {
   });
 };
 var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext22({
+var PreviewSizeContext = createContext23({
   setSize: () => {
     return;
   },
@@ -7548,8 +7745,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useSequenceControlOverride = (key) => {
-  const seqContext = useContext32(SequenceContext);
-  const { dragOverrides: overrides } = useContext32(VisualModeOverridesContext);
+  const seqContext = useContext33(SequenceContext);
+  const { dragOverrides: overrides } = useContext33(VisualModeOverridesContext);
   if (!seqContext) {
     return;
   }
@@ -7586,13 +7783,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo34(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo33(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -7607,7 +7804,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -7647,14 +7844,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo34(() => {
+  const currentTime = useMemo33(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo34(() => {
+  const actualSrc = useMemo33(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -7742,7 +7939,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo34(() => {
+  const className = useMemo33(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback17((img) => {
@@ -7768,7 +7965,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect17(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -7800,12 +7997,12 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext34(SharedAudioContext);
+  const context = useContext35(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef22(null);
-  const sharedSource = useMemo35(() => {
+  const sharedSource = useMemo34(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -7856,8 +8053,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext34(SequenceContext);
-  const { hidden } = useContext34(SequenceVisibilityToggleContext);
+  const parentSequence = useContext35(SequenceContext);
+  const { hidden } = useContext35(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -7932,7 +8129,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -7975,7 +8172,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef22(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -7992,7 +8189,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect18(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8003,7 +8200,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo35(() => {
+  const actualStyle = useMemo34(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -8197,7 +8394,7 @@ function useRemotionContexts() {
   const sequenceManagerContext = React36.useContext(SequenceManager);
   const bufferManagerContext = React36.useContext(BufferingContextReact);
   const logLevelContext = React36.useContext(LogLevelContext);
-  return useMemo36(() => ({
+  return useMemo35(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -8285,8 +8482,11 @@ var Internals = {
   SequenceManager,
   SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
-  useSchema,
   wrapInSchema,
+  sequenceSchema,
+  sequenceStyleSchema,
+  flattenActiveSchema,
+  getFlatSchemaWithAllKeys,
   useSequenceControlOverride,
   RemotionRootContexts,
   CompositionManagerProvider,
@@ -8336,6 +8536,7 @@ var Internals = {
   REMOTION_STUDIO_CONTAINER_ELEMENT,
   RenderAssetManager,
   persistCurrentFrame,
+  usePlaybackRate,
   useTimelineContext,
   useTimelineSetFrame,
   isIosSafari,
@@ -8369,6 +8570,7 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
+  PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
   getEffectiveVisualModeValue,
@@ -8377,7 +8579,8 @@ var Internals = {
   runEffectChain,
   useMemoizedEffects,
   defineEffect,
-  createDescriptor
+  createDescriptor,
+  computeEffectiveSchemaValuesDotNotation
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -8415,7 +8618,7 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext23(false);
+var IsInsideSeriesContext = createContext24(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
     value: true,
@@ -8441,8 +8644,8 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   });
 };
 var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
-var Series = (props2) => {
-  const childrenValue = useMemo37(() => {
+var SeriesInner = (props2) => {
+  const childrenValue = useMemo36(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -8505,7 +8708,9 @@ var Series = (props2) => {
     })
   });
 };
-Series.Sequence = SeriesSequence;
+var Series = Object.assign(wrapInSchema(SeriesInner, sequenceSchemaDefaultLayoutNone), {
+  Sequence: SeriesSequence
+});
 addSequenceStackTraces(Series);
 addSequenceStackTraces(SeriesSequence);
 var validateSpringDuration = (dur) => {
@@ -8973,14 +9178,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(null);
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
-  const id = useMemo38(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
+  const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -8995,7 +9200,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -9038,7 +9243,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -9189,7 +9394,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext36(DurationsContext);
+  const { durations, setDurations } = useContext37(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -9456,6 +9661,20 @@ var TeamCardsLayout = () => {
 
 // src/components/experts/experts-icons.tsx
 import { jsx as jsx40 } from "react/jsx-runtime";
+var DiscordLogo = () => {
+  return /* @__PURE__ */ jsx40("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    style: {
+      width: 30,
+      marginRight: 10
+    },
+    children: /* @__PURE__ */ jsx40("path", {
+      fill: "white",
+      d: "M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+    })
+  });
+};
 var PersonalWebsite = () => {
   return /* @__PURE__ */ jsx40("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9609,6 +9828,13 @@ var ExpertCard = ({ expert, Link }) => {
                 target: "_blank",
                 href: `mailto:${expert.email}`,
                 children: /* @__PURE__ */ jsx41(EmailLogo, {})
+              }) : null,
+              expert.discord ? /* @__PURE__ */ jsx41("a", {
+                className: "no-underline text-inherit",
+                target: "_blank",
+                href: `https://discord.com/users/${expert.discord.userId}`,
+                title: `@${expert.discord.username} on Discord`,
+                children: /* @__PURE__ */ jsx41(DiscordLogo, {})
               }) : null
             ]
           })
@@ -9618,7 +9844,7 @@ var ExpertCard = ({ expert, Link }) => {
   });
 };
 var ExpertsPageContent = ({ Link }) => {
-  const expertsInRandomOrder = useMemo39(() => {
+  const expertsInRandomOrder = useMemo38(() => {
     if (typeof window === "undefined") {
       return [];
     }
@@ -11061,7 +11287,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo42, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo41, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -13827,7 +14053,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React3, { useMemo as useMemo41 } from "react";
+import React3, { useMemo as useMemo40 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx42, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -13858,13 +14084,13 @@ var RenderSvg = ({
   instructions,
   ...props
 }) => {
-  const actualStyle = useMemo41(() => {
+  const actualStyle = useMemo40(() => {
     return {
       overflow: "visible",
       ...style ?? {}
     };
   }, [style]);
-  const actualPathStyle = useMemo41(() => {
+  const actualPathStyle = useMemo40(() => {
     return {
       transformBox: "fill-box",
       ...pathStyle ?? {}
@@ -15425,10 +15651,10 @@ import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React122 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React16 from "react";
-import * as React13 from "react";
+import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React142 from "react";
+import * as React14 from "react";
 import * as React152 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React172 from "react";
@@ -15655,8 +15881,8 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo42(() => new EventTarget, []);
-  useEffect20(() => {
+  const eventTarget = useMemo41(() => new EventTarget, []);
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -15803,7 +16029,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
-  useEffect20(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -16467,7 +16693,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React13.forwardRef((props, forwardedRef) => {
+  const Node2 = React132.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -16483,11 +16709,11 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React142.useRef(callback);
-  React142.useEffect(() => {
+  const callbackRef = React14.useRef(callback);
+  React14.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
@@ -22102,7 +22328,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React53, { useCallback as useCallback33, useMemo as useMemo51 } from "react";
+import React53, { useCallback as useCallback33, useMemo as useMemo50 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -23759,14 +23985,14 @@ var CompanyPricing = () => {
   }, []);
   const creatorsPrice = creatorsSelected ? devSeatCount * SEAT_PRICE : 0;
   const automatorsPrice = automatorsSelected ? Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE : 0;
-  const totalPrice = useMemo51(() => {
+  const totalPrice = useMemo50(() => {
     const basePrice = creatorsPrice + automatorsPrice;
     if (automatorsSelected) {
       return Math.max(100, basePrice);
     }
     return basePrice;
   }, [creatorsPrice, automatorsPrice, automatorsSelected]);
-  const totalPriceString = useMemo51(() => {
+  const totalPriceString = useMemo50(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
@@ -24039,7 +24265,7 @@ var Pricing = () => {
 };
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect40 } from "react";
 import { jsx as jsx49, jsxs as jsxs10 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -24065,7 +24291,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect41(() => {
+  useEffect40(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -24471,16 +24697,16 @@ var CommunityStats_default = CommunityStats;
 import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
-import { useContext as useContext43, useLayoutEffect as useLayoutEffect17 } from "react";
+import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
+import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 import { useCallback as useCallback34, useRef as useRef42 } from "react";
-import { useEffect as useEffect24, useState as useState24 } from "react";
+import { useEffect as useEffect210, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext44, useEffect as useEffect52, useRef as useRef52 } from "react";
+import { useContext as useContext45, useEffect as useEffect52, useRef as useRef52 } from "react";
 import { useEffect as useEffect310, useRef as useRef310 } from "react";
-import { useCallback as useCallback24, useContext as useContext38, useMemo as useMemo52, useRef as useRef26, useState as useState310 } from "react";
-import { useEffect as useEffect43, useRef as useRef43 } from "react";
+import { useCallback as useCallback24, useContext as useContext39, useMemo as useMemo51, useRef as useRef26, useState as useState310 } from "react";
+import { useEffect as useEffect42, useRef as useRef43 } from "react";
 import { useCallback as useCallback35, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
@@ -24509,10 +24735,10 @@ import { jsx as jsx55 } from "react/jsx-runtime";
 import { useCallback as useCallback82, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef92, useState as useState102 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
 import { useCallback as useCallback52, useMemo as useMemo410, useRef as useRef62, useState as useState62 } from "react";
-import React54, { useCallback as useCallback42, useMemo as useMemo310, useState as useState52 } from "react";
+import React54, { useCallback as useCallback42, useMemo as useMemo39, 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 useCallback62, useEffect as useEffect92, useMemo as useMemo53, useState as useState82 } from "react";
+import { useCallback as useCallback62, useEffect as useEffect92, useMemo as useMemo52, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef72, useState as useState72 } from "react";
 import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
 import { useCallback as useCallback72, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef82, useState as useState92 } from "react";
@@ -25321,7 +25547,7 @@ import {
   useRef as useRef142,
   useState as useState142
 } from "react";
-import React132, {
+import React133, {
   forwardRef as forwardRef34,
   Suspense as Suspense22,
   useCallback as useCallback132,
@@ -25765,7 +25991,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext43(Internals.BufferingContextReact);
+  const bufferManager = useContext44(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -25790,7 +26016,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect42(() => {
+  useEffect41(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -25803,7 +26029,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState24(false);
-  useEffect24(() => {
+  useEffect210(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -25848,21 +26074,21 @@ var usePlayer = () => {
   const playStart = useRef26(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext38(Internals.SharedAudioContext);
-  const audioTagsContext = useContext38(Internals.SharedAudioTagsContext);
+  const audioContext = useContext39(Internals.SharedAudioContext);
+  const audioTagsContext = useContext39(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
   const frameRef = useRef26(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext38(PlayerEventEmitterContext);
+  const emitter = useContext39(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext38(Internals.BufferingContextReact);
+  const bufferingContext = useContext39(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -25978,7 +26204,7 @@ var usePlayer = () => {
   const isBuffering = useCallback24(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo52(() => {
+  const returnValue = useMemo51(() => {
     return {
       frameBack,
       frameForward,
@@ -26164,7 +26390,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef43(getIsBackgrounded());
-  useEffect43(() => {
+  useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -26209,12 +26435,11 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext44(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext45(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
-  const timelineContext = Internals.useTimelineContext();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef52(0);
-  const context = useContext44(Internals.BufferingContextReact);
+  const context = useContext45(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26237,19 +26462,13 @@ var usePlayback = ({
       audioContext: sharedAudioContext.audioContext,
       audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
       absoluteTimeInSeconds: frame / config.fps,
-      globalPlaybackRate: timelineContext.playbackRate,
+      globalPlaybackRate: playbackRate,
       logLevel
     });
     if (changed) {
       sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
     }
-  }, [
-    config,
-    frame,
-    logLevel,
-    sharedAudioContext,
-    timelineContext.playbackRate
-  ]);
+  }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
   useEffect52(() => {
     if (!config) {
       return;
@@ -26283,7 +26502,9 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      sharedAudioContext?.resume?.();
+      if (!muted) {
+        sharedAudioContext?.resume?.();
+      }
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -26312,7 +26533,7 @@ var usePlayback = ({
     };
     const queueNextFrame = () => {
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
-      if (getIsResumingAudioContext !== null) {
+      if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
           if (!sharedAudioContext?.audioContext) {
             return;
@@ -26324,7 +26545,7 @@ var usePlayback = ({
             audioContext: sharedAudioContext.audioContext,
             audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
             absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: timelineContext.playbackRate,
+            globalPlaybackRate: playbackRate,
             logLevel
           });
           startedTime = performance.now();
@@ -26381,7 +26602,6 @@ var usePlayback = ({
     context,
     isPlaying,
     sharedAudioContext,
-    timelineContext.playbackRate,
     logLevel,
     muted
   ]);
@@ -26656,7 +26876,7 @@ var DefaultVolumeSlider = ({
   inputRef,
   setVolume
 }) => {
-  const sliderContainer = useMemo310(() => {
+  const sliderContainer = useMemo39(() => {
     const paddingLeft = 5;
     const common = {
       paddingLeft,
@@ -26681,7 +26901,7 @@ var DefaultVolumeSlider = ({
   const onVolumeChange = useCallback42((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
-  const inputStyle = useMemo310(() => {
+  const inputStyle = useMemo39(() => {
     const commonStyle = {
       WebkitAppearance: "none",
       backgroundColor: "rgba(255, 255, 255, 0.5)",
@@ -26901,7 +27121,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo53(() => {
+  const actualStyle = useMemo52(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -26924,7 +27144,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals.useTimelineContext();
+  const { setPlaybackRate, playbackRate } = Internals.usePlaybackRate();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState82(playbackRate);
   useEffect92(() => {
     const listener = (e) => {
@@ -26968,7 +27188,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo53(() => {
+  const playbackPopup = useMemo52(() => {
     return {
       position: "absolute",
       right: 0,
@@ -27026,7 +27246,7 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals.useTimelineContext();
+  const { playbackRate } = Internals.usePlaybackRate();
   const onClick = useCallback62((e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -28143,6 +28363,7 @@ var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
   timelineContext,
+  playbackRateContext,
   fps,
   compositionHeight,
   compositionWidth,
@@ -28243,23 +28464,26 @@ var SharedPlayerContexts = ({
       children: /* @__PURE__ */ jsx133(Internals.CanUseRemotionHooksProvider, {
         children: /* @__PURE__ */ jsx133(Internals.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx133(Internals.TimelineContext.Provider, {
-            value: timelineContext,
-            children: /* @__PURE__ */ jsx133(Internals.CompositionManager.Provider, {
-              value: compositionManagerContext,
-              children: /* @__PURE__ */ jsx133(Internals.PrefetchProvider, {
-                children: /* @__PURE__ */ jsx133(Internals.DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx133(Internals.MediaVolumeContext.Provider, {
-                    value: mediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx133(Internals.SetMediaVolumeContext.Provider, {
-                      value: setMediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
-                        children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
-                          audioLatencyHint,
-                          audioEnabled,
-                          children: /* @__PURE__ */ jsx133(Internals.SharedAudioTagsContextProvider, {
-                            numberOfAudioTags: numberOfSharedAudioTags,
-                            children
+          children: /* @__PURE__ */ jsx133(Internals.PlaybackRateContext.Provider, {
+            value: playbackRateContext,
+            children: /* @__PURE__ */ jsx133(Internals.TimelineContext.Provider, {
+              value: timelineContext,
+              children: /* @__PURE__ */ jsx133(Internals.CompositionManager.Provider, {
+                value: compositionManagerContext,
+                children: /* @__PURE__ */ jsx133(Internals.PrefetchProvider, {
+                  children: /* @__PURE__ */ jsx133(Internals.DurationsContextProvider, {
+                    children: /* @__PURE__ */ jsx133(Internals.MediaVolumeContext.Provider, {
+                      value: mediaVolumeContextValue,
+                      children: /* @__PURE__ */ jsx133(Internals.SetMediaVolumeContext.Provider, {
+                        value: setMediaVolumeContextValue,
+                        children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
+                          children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
+                            audioLatencyHint,
+                            audioEnabled,
+                            children: /* @__PURE__ */ jsx133(Internals.SharedAudioTagsContextProvider, {
+                              numberOfAudioTags: numberOfSharedAudioTags,
+                              children
+                            })
                           })
                         })
                       })
@@ -28531,14 +28755,16 @@ var PlayerFn = ({
       frame,
       playing,
       rootId,
-      playbackRate: currentPlaybackRate,
       imperativePlaying,
-      setPlaybackRate: (rate) => {
-        setCurrentPlaybackRate(rate);
-      },
       audioAndVideoTags
     };
-  }, [frame, currentPlaybackRate, playing, rootId]);
+  }, [frame, playing, rootId]);
+  const playbackRateContextValue = useMemo142(() => {
+    return {
+      playbackRate: currentPlaybackRate,
+      setPlaybackRate: setCurrentPlaybackRate
+    };
+  }, [currentPlaybackRate]);
   const setTimelineContextValue = useMemo142(() => {
     return {
       setFrame,
@@ -28559,6 +28785,7 @@ var PlayerFn = ({
   return /* @__PURE__ */ jsx143(Internals.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx143(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
+      playbackRateContext: playbackRateContextValue,
       component,
       compositionHeight,
       compositionWidth,
@@ -28636,7 +28863,7 @@ var useThumbnail = () => {
   }, [emitter]);
   return returnValue;
 };
-var reactVersion2 = React132.version.split(".")[0];
+var reactVersion2 = React133.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -28790,14 +29017,18 @@ var ThumbnailFn = ({
       imperativePlaying: {
         current: false
       },
-      playbackRate: 1,
-      setPlaybackRate: () => {
-        throw new Error("thumbnail");
-      },
       audioAndVideoTags: { current: [] }
     };
     return value;
   }, [frameToDisplay, thumbnailId]);
+  const playbackRateContext = useMemo172(() => {
+    return {
+      playbackRate: 1,
+      setPlaybackRate: () => {
+        throw new Error("thumbnail");
+      }
+    };
+  }, []);
   useImperativeHandle42(ref, () => rootRef.current, []);
   const Component = Internals.useLazyComponent({
     compProps: componentProps,
@@ -28811,6 +29042,7 @@ var ThumbnailFn = ({
   return /* @__PURE__ */ jsx163(Internals.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx163(SharedPlayerContexts, {
       timelineContext: timelineState,
+      playbackRateContext,
       component: Component,
       compositionHeight,
       compositionWidth,
@@ -28845,8 +29077,8 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback49,
-  useEffect as useEffect58,
-  useMemo as useMemo66,
+  useEffect as useEffect57,
+  useMemo as useMemo64,
   useRef as useRef53,
   useState as useState56
 } from "react";
@@ -29597,7 +29829,7 @@ 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 useContext45, useMemo as useMemo54 } from "react";
+import React57, { useContext as useContext46, useMemo as useMemo53 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -29605,7 +29837,7 @@ var ColorModeProvider = ({
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo54(() => {
+  const value = useMemo53(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx57(Context.Provider, {
@@ -29614,7 +29846,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext45(Context);
+  const context = useContext46(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -29623,14 +29855,14 @@ function useColorMode() {
 
 // ../media/dist/esm/index.mjs
 import { useState as useState312 } from "react";
-import { useMemo as useMemo312 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo56, useRef as useRef44, useState as useState41 } from "react";
+import { useMemo as useMemo311 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo55, useRef as useRef44, useState as useState41 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext310, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
+import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -29646,8 +29878,8 @@ import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx315 } from "react/jsx-runtime";
 import { useMemo as useMemo63, useState as useState63 } from "react";
 import {
-  useContext as useContext46,
-  useEffect as useEffect210,
+  useContext as useContext47,
+  useEffect as useEffect212,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
   useRef as useRef210,
@@ -29657,7 +29889,7 @@ import { jsx as jsx412 } from "react/jsx-runtime";
 import {
   useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
-  useMemo as useMemo55,
+  useMemo as useMemo54,
   useRef as useRef312,
   useState as useState53
 } from "react";
@@ -30452,65 +30684,90 @@ var makeNonceManager = () => {
     createAsyncOperation
   };
 };
+var BUFFER_SIZE = 3;
 var canvasesAheadOfTime = (videoSink, startTimestamp) => {
   const iterator = videoSink.canvases(startTimestamp);
-  let inFlight = iterator.next();
-  let resolved = null;
-  const trackResolution = () => {
-    const captured = inFlight;
-    captured.then((result) => {
-      if (captured === inFlight) {
-        resolved = result;
+  const buffer = [];
+  let chaining = false;
+  let reachedEnd = false;
+  let closed = false;
+  let inFlight = null;
+  const closeFrame = (frame) => {
+    frame.close?.();
+  };
+  const fillNext = () => {
+    if (chaining || reachedEnd || closed)
+      return;
+    if (buffer.length >= BUFFER_SIZE)
+      return;
+    chaining = true;
+    const slot = { promise: iterator.next(), resolved: null };
+    buffer.push(slot);
+    inFlight = slot.promise.then((result) => {
+      slot.resolved = result;
+      chaining = false;
+      inFlight = null;
+      if (result.done) {
+        reachedEnd = true;
+        return;
+      }
+      if (closed) {
+        closeFrame(result.value);
+        return;
       }
+      fillNext();
     }, () => {
-      return;
+      chaining = false;
+      inFlight = null;
     });
   };
-  trackResolution();
-  const advance2 = () => {
-    inFlight = iterator.next();
-    resolved = null;
-    trackResolution();
-  };
+  fillNext();
   const next = () => {
-    if (resolved) {
-      if (resolved.done) {
+    const slot = buffer.shift();
+    fillNext();
+    if (!slot) {
+      if (reachedEnd || closed) {
+        return { type: "ready", frame: null };
+      }
+      const chain = inFlight;
+      return {
+        type: "pending",
+        wait: async () => {
+          await chain;
+          const next2 = buffer.shift();
+          fillNext();
+          if (!next2)
+            return null;
+          if (next2.resolved) {
+            return next2.resolved.done ? null : next2.resolved.value;
+          }
+          const result = await next2.promise;
+          return result.done ? null : result.value;
+        }
+      };
+    }
+    if (slot.resolved) {
+      if (slot.resolved.done) {
         return { type: "ready", frame: null };
       }
-      const frame = resolved.value;
-      advance2();
-      return { type: "ready", frame };
+      return { type: "ready", frame: slot.resolved.value };
     }
-    const captured = inFlight;
     return {
       type: "pending",
       wait: async () => {
-        const result = await captured;
-        if (captured === inFlight && !result.done) {
-          advance2();
-        }
+        const result = await slot.promise;
         return result.done ? null : result.value;
       }
     };
   };
-  const closeFrame = (frame) => {
-    frame.close?.();
-  };
   const closeIterator = async () => {
-    if (resolved) {
-      if (!resolved.done) {
-        closeFrame(resolved.value);
+    closed = true;
+    for (const slot of buffer) {
+      if (slot.resolved && !slot.resolved.done) {
+        closeFrame(slot.resolved.value);
       }
-    } else {
-      const captured = inFlight;
-      captured.then((result) => {
-        if (!result.done) {
-          closeFrame(result.value);
-        }
-      }, () => {
-        return;
-      });
     }
+    buffer.length = 0;
     await iterator.return();
   };
   return { next, closeIterator };
@@ -31374,7 +31631,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext48(Internals.SharedAudioContext);
   useLayoutEffect18(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -31536,8 +31793,7 @@ var AudioForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState41(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState41(false);
   const [playing] = Timeline.usePlayingState();
-  const timelineContext = Internals.useTimelineContext();
-  const globalPlaybackRate = timelineContext.playbackRate;
+  const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
   const sharedAudioContext = useContext212(SharedAudioContext2);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState2();
@@ -31600,7 +31856,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect44(() => {
+  useEffect43(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -31788,7 +32044,7 @@ var AudioForPreview2 = ({
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo56(() => {
+  const showShow = useMemo55(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -33651,7 +33907,7 @@ var AudioForRendering2 = ({
   const frame = useCurrentFrame();
   const absoluteFrame = Internals.useTimelinePosition();
   const videoConfig = Internals.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext310(Internals.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext311(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
@@ -33663,7 +33919,7 @@ var AudioForRendering2 = ({
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
-  const sequenceContext = useContext310(Internals.SequenceContext);
+  const sequenceContext = useContext311(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -33876,7 +34132,7 @@ var AudioInner = (props) => {
     loop: props.loop ?? false
   });
   const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState312(null);
-  const loopDisplay = useMemo312(() => getLoopDisplay({
+  const loopDisplay = useMemo311(() => getLoopDisplay({
     loop: props.loop ?? false,
     mediaDurationInSeconds,
     playbackRate: props.playbackRate ?? 1,
@@ -33893,7 +34149,7 @@ var AudioInner = (props) => {
     sequenceDurationInFrames,
     videoConfig.fps
   ]);
-  const isMedia = useMemo312(() => ({
+  const isMedia = useMemo311(() => ({
     type: "audio",
     data: basicInfo
   }), [basicInfo]);
@@ -34015,9 +34271,8 @@ var VideoForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState43(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
   const [playing] = Timeline2.usePlayingState();
-  const timelineContext = Internals.useTimelineContext();
-  const globalPlaybackRate = timelineContext.playbackRate;
-  const sharedAudioContext = useContext46(SharedAudioContext22);
+  const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
+  const sharedAudioContext = useContext47(SharedAudioContext22);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
@@ -34038,7 +34293,7 @@ var VideoForPreviewAssertedShowing = ({
   effectChainStateRef.current = effectChainState;
   const frameRef = useRef210(frame);
   frameRef.current = frame;
-  const parentSequence = useContext46(SequenceContext22);
+  const parentSequence = useContext47(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
@@ -34046,7 +34301,7 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef210(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext46(Internals.BufferingContextReact);
+  const buffering = useContext47(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -34098,7 +34353,7 @@ var VideoForPreviewAssertedShowing = ({
       cacheVideoFrame(src, canvas);
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
-  useEffect210(() => {
+  useEffect212(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -34378,7 +34633,7 @@ var VideoForRendering2 = ({
   const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const sequenceContext = useContext53(Internals.SequenceContext);
-  const id = useMemo55(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo54(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -34571,10 +34826,10 @@ var VideoForRendering2 = ({
     credentials
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo55(() => {
+  const classNameValue = useMemo54(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
-  const styleWithObjectFit = useMemo55(() => {
+  const styleWithObjectFit = useMemo54(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -34659,34 +34914,7 @@ var videoSchema = {
     description: "Playback Rate"
   },
   loop: { type: "boolean", default: false, description: "Loop" },
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Position"
-  },
-  "style.scale": {
-    type: "number",
-    min: 0.05,
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale"
-  },
-  "style.rotate": {
-    type: "rotation",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity"
-  }
+  ...Internals.sequenceStyleSchema
 };
 var InnerVideo = ({
   src,
@@ -34915,13 +35143,13 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo59, useState as useState48 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect49, useMemo as useMemo58, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
   useCallback as useCallback40,
-  useEffect as useEffect49,
+  useEffect as useEffect48,
   useRef as useRef49,
   useState as useState47
 } from "react";
@@ -35289,14 +35517,14 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 import {
   forwardRef as forwardRef35,
   useCallback as useCallback39,
-  useEffect as useEffect48,
+  useEffect as useEffect47,
   useImperativeHandle as useImperativeHandle12,
   useRef as useRef48
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect46, useRef as useRef47, useState as useState44 } from "react";
+import { useEffect as useEffect45, useRef as useRef47, useState as useState44 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -35372,14 +35600,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;
     }
@@ -35424,17 +35652,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;
     }
@@ -35467,14 +35695,14 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect47, useMemo as useMemo57, useState as useState46 } from "react";
+import { useEffect as useEffect46, useMemo as useMemo56, useState as useState46 } from "react";
 import { jsx as jsx70 } 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 = useMemo57(() => {
+  const src = useMemo56(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -35487,7 +35715,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,
@@ -35498,7 +35726,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender2(err);
     });
   }, [handle, src, continueRender, cancelRender2]);
-  useEffect47(() => {
+  useEffect46(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -35594,7 +35822,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -35611,7 +35839,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -35901,7 +36129,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/TrendingRepos.tsx
-import { useMemo as useMemo58 } from "react";
+import { useMemo as useMemo57 } from "react";
 import { jsx as jsx80, jsxs as jsxs21 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
@@ -35914,7 +36142,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo58(() => {
+  const item = useMemo57(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -36026,7 +36254,7 @@ var Cards = ({
   const positions = useRef49(getInitialPositions());
   const shouldBePositions = useRef49(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -36121,7 +36349,7 @@ var HomepageVideoComp = ({
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo59(() => {
+  const emoji = useMemo58(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -36130,7 +36358,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo59(() => {
+  const audioSrc = useMemo58(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -36139,7 +36367,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect50(() => {
+  useEffect49(() => {
     const a = prefetch(fireAudio);
     const b = prefetch(partyHornAudio);
     const c = prefetch(sadAudio);
@@ -36215,7 +36443,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.456";
+var VERSION2 = "4.0.458";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -37549,7 +37777,7 @@ var turnSvgIntoDrawable = (svg) => {
   svg.style.color = originalColor;
   return new Promise((resolve, reject) => {
     const image = new Image;
-    const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+    const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgData)}`;
     image.onload = function() {
       resolve(image);
     };
@@ -40951,7 +41179,7 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo60 } from "react";
+import { useMemo as useMemo59 } from "react";
 import { jsx as jsx95, jsxs as jsxs29, Fragment as Fragment14 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
@@ -40959,7 +41187,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 = useMemo60(() => {
+  const style2 = useMemo59(() => {
     return {
       width: size4,
       height: size4
@@ -41221,13 +41449,13 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback46, useEffect as useEffect53, useMemo as useMemo64, useRef as useRef50, useState as useState51 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect51, useMemo as useMemo61, useRef as useRef50, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo61, useState as useState50 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo60, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
-  const observer = useMemo61(() => {
+  const observer = useMemo60(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -41248,7 +41476,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect51(() => {
+  useEffect50(() => {
     updateSize();
     if (!observer) {
       return;
@@ -41304,7 +41532,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState51(false);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -41355,7 +41583,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;
@@ -41368,7 +41596,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41429,7 +41657,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect53(() => {
+  useEffect51(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -41441,7 +41669,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo64(() => {
+  const knobStyle = useMemo61(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -41455,7 +41683,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo64(() => {
+  const fillStyle = useMemo61(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -41464,7 +41692,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo64(() => {
+  const active = useMemo61(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -41499,7 +41727,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback47, useEffect as useEffect55, useRef as useRef51, useState as useState54 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect53, useRef as useRef51, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -41560,7 +41788,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef51(null);
-  useEffect55(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41573,7 +41801,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect55(() => {
+  useEffect53(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -41618,7 +41846,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React71, { useCallback as useCallback48, useEffect as useEffect56 } from "react";
+import React71, { useCallback as useCallback48, useEffect as useEffect55 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -41636,7 +41864,7 @@ var playerButtonStyle2 = {
 };
 var PlayPauseButton = ({ playerRef }) => {
   const [playing, setPlaying] = React71.useState(true);
-  useEffect56(() => {
+  useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41673,7 +41901,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React73, { useEffect as useEffect57 } from "react";
+import React73, { useEffect as useEffect56 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -41682,7 +41910,7 @@ var formatTime2 = (timeInSeconds) => {
 };
 var TimeDisplay = ({ fps, playerRef }) => {
   const [time, setTime] = React73.useState(0);
-  useEffect57(() => {
+  useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41853,7 +42081,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) => {
@@ -41861,7 +42089,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect58(() => {
+  useEffect57(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -41877,7 +42105,7 @@ var Demo = () => {
   const updateCardOrder = useCallback49((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo66(() => {
+  const props = useMemo64(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -42006,16 +42234,16 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef38, useEffect as useEffect60, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
+import { forwardRef as forwardRef38, useEffect as useEffect59, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef37, useCallback as useCallback50, useEffect as useEffect59, useRef as useRef55, useState as useState57 } from "react";
+import { forwardRef as forwardRef37, useCallback as useCallback50, useEffect as useEffect58, useRef as useRef55, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef55(null);
-  useEffect59(() => {
+  useEffect58(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -42044,12 +42272,12 @@ var VideoPlayerWithControls = forwardRef37(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect59(() => {
+  useEffect58(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect59(() => {
+  useEffect58(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -42092,7 +42320,7 @@ var VideoPlayerWithControls = forwardRef37(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect59(() => {
+  useEffect58(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -42119,7 +42347,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef56(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle14(ref, () => videoRef.current, []);
-  useEffect60(() => {
+  useEffect59(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -42232,11 +42460,11 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect61, useState as useState58 } from "react";
+import { useEffect as useEffect60, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState58([]);
-  useEffect61(() => {
+  useEffect60(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -42333,7 +42561,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect63, useState as useState59 } from "react";
+import { useEffect as useEffect61, useState as useState59 } from "react";
 import { jsx as jsx120, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -42349,7 +42577,7 @@ var icon2 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState59("/img/compose.webm");
-  useEffect63(() => {
+  useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -42496,7 +42724,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect65, useRef as useRef57, useState as useState61 } from "react";
+import { useEffect as useEffect63, useRef as useRef57, useState as useState61 } from "react";
 import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -42505,7 +42733,7 @@ var icon3 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef57(null);
   const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
-  useEffect65(() => {
+  useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -42619,7 +42847,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect66, useRef as useRef58, useState as useState64 } from "react";
+import { useEffect as useEffect65, useRef as useRef58, useState as useState64 } from "react";
 import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -42629,12 +42857,12 @@ var RealMP4Videos = () => {
   const ref = useRef58(null);
   const videoRef = useRef58(null);
   const [vid, setVid] = useState64("/img/render-progress.webm");
-  useEffect66(() => {
+  useEffect65(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect66(() => {
+  useEffect65(() => {
     const { current } = ref;
     if (!current) {
       return;