@remotion/promo-pages 4.0.498 → 4.0.500

package/dist/Homepage.js

@@ -911,7 +911,7 @@ var experts = [
   }
 ];
 // src/components/experts/ExpertsPage.tsx
-import { useMemo as useMemo41 } from "react";
+import { useMemo as useMemo42 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
@@ -984,8 +984,9 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo17, useRef as useRef8 } from "react";
-import { useEffect as useEffect4, useMemo as useMemo16, useRef as useRef7 } from "react";
+import { useMemo as useMemo16 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo18, useRef as useRef8 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
@@ -994,18 +995,18 @@ import {
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo18,
+  useMemo as useMemo19,
   useRef as useRef10,
   useState as useState7
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext31 } from "react";
-import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo20 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext20 } from "react";
 import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo21, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback13 } from "react";
 import React23, {
@@ -1013,7 +1014,7 @@ import React23, {
   useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef19,
   useState as useState14
 } from "react";
@@ -1024,14 +1025,14 @@ import React20, {
   useCallback as useCallback9,
   useContext as useContext21,
   useEffect as useEffect7,
-  useMemo as useMemo22,
+  useMemo as useMemo23,
   useRef as useRef12,
   useState as useState10
 } from "react";
-import { useMemo as useMemo21, useRef as useRef11 } from "react";
+import { useMemo as useMemo22, useRef as useRef11 } from "react";
 import { jsx as jsx19, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef13 } from "react";
-import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState11 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo24, useState as useState11 } from "react";
 import { useContext as useContext23 } from "react";
 import {
   useCallback as useCallback12,
@@ -1040,14 +1041,14 @@ import {
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef16 } from "react";
-import { useContext as useContext26, useMemo as useMemo25 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo27, useRef as useRef16 } from "react";
+import { useContext as useContext26, useMemo as useMemo26 } from "react";
 import React21, {
   useCallback as useCallback10,
   useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo24,
+  useMemo as useMemo25,
   useRef as useRef15,
   useState as useState12
 } from "react";
@@ -1056,7 +1057,7 @@ import React22 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo28 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef6,
@@ -1064,7 +1065,7 @@ import {
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useRef as useRef20
 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
@@ -1074,7 +1075,7 @@ import {
   useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef21,
   useState as useState15
 } from "react";
@@ -1085,7 +1086,7 @@ import {
   useCallback as useCallback16,
   useContext as useContext32,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef22
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -1095,7 +1096,7 @@ import {
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef23,
   useState as useState16
 } from "react";
@@ -1117,14 +1118,14 @@ import React31 from "react";
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React32 from "react";
-import { useMemo as useMemo35 } from "react";
-import { createContext as createContext24, useContext as useContext35, useMemo as useMemo34 } from "react";
+import { useMemo as useMemo36 } from "react";
+import { createContext as createContext24, useContext as useContext35, useMemo as useMemo35 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import React34 from "react";
@@ -1136,7 +1137,7 @@ import {
   useContext as useContext37,
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
@@ -1146,18 +1147,18 @@ import React38, {
   useContext as useContext38,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef27,
   useState as useState21
 } from "react";
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
-import React40, { useMemo as useMemo38 } from "react";
+import React40, { useMemo as useMemo39 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import React42, {
   forwardRef as forwardRef14,
-  useMemo as useMemo39
+  useMemo as useMemo40
 } from "react";
 import React41 from "react";
 import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
@@ -1169,7 +1170,7 @@ import {
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo40,
+  useMemo as useMemo41,
   useRef as useRef28
 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -2349,7 +2350,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.498";
+var VERSION = "4.0.500";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2391,38 +2392,6 @@ __export2(exports_timeline_position_state, {
   getFrameForComposition: () => getFrameForComposition,
   clampFrameToCompositionRange: () => clampFrameToCompositionRange
 });
-function mulberry32(a) {
-  let t = a + 1831565813;
-  t = Math.imul(t ^ t >>> 15, t | 1);
-  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-  return ((t ^ t >>> 14) >>> 0) / 4294967296;
-}
-function hashCode(str) {
-  let i = 0;
-  let chr = 0;
-  let hash = 0;
-  for (i = 0;i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
-}
-var random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
-  }
-  if (seed === null) {
-    return Math.random();
-  }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
-  }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
-  }
-  throw new Error("random() argument must be a number or a string");
-};
 var SetTimelineContext = createContext13({
   setFrame: () => {
     throw new Error("default");
@@ -2439,7 +2408,6 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const imperativePlaying = useRef3(false);
   const [playbackRate, setPlaybackRate] = useState2(1);
   const audioAndVideoTags = useRef3([]);
-  const [remotionRootId] = useState2(() => String(random(null)));
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
@@ -2474,10 +2442,9 @@ var TimelineContextProvider = ({ children, frameState }) => {
       frame,
       playing,
       imperativePlaying,
-      rootId: remotionRootId,
       audioAndVideoTags
     };
-  }, [frame, playing, remotionRootId]);
+  }, [frame, playing]);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -2866,6 +2833,29 @@ var backgroundSchema = {
     description: "Color"
   }
 };
+var svgStrokeSchema = {
+  stroke: {
+    type: "color",
+    default: "none",
+    description: "Stroke"
+  },
+  strokeWidth: {
+    type: "number",
+    default: 1,
+    description: "Stroke width",
+    min: 0,
+    step: 1,
+    hiddenFromList: false
+  }
+};
+var svgPaintSchema = {
+  fill: {
+    type: "color",
+    default: undefined,
+    description: "Fill"
+  },
+  ...svgStrokeSchema
+};
 var textContentSchema = {
   children: {
     type: "text-content",
@@ -2896,7 +2886,51 @@ var premountSchema = {
 var sequencePremountSchema = {
   ...premountSchema
 };
+var cropSchema = {
+  cropLeft: {
+    type: "number",
+    default: 0,
+    description: "Crop left",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropRight: {
+    type: "number",
+    default: 0,
+    description: "Crop right",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropTop: {
+    type: "number",
+    default: 0,
+    description: "Crop top",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropBottom: {
+    type: "number",
+    default: 0,
+    description: "Crop bottom",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  }
+};
+var sequenceCropSchema = cropSchema;
 var sequenceStyleSchema = {
+  ...sequenceCropSchema,
   ...transformSchema,
   ...backgroundSchema,
   ...borderSchema,
@@ -2985,6 +3019,54 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var clampCrop = (value) => {
+  return Math.min(1, Math.max(0, value ?? 0));
+};
+var resolveAxis = (start, end) => {
+  const resolvedStart = clampCrop(start);
+  const resolvedEnd = clampCrop(end);
+  if (resolvedStart + resolvedEnd > 1) {
+    return [0.5, 0.5];
+  }
+  return [resolvedStart, resolvedEnd];
+};
+var resolveSequenceCrop = ({
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom
+}) => {
+  const [left, right] = resolveAxis(cropLeft, cropRight);
+  const [top, bottom] = resolveAxis(cropTop, cropBottom);
+  return { left, right, top, bottom };
+};
+var getSequenceCropClipPath = ({
+  left,
+  right,
+  top,
+  bottom,
+  borderRadius
+}) => {
+  if (left === 0 && right === 0 && top === 0 && bottom === 0) {
+    return null;
+  }
+  const serializedBorderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  const rounded = serializedBorderRadius ? ` round ${serializedBorderRadius}` : "";
+  return `inset(${top * 100}% ${right * 100}% ${bottom * 100}% ${left * 100}%${rounded})`;
+};
+var validateSequenceCrop = (crop, componentName = "<Sequence />") => {
+  for (const [name, value] of Object.entries(crop)) {
+    if (value === undefined) {
+      continue;
+    }
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new TypeError(`The "${name}" prop of ${componentName} must be a finite number, but got ${String(value)}.`);
+    }
+    if (value < 0 || value > 1) {
+      throw new RangeError(`The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}.`);
+    }
+  }
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -5404,7 +5486,7 @@ var withInteractivitySchema = ({
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
+    if (!env.isStudio || env.isRendering) {
       return React14.createElement(Component, {
         ...props,
         controls: null,
@@ -5434,7 +5516,7 @@ var withInteractivitySchema = ({
       stackToOverrideMap[stack] = newOverrideId;
       return newOverrideId;
     });
-    const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
+    const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
       flatSchema,
       key,
@@ -5505,17 +5587,32 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
   outlineRef: passedRefForOutline,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext18(SequenceContext);
-  const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
+  const cropProps = { cropLeft, cropRight, cropTop, cropBottom };
+  const hasCropProp = Object.values(cropProps).some((value) => value !== undefined);
+  if (layout === "none" && hasCropProp) {
+    throw new TypeError('The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout="absolute-fill".');
+  }
+  validateSequenceCrop(cropProps);
+  const {
+    left: resolvedCropLeft,
+    right: resolvedCropRight,
+    top: resolvedCropTop,
+    bottom: resolvedCropBottom
+  } = resolveSequenceCrop(cropProps);
   if (layout === "none" && typeof other.style !== "undefined") {
     throw new TypeError('If layout="none", you may not pass a style. Passed: ' + JSON.stringify(other.style));
   }
@@ -5641,7 +5738,6 @@ var RegularSequenceRefForwardingFunction = ({
           parent: parentSequence?.id ?? null,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
-          rootId,
           showInTimeline,
           src: isMedia.src,
           getStack: () => stackRef.current,
@@ -5668,7 +5764,6 @@ var RegularSequenceRefForwardingFunction = ({
           playbackRate: isMedia.data.playbackRate,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
-          rootId,
           showInTimeline,
           src: isMedia.data.src,
           getStack: () => stackRef.current,
@@ -5695,7 +5790,6 @@ var RegularSequenceRefForwardingFunction = ({
       documentationLink: resolvedDocumentationLink,
       parent: parentSequence?.id ?? null,
       type: "sequence",
-      rootId,
       showInTimeline,
       nonce: nonce.get(),
       loopDisplay,
@@ -5721,7 +5815,6 @@ var RegularSequenceRefForwardingFunction = ({
     unregisterSequence,
     parentSequence?.id,
     actualDurationInFrames,
-    rootId,
     from,
     trimBefore,
     registeredTrimBefore,
@@ -5750,6 +5843,13 @@ var RegularSequenceRefForwardingFunction = ({
     children: content
   });
   const styleIfThere = other.layout === "none" ? undefined : other.style;
+  const cropClipPath = getSequenceCropClipPath({
+    left: resolvedCropLeft,
+    right: resolvedCropRight,
+    top: resolvedCropTop,
+    bottom: resolvedCropBottom,
+    borderRadius: styleIfThere?.borderRadius
+  });
   const sequenceRef = useCallback6((node) => {
     wrapperRefForOutline.current = node;
     if (typeof ref === "function") {
@@ -5763,9 +5863,12 @@ var RegularSequenceRefForwardingFunction = ({
       flexDirection: undefined,
       ...width ? { width } : {},
       ...height ? { height } : {},
-      ...styleIfThere ?? {}
+      ...styleIfThere ?? {},
+      ...cropClipPath ? {
+        clipPath: cropClipPath
+      } : {}
     };
-  }, [height, styleIfThere, width]);
+  }, [cropClipPath, height, styleIfThere, width]);
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
@@ -5864,6 +5967,26 @@ var SequenceWithoutFrom = withInteractivitySchema({
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
 });
+var useCropStyle = ({
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
+  style,
+  componentName
+}) => {
+  validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
+  return useMemo16(() => {
+    const cropClipPath = getSequenceCropClipPath({
+      ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
+      borderRadius: style?.borderRadius
+    });
+    if (cropClipPath === null) {
+      return style;
+    }
+    return { ...style, clipPath: cropClipPath };
+  }, [cropBottom, cropLeft, cropRight, cropTop, style]);
+};
 var calculateImageFit = (fit, imageSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -6156,7 +6279,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo16(() => ({
+  return useMemo17(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -6172,7 +6295,7 @@ var useEffectChainState = () => {
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo17(() => {
+  const sourceCanvas = useMemo18(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -6434,6 +6557,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   playbackRate: {
     type: "number",
@@ -6628,6 +6752,10 @@ var AnimatedImageInner = ({
   postmountFor,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   requestInit,
   effects = [],
   controls,
@@ -6657,6 +6785,14 @@ var AnimatedImageInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<AnimatedImage />"
+  });
   const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
@@ -6668,7 +6804,7 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style: premountingStyle ?? undefined,
+    style: croppedStyle ?? undefined,
     requestInit,
     ...canvasProps
   };
@@ -6809,7 +6945,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo18(() => {
+  const contextValue = useMemo19(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -6938,14 +7074,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo19(() => {
+  const loopDisplay = useMemo20(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo19(() => {
+  const loopContext = useMemo20(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -7317,7 +7453,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo20(() => {
+  const value = useMemo21(() => {
     return {
       durations,
       setDurations
@@ -7344,6 +7480,38 @@ var getCrossOriginValue = ({
   }
   return;
 };
+function mulberry32(a2) {
+  let t = a2 + 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+  let i = 0;
+  let chr = 0;
+  let hash = 0;
+  for (i = 0;i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0;
+  }
+  return hash;
+}
+var random = (seed, dummy) => {
+  if (dummy !== undefined) {
+    throw new TypeError("random() takes only one argument");
+  }
+  if (seed === null) {
+    return Math.random();
+  }
+  if (typeof seed === "string") {
+    return mulberry32(hashCode(seed));
+  }
+  if (typeof seed === "number") {
+    return mulberry32(seed * 10000000000);
+  }
+  throw new Error("random() argument must be a number or a string");
+};
 var playAndHandleNotAllowedError = ({
   mediaRef,
   mediaType,
@@ -7460,7 +7628,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo21(() => {
+  const context = useMemo22(() => {
     if (env.isRendering) {
       return null;
     }
@@ -7594,9 +7762,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   });
   const audioContextIsPlayingEventually = useRef12(false);
   const isResuming = useRef12(null);
-  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef12([]);
-  const audioSyncAnchorEmitter = useMemo22(() => {
+  const audioSyncAnchorEmitter = useMemo23(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -7616,7 +7784,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo22(() => {
+  const scheduleAudioNode = useMemo23(() => {
     return ({
       node,
       mediaTimestamp,
@@ -7708,7 +7876,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     audioContextIsPlayingEventually.current = false;
     return ctxAndGain.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo22(() => {
+  const audioContextValue = useMemo23(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       getAudioContextState: () => ctxAndGain?.getState() ?? null,
@@ -7890,7 +8058,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo22(() => {
+  const audioTagsValue = useMemo23(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -7905,7 +8073,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo22(() => {
+  const sharedAudioTagElements = useMemo23(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -8273,7 +8441,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo23(() => {
+  const volumes = useMemo24(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -8292,15 +8460,13 @@ var useBasicMediaInTimeline = ({
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
-  const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo23(() => {
+  const memoizedResult = useMemo24(() => {
     return {
       volumes,
       duration,
       doesVolumeChange,
       nonce,
-      rootId,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
       startMediaFrom,
       src,
@@ -8311,7 +8477,6 @@ var useBasicMediaInTimeline = ({
     duration,
     doesVolumeChange,
     nonce,
-    rootId,
     displayName,
     src,
     startMediaFrom,
@@ -8340,7 +8505,7 @@ var useMediaInTimeline = ({
   const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
+  const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -8374,7 +8539,6 @@ var useMediaInTimeline = ({
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       documentationLink,
-      rootId,
       volume: volumes,
       showInTimeline: true,
       nonce: nonce.get(),
@@ -8415,7 +8579,6 @@ var useMediaInTimeline = ({
     postmountDisplay,
     loopDisplay,
     documentationLink,
-    rootId,
     finalDisplayName,
     isStudio,
     refForOutline
@@ -8502,7 +8665,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo24(() => {
+  return useMemo25(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -8537,7 +8700,7 @@ var useBufferState = () => {
   const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo25(() => ({
+  return useMemo26(() => ({
     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");
@@ -8645,7 +8808,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo26(() => {
+  return useMemo27(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -9316,14 +9479,14 @@ var SetMediaVolumeContext = createContext22({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext28(MediaVolumeContext);
   const { setMediaVolume } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
   const { playerMuted } = useContext28(MediaVolumeContext);
   const { setPlayerMuted } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -9390,7 +9553,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo28(() => {
+  const propsToPass = useMemo29(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -9407,7 +9570,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9540,7 +9703,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const sequenceContext = useContext30(SequenceContext);
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9814,7 +9977,8 @@ var solidSchema = {
   },
   ...transformSchema,
   ...backgroundSchema,
-  ...borderSchema
+  ...borderSchema,
+  ...cropSchema
 };
 var SolidInner = ({
   color,
@@ -9836,7 +10000,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo30(() => {
+  const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9904,7 +10068,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo30(() => {
+  const canvasStyle = useMemo31(() => {
     return {
       width,
       height,
@@ -9935,6 +10099,10 @@ var SolidOuter = forwardRef8(({
   hidden,
   showInTimeline,
   pixelDensity,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...props2
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
@@ -9942,6 +10110,14 @@ var SolidOuter = forwardRef8(({
   useImperativeHandle6(ref, () => {
     return actualRef.current;
   }, []);
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<Solid />"
+  });
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
@@ -9963,7 +10139,7 @@ var SolidOuter = forwardRef8(({
       height,
       width,
       className,
-      style,
+      style: croppedStyle ?? undefined,
       effects,
       pixelDensity
     })
@@ -9992,6 +10168,17 @@ var isHtmlInCanvasSupported = () => {
   return cachedSupport;
 };
 var HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
+var MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 152;
+var getChromeMajorVersion = () => {
+  if (typeof navigator === "undefined") {
+    return null;
+  }
+  const match = navigator.userAgent.match(/\b(?:HeadlessChrome|Chrome)\/(\d+)/);
+  if (!match) {
+    return null;
+  }
+  return Number(match[1]);
+};
 function assertHtmlInCanvasDimensions(width, height) {
   if (typeof width !== "number" || typeof height !== "number") {
     throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -10055,6 +10242,10 @@ var HtmlInCanvasContent = forwardRef9(({
 }, ref) => {
   const ancestor = useContext32(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
+  const chromeMajorVersion = getChromeMajorVersion();
+  if (ancestor && chromeMajorVersion !== null && chromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS) {
+    throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.`);
+  }
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
@@ -10273,20 +10464,20 @@ var HtmlInCanvasContent = forwardRef9(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
-  const innerStyle = useMemo31(() => {
+  const innerStyle = useMemo32(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo31(() => {
+  const canvasStyle = useMemo32(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  const ancestorValue = useMemo31(() => {
+  const ancestorValue = useMemo32(() => {
     return {
       requestParentPaint: () => {
         canvas2dRef.current?.requestPaint?.();
@@ -10319,6 +10510,10 @@ var HtmlInCanvasInner = forwardRef9(({
   pixelDensity,
   controls,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   durationInFrames,
   name,
   ...sequenceProps
@@ -10333,6 +10528,14 @@ var HtmlInCanvasInner = forwardRef9(({
       ref.current = node;
     }
   }, [ref]);
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<HtmlInCanvas />"
+  });
   return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames,
     name: name ?? "<HtmlInCanvas>",
@@ -10351,7 +10554,7 @@ var HtmlInCanvasInner = forwardRef9(({
       onInit,
       pixelDensity,
       controls,
-      style,
+      style: croppedStyle ?? undefined,
       children
     })
   });
@@ -10370,7 +10573,8 @@ var htmlInCanvasSchema = {
   },
   ...transformSchema,
   ...backgroundSchema,
-  ...borderSchema
+  ...borderSchema,
+  ...cropSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -10392,6 +10596,7 @@ function truncateSrcForLabel(src) {
 }
 var canvasImageSchema = {
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   fit: {
     type: "enum",
@@ -10522,7 +10727,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo32(() => {
+  const sourceCanvas = useMemo33(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10736,9 +10941,14 @@ var CanvasImageInner = forwardRef10(({
   hidden,
   name,
   showInTimeline,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   stack,
   controls,
   _remotionInternalDocumentationLink,
+  _remotionInternalCropComponentName,
   outlineRef,
   ...canvasProps
 }, ref) => {
@@ -10768,6 +10978,14 @@ var CanvasImageInner = forwardRef10(({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: _remotionInternalCropComponentName ?? "<CanvasImage />"
+  });
   return /* @__PURE__ */ jsx26(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
@@ -10799,7 +11017,7 @@ var CanvasImageInner = forwardRef10(({
         effects,
         controls,
         className,
-        style: premountingStyle ?? undefined,
+        style: croppedStyle ?? undefined,
         id,
         onError,
         pauseWhenLoading,
@@ -11030,6 +11248,10 @@ var NativeImgInner = ({
   style,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -11055,6 +11277,14 @@ var NativeImgInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<Img />"
+  });
   return /* @__PURE__ */ jsx28(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
@@ -11079,7 +11309,7 @@ var NativeImgInner = ({
       children: /* @__PURE__ */ jsx28(ImgContent, {
         src,
         refForOutline,
-        style: premountingStyle ?? undefined,
+        style: croppedStyle ?? undefined,
         ...props2
       })
     })
@@ -11094,6 +11324,7 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   ...transformSchema,
   ...backgroundSchema,
@@ -11162,6 +11393,10 @@ var ImgInner = ({
   height,
   className,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   id,
   pauseWhenLoading,
   maxRetries,
@@ -11193,6 +11428,10 @@ var ImgInner = ({
       height,
       className,
       style,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
       id,
       pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
@@ -11222,6 +11461,10 @@ var ImgInner = ({
     effects,
     className,
     style,
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
     id,
     pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
@@ -11240,6 +11483,7 @@ var ImgInner = ({
     showInTimeline,
     stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
+    _remotionInternalCropComponentName: "<Img />",
     controls,
     outlineRef: refForOutline,
     ...canvasProps
@@ -11288,9 +11532,22 @@ var interactiveTextElementSchema = {
 };
 var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
+  ...svgPaintSchema,
   ...textSchema,
   ...textContentSchema
 };
+var interactiveSvgElementSchema = {
+  ...interactiveElementSchema,
+  ...svgPaintSchema
+};
+var interactiveSvgStrokeElementSchema = {
+  ...interactiveElementSchema,
+  ...svgStrokeSchema
+};
+var interactiveSvgRootElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...svgPaintSchema
+};
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
     ref(value);
@@ -11358,8 +11615,11 @@ var makeInteractiveElement = (tag, displayName, schema) => {
 var makeInteractiveTextElement = (tag, displayName) => {
   return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
 };
-var makeInteractiveNonTextElement = (tag, displayName) => {
-  return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+var makeInteractiveSvgElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveSvgElementSchema);
+};
+var makeInteractiveSvgStrokeElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveSvgStrokeElementSchema);
 };
 var Interactive = {
   baseSchema,
@@ -11367,6 +11627,9 @@ var Interactive = {
   textSchema,
   backgroundSchema,
   borderSchema,
+  cropSchema,
+  svgPaintSchema,
+  svgStrokeSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -11375,13 +11638,13 @@ var Interactive = {
   Article: makeInteractiveTextElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveTextElement("aside", "<Interactive.Aside>"),
   Button: makeInteractiveTextElement("button", "<Interactive.Button>"),
-  Circle: makeInteractiveNonTextElement("circle", "<Interactive.Circle>"),
+  Circle: makeInteractiveSvgElement("circle", "<Interactive.Circle>"),
   Code: makeInteractiveTextElement("code", "<Interactive.Code>"),
   Div: makeInteractiveTextElement("div", "<Interactive.Div>"),
-  Ellipse: makeInteractiveNonTextElement("ellipse", "<Interactive.Ellipse>"),
+  Ellipse: makeInteractiveSvgElement("ellipse", "<Interactive.Ellipse>"),
   Em: makeInteractiveTextElement("em", "<Interactive.Em>"),
   Footer: makeInteractiveTextElement("footer", "<Interactive.Footer>"),
-  G: makeInteractiveNonTextElement("g", "<Interactive.G>"),
+  G: makeInteractiveSvgElement("g", "<Interactive.G>"),
   H1: makeInteractiveTextElement("h1", "<Interactive.H1>"),
   H2: makeInteractiveTextElement("h2", "<Interactive.H2>"),
   H3: makeInteractiveTextElement("h3", "<Interactive.H3>"),
@@ -11391,19 +11654,19 @@ var Interactive = {
   Header: makeInteractiveTextElement("header", "<Interactive.Header>"),
   Label: makeInteractiveTextElement("label", "<Interactive.Label>"),
   Li: makeInteractiveTextElement("li", "<Interactive.Li>"),
-  Line: makeInteractiveNonTextElement("line", "<Interactive.Line>"),
+  Line: makeInteractiveSvgStrokeElement("line", "<Interactive.Line>"),
   Main: makeInteractiveTextElement("main", "<Interactive.Main>"),
   Nav: makeInteractiveTextElement("nav", "<Interactive.Nav>"),
   Ol: makeInteractiveTextElement("ol", "<Interactive.Ol>"),
   P: makeInteractiveTextElement("p", "<Interactive.P>"),
-  Path: makeInteractiveNonTextElement("path", "<Interactive.Path>"),
+  Path: makeInteractiveSvgElement("path", "<Interactive.Path>"),
   Pre: makeInteractiveTextElement("pre", "<Interactive.Pre>"),
-  Rect: makeInteractiveNonTextElement("rect", "<Interactive.Rect>"),
+  Rect: makeInteractiveSvgElement("rect", "<Interactive.Rect>"),
   Section: makeInteractiveTextElement("section", "<Interactive.Section>"),
   Small: makeInteractiveTextElement("small", "<Interactive.Small>"),
   Span: makeInteractiveTextElement("span", "<Interactive.Span>"),
   Strong: makeInteractiveTextElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveBorderElementSchema),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveSvgRootElementSchema),
   Text: makeInteractiveElement("text", "<Interactive.Text>", interactiveSvgTextElementSchema),
   Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
@@ -11491,7 +11754,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo33(() => {
+  const compositionManagerSetters = useMemo34(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -11507,7 +11770,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo33(() => {
+  const compositionManagerContextValue = useMemo34(() => {
     return {
       compositions,
       folders,
@@ -11629,7 +11892,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
@@ -11645,13 +11908,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo35(() => {
+  const nonceContext = useMemo36(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo35(() => {
+  const logging = useMemo36(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
@@ -11958,7 +12221,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo37(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12013,14 +12276,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo36(() => {
+  const currentTime = useMemo37(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo36(() => {
+  const actualSrc = useMemo37(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -12108,7 +12371,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo36(() => {
+  const className = useMemo37(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback22((img) => {
@@ -12177,7 +12440,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef27(null);
-  const sharedSource = useMemo37(() => {
+  const sharedSource = useMemo38(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -12380,7 +12643,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo37(() => {
+  const actualStyle = useMemo38(() => {
     return {
       ...style
     };
@@ -12577,7 +12840,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React40.useContext(BufferingContextReact);
   const logLevelContext = React40.useContext(LogLevelContext);
-  return useMemo38(() => ({
+  return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -12686,6 +12949,7 @@ var Internals = {
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  sequenceCropSchema,
   textSchema,
   transformSchema,
   premountSchema,
@@ -12809,7 +13073,9 @@ var Internals = {
   hiddenField,
   durationInFramesField,
   freezeField,
-  fromField
+  fromField,
+  resolveSequenceCrop,
+  useCropStyle
 };
 var flattenChildren = (children) => {
   const childrenArray = React41.Children.toArray(children);
@@ -12879,7 +13145,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo39(() => {
+  const childrenValue = useMemo40(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -13215,7 +13481,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
-  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -13883,7 +14149,7 @@ var ExpertCard = ({ expert, Link }) => {
   });
 };
 var ExpertsPageContent = ({ Link }) => {
-  const expertsInRandomOrder = useMemo41(() => {
+  const expertsInRandomOrder = useMemo42(() => {
     if (typeof window === "undefined") {
       return [];
     }
@@ -13981,7 +14247,7 @@ var ExpertsPageContent = ({ Link }) => {
   });
 };
 // src/components/homepage/Pricing.tsx
-import { useMemo as useMemo54 } from "react";
+import { useMemo as useMemo55 } from "react";
 
 // ../design/dist/esm/index.mjs
 import * as React24 from "react";
@@ -15329,7 +15595,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo44, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo45, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -18095,7 +18361,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React3, { useCallback as useCallback26, useMemo as useMemo43, useRef as useRef29 } from "react";
+import React3, { useCallback as useCallback26, useMemo as useMemo44, useRef as useRef29 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -18277,13 +18543,13 @@ var RenderSvg = ({
   stack,
   ...props
 }) => {
-  const actualStyle = useMemo43(() => {
+  const actualStyle = useMemo44(() => {
     return {
       overflow: "visible",
       ...style ?? {}
     };
   }, [style]);
-  const actualPathStyle = useMemo43(() => {
+  const actualPathStyle = useMemo44(() => {
     return {
       transformBox: "fill-box",
       ...pathStyle ?? {}
@@ -21264,7 +21530,7 @@ var useHoverTransforms = (ref, disabled) => {
     progress: 0,
     isActive: false
   });
-  const eventTarget = useMemo44(() => new EventTarget, []);
+  const eventTarget = useMemo45(() => new EventTarget, []);
   useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
@@ -27711,7 +27977,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React53, { useCallback as useCallback38, useMemo as useMemo53 } from "react";
+import React53, { useCallback as useCallback38, useMemo as useMemo54 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -29198,11 +29464,11 @@ var FreePricing = () => {
         checked: true
       }),
       /* @__PURE__ */ jsx49(PricingBulletPoint, {
-        text: "Commercial use allowed",
+        text: "All features included",
         checked: true
       }),
       /* @__PURE__ */ jsx49(PricingBulletPoint, {
-        text: "Unlimited use",
+        text: "Unlimited commercial use",
         checked: true
       }),
       /* @__PURE__ */ jsx49(PricingBulletPoint, {
@@ -29368,14 +29634,14 @@ var CompanyPricing = () => {
   }, []);
   const creatorsPrice = creatorsSelected ? devSeatCount * SEAT_PRICE : 0;
   const automatorsPrice = automatorsSelected ? Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE : 0;
-  const totalPrice = useMemo53(() => {
+  const totalPrice = useMemo54(() => {
     const basePrice = creatorsPrice + automatorsPrice;
     if (automatorsSelected) {
       return Math.max(100, basePrice);
     }
     return basePrice;
   }, [creatorsPrice, automatorsPrice, automatorsSelected]);
-  const totalPriceString = useMemo53(() => {
+  const totalPriceString = useMemo54(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
@@ -29605,13 +29871,13 @@ var Pricing = ({
   licenseHref = "https://github.com/remotion-dev/remotion/blob/main/LICENSE.md",
   termsHref = "/docs/license/terms"
 }) => {
-  const faqLinkTarget = useMemo54(() => {
+  const faqLinkTarget = useMemo55(() => {
     return faqHref.startsWith("http") ? "_blank" : undefined;
   }, [faqHref]);
-  const licenseLinkTarget = useMemo54(() => {
+  const licenseLinkTarget = useMemo55(() => {
     return licenseHref.startsWith("http") ? "_blank" : undefined;
   }, [licenseHref]);
-  const termsLinkTarget = useMemo54(() => {
+  const termsLinkTarget = useMemo55(() => {
     return termsHref.startsWith("http") ? "_blank" : undefined;
   }, [termsHref]);
   return /* @__PURE__ */ jsxs11("div", {
@@ -29666,358 +29932,9 @@ var Pricing = ({
   });
 };
 
-// src/components/homepage/VideoAppsTitle.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
-var SectionTitle = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx51("div", {
-    className: "text-center",
-    children: /* @__PURE__ */ jsx51("h2", {
-      className: "fontbrand text-4xl",
-      children
-    })
-  });
-};
-
-// src/components/homepage/AutomationsSection.tsx
-import { jsx as jsx54, jsxs as jsxs12, Fragment as Fragment12 } from "react/jsx-runtime";
-var appPipeline = [
-  {
-    step: "01",
-    title: "Design a template",
-    description: "Start in Remotion Studio and build a reusable composition for your video workflow.",
-    link: "/docs/studio",
-    buttonText: "Remotion Studio",
-    illustration: "studio"
-  },
-  {
-    step: "02",
-    title: "Build an app around it",
-    description: "Expose props for text, images, colors, timing, and layouts to power editors, generators, and automations.",
-    link: "/docs/parameterized-rendering",
-    buttonText: "Parameterized rendering",
-    illustration: "preview"
-  },
-  {
-    step: "03",
-    title: "Preview and render",
-    description: /* @__PURE__ */ jsxs12(Fragment12, {
-      children: [
-        "Use the",
-        " ",
-        /* @__PURE__ */ jsx54("a", {
-          href: "/player",
-          className: "font-semibold text-text no-underline",
-          children: "Player"
-        }),
-        " ",
-        "for interactive previews, then render locally, on servers, serverlessly, or in-browser."
-      ]
-    }),
-    link: "/docs/render",
-    buttonText: "Rendering options",
-    illustration: "render"
-  }
-];
-var launchOptions = [
-  {
-    title: "Start from a template",
-    description: "Use starter projects for SaaS workflows, social videos, slideshows, captions, and repeatable video products.",
-    link: "/templates",
-    buttonText: "Browse templates"
-  },
-  {
-    title: "Build a video editor",
-    description: "Editor Starter is an official paid template for a timeline, canvas, asset uploads, and rendering.",
-    link: "/docs/editor-starter",
-    buttonText: "Editor Starter"
-  },
-  {
-    title: "See what teams ship",
-    description: "Audiograms, captioning tools, year-in-review generators, creative editors, and other products built with Remotion.",
-    link: "/showcase",
-    buttonText: "Showcase"
-  }
-];
-var icon2 = {
-  height: 16,
-  marginLeft: 10
-};
-var Arrow3 = () => /* @__PURE__ */ jsx54("svg", {
-  style: icon2,
-  viewBox: "0 0 448 512",
-  children: /* @__PURE__ */ jsx54("path", {
-    fill: "currentColor",
-    d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
-  })
-});
-var InlineLink = ({ href, children }) => {
-  return /* @__PURE__ */ jsxs12("a", {
-    href,
-    className: "mt-3 inline-flex flex-row items-center font-brand text-base font-semibold text-text no-underline sm:text-sm",
-    children: [
-      children,
-      /* @__PURE__ */ jsx54(Arrow3, {})
-    ]
-  });
-};
-var illustrationFrame = "relative mb-5 flex h-40 w-full items-center justify-center px-3";
-var StudioIllustration = () => {
-  return /* @__PURE__ */ jsx54("div", {
-    className: illustrationFrame,
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs12("div", {
-      className: "relative w-full max-w-[220px] rounded-md bg-pane px-4 py-6 fontbrand",
-      children: [
-        /* @__PURE__ */ jsxs12("div", {
-          className: "absolute bottom-5 left-1/2 top-3 flex -translate-x-1/2 flex-col items-center",
-          children: [
-            /* @__PURE__ */ jsx54("div", {
-              className: "h-2 w-1 rounded-full bg-brand"
-            }),
-            /* @__PURE__ */ jsx54("div", {
-              className: "w-px flex-1 bg-brand/50"
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs12("div", {
-          className: "space-y-4",
-          children: [
-            /* @__PURE__ */ jsxs12("div", {
-              className: "grid grid-cols-[28px_1fr] items-center gap-3",
-              children: [
-                /* @__PURE__ */ jsx54("div", {
-                  className: "h-2 rounded-full bg-muted"
-                }),
-                /* @__PURE__ */ jsx54("div", {
-                  className: "h-3 rounded-full bg-brand"
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsxs12("div", {
-              className: "grid grid-cols-[28px_1fr] items-center gap-3",
-              children: [
-                /* @__PURE__ */ jsx54("div", {
-                  className: "h-2 rounded-full bg-muted"
-                }),
-                /* @__PURE__ */ jsx54("div", {
-                  className: "ml-8 h-3 rounded-full bg-muted"
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsxs12("div", {
-              className: "grid grid-cols-[28px_1fr] items-center gap-3",
-              children: [
-                /* @__PURE__ */ jsx54("div", {
-                  className: "h-2 rounded-full bg-muted"
-                }),
-                /* @__PURE__ */ jsx54("div", {
-                  className: "mr-10 h-3 rounded-full bg-muted"
-                })
-              ]
-            })
-          ]
-        })
-      ]
-    })
-  });
-};
-var PropsIllustration = () => {
-  return /* @__PURE__ */ jsx54("div", {
-    className: illustrationFrame,
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs12("div", {
-      className: "flex h-[124px] w-full max-w-[240px] flex-col justify-center whitespace-nowrap rounded-md bg-pane p-4 text-left font-mono text-base leading-6 text-text sm:text-sm sm:leading-5",
-      children: [
-        /* @__PURE__ */ jsx54("div", {
-          className: "text-brand",
-          children: "{"
-        }),
-        /* @__PURE__ */ jsx54("div", {
-          className: "pl-4",
-          children: "title: 'Sale',"
-        }),
-        /* @__PURE__ */ jsx54("div", {
-          className: "pl-4",
-          children: "color: '#0B84F3',"
-        }),
-        /* @__PURE__ */ jsx54("div", {
-          className: "pl-4",
-          children: "items: 42"
-        }),
-        /* @__PURE__ */ jsx54("div", {
-          className: "text-brand",
-          children: "}"
-        })
-      ]
-    })
-  });
-};
-var PreviewIllustration = () => {
-  return /* @__PURE__ */ jsx54("div", {
-    className: illustrationFrame,
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs12("div", {
-      className: "w-full max-w-[240px] rounded-md border border-solid border-muted bg-card-bg p-2 fontbrand",
-      children: [
-        /* @__PURE__ */ jsx54("div", {
-          className: "relative flex h-[92px] items-center justify-center rounded-sm border border-solid border-muted bg-pane text-brand",
-          children: /* @__PURE__ */ jsxs12("svg", {
-            className: "h-14 w-14 text-brand",
-            viewBox: "-11.5 -10.23174 23 20.46348",
-            fill: "none",
-            children: [
-              /* @__PURE__ */ jsx54("circle", {
-                cx: "0",
-                cy: "0",
-                r: "2.05",
-                fill: "currentColor"
-              }),
-              /* @__PURE__ */ jsx54("ellipse", {
-                cx: "0",
-                cy: "0",
-                rx: "11",
-                ry: "4.2",
-                stroke: "currentColor",
-                strokeWidth: "1"
-              }),
-              /* @__PURE__ */ jsx54("ellipse", {
-                cx: "0",
-                cy: "0",
-                rx: "11",
-                ry: "4.2",
-                stroke: "currentColor",
-                strokeWidth: "1",
-                transform: "rotate(60)"
-              }),
-              /* @__PURE__ */ jsx54("ellipse", {
-                cx: "0",
-                cy: "0",
-                rx: "11",
-                ry: "4.2",
-                stroke: "currentColor",
-                strokeWidth: "1",
-                transform: "rotate(120)"
-              })
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsxs12("div", {
-          className: "mt-2 flex items-center gap-2",
-          children: [
-            /* @__PURE__ */ jsx54("div", {
-              className: "fontbrand text-xs font-semibold text-text",
-              children: "0:12"
-            }),
-            /* @__PURE__ */ jsx54("div", {
-              className: "h-1.5 flex-1 rounded-full bg-muted",
-              children: /* @__PURE__ */ jsx54("div", {
-                className: "h-full w-2/5 rounded-full bg-brand"
-              })
-            }),
-            /* @__PURE__ */ jsx54("div", {
-              className: "fontbrand text-xs font-semibold text-text",
-              children: "0:30"
-            })
-          ]
-        })
-      ]
-    })
-  });
-};
-var RenderIllustration = () => {
-  return /* @__PURE__ */ jsx54("div", {
-    className: illustrationFrame,
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx54("div", {
-      className: "grid w-full max-w-[240px] grid-cols-2 gap-2 fontbrand text-base font-semibold",
-      children: [".mp4", ".webm", ".gif", ".png"].map((format) => /* @__PURE__ */ jsx54("div", {
-        className: "rounded-md bg-pane px-4 py-3 text-center text-brand",
-        children: format
-      }, format))
-    })
-  });
-};
-var PipelineIllustration = ({ kind }) => {
-  if (kind === "studio") {
-    return /* @__PURE__ */ jsx54(StudioIllustration, {});
-  }
-  if (kind === "props") {
-    return /* @__PURE__ */ jsx54(PropsIllustration, {});
-  }
-  if (kind === "preview") {
-    return /* @__PURE__ */ jsx54(PreviewIllustration, {});
-  }
-  return /* @__PURE__ */ jsx54(RenderIllustration, {});
-};
-var AutomationsSection = () => {
-  return /* @__PURE__ */ jsxs12("div", {
-    children: [
-      /* @__PURE__ */ jsx54(SectionTitle, {
-        children: "Create video apps and automations"
-      }),
-      /* @__PURE__ */ jsx54("div", {
-        className: "mx-auto mb-8 mt-3 max-w-[70ch] text-center fontbrand text-base leading-relaxed text-muted text-pretty",
-        children: "Design a reusable video template in Remotion, expose props for app UIs and automations, then preview and render it wherever your workflow runs."
-      }),
-      /* @__PURE__ */ jsx54("div", {
-        className: "py-4",
-        children: /* @__PURE__ */ jsx54("dl", {
-          className: "grid grid-cols-1 justify-items-stretch gap-5 lg:grid-cols-3 lg:justify-items-center lg:gap-0",
-          children: appPipeline.map((item) => /* @__PURE__ */ jsxs12("div", {
-            className: "flex w-full flex-col rounded-lg border border-solid border-text/10 bg-card-bg px-4 py-5 text-left sm:px-5 lg:max-w-[300px] lg:rounded-none lg:border-y-0 lg:border-r-0 lg:border-l lg:bg-transparent lg:px-6 lg:py-0 lg:first:border-l-0",
-            children: [
-              /* @__PURE__ */ jsx54(PipelineIllustration, {
-                kind: item.illustration
-              }),
-              /* @__PURE__ */ jsxs12("div", {
-                className: "mb-2 flex items-center gap-2.5",
-                children: [
-                  /* @__PURE__ */ jsx54("div", {
-                    className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-pane fontbrand text-xs font-semibold text-brand",
-                    children: item.step
-                  }),
-                  /* @__PURE__ */ jsx54("dt", {
-                    className: "fontbrand text-xl font-semibold tracking-tight text-text text-balance",
-                    children: item.title
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx54("dd", {
-                className: "m-0 mt-1 flex-1 fontbrand text-base leading-relaxed text-muted text-pretty sm:text-sm",
-                children: item.description
-              }),
-              /* @__PURE__ */ jsx54(InlineLink, {
-                href: item.link,
-                children: item.buttonText
-              })
-            ]
-          }, item.step))
-        })
-      }),
-      /* @__PURE__ */ jsxs12("div", {
-        className: "mt-8 flex flex-wrap justify-center gap-x-5 gap-y-2 fontbrand text-base text-muted sm:text-sm",
-        children: [
-          /* @__PURE__ */ jsx54("span", {
-            children: "Explore:"
-          }),
-          launchOptions.map((item) => /* @__PURE__ */ jsx54("a", {
-            href: item.link,
-            className: "font-semibold text-text no-underline",
-            title: item.description,
-            children: item.buttonText
-          }, item.link))
-        ]
-      })
-    ]
-  });
-};
-var AutomationsSection_default = AutomationsSection;
-
 // src/components/homepage/BackgroundAnimation.tsx
 import { useEffect as useEffect40 } from "react";
-import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs12 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
 var ry = 0.45;
@@ -30047,9 +29964,9 @@ var BackgroundAnimation = () => {
     _style.innerHTML = css;
     document.head.appendChild(_style);
   }, [css]);
-  return /* @__PURE__ */ jsx56("div", {
+  return /* @__PURE__ */ jsx51("div", {
     className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none",
-    children: /* @__PURE__ */ jsxs13("svg", {
+    children: /* @__PURE__ */ jsxs12("svg", {
       className: "translate-y-[-30%] lg:translate-y-[-50%]",
       viewBox: "0 0 1 1",
       style: {
@@ -30057,7 +29974,7 @@ var BackgroundAnimation = () => {
         position: "absolute"
       },
       children: [
-        /* @__PURE__ */ jsx56("path", {
+        /* @__PURE__ */ jsx51("path", {
           d: d2,
           fill: "none",
           stroke: "var(--ifm-color-primary)",
@@ -30070,7 +29987,7 @@ var BackgroundAnimation = () => {
             strokeDasharray: `${length2 * 0.2} ${length2 * 0.8}`
           }
         }),
-        /* @__PURE__ */ jsx56("path", {
+        /* @__PURE__ */ jsx51("path", {
           d: d2,
           fill: "none",
           stroke: "var(--ifm-color-primary)",
@@ -30084,7 +30001,7 @@ var BackgroundAnimation = () => {
             strokeDasharray: `${length2 * 0.2} ${length2 * 0.8}`
           }
         }),
-        /* @__PURE__ */ jsx56("path", {
+        /* @__PURE__ */ jsx51("path", {
           d: d2,
           fill: "none",
           stroke: "var(--ifm-color-primary)",
@@ -30104,7 +30021,7 @@ var BackgroundAnimation = () => {
 };
 
 // src/components/homepage/CommunityStatsItems.tsx
-import { jsx as jsx57, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs13 } from "react/jsx-runtime";
 var StatItemContent = ({
   content,
   width,
@@ -30113,7 +30030,7 @@ var StatItemContent = ({
   height = "auto",
   fontSize,
   fontWeight
-}) => /* @__PURE__ */ jsx57("div", {
+}) => /* @__PURE__ */ jsx54("div", {
   style: {
     width,
     minWidth,
@@ -30131,36 +30048,36 @@ var StatItemContent = ({
   children: content
 });
 var Pill = ({ children, className }) => {
-  return /* @__PURE__ */ jsx57("div", {
+  return /* @__PURE__ */ jsx54("div", {
     className: cn2(className, "card leading-none flex flex-wrap justify-center items-center min-w-[200px] min-h-[80px] max-h-[110px] flex-1 p-0"),
     children
   });
 };
 var InstallsPerMonth = () => {
-  return /* @__PURE__ */ jsxs14(Pill, {
+  return /* @__PURE__ */ jsxs13(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs13("div", {
         style: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
         children: [
-          /* @__PURE__ */ jsx57(StatItemContent, {
+          /* @__PURE__ */ jsx54(StatItemContent, {
             content: "5M+",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
           }),
-          /* @__PURE__ */ jsx57(StatItemContent, {
-            content: /* @__PURE__ */ jsx57("svg", {
+          /* @__PURE__ */ jsx54(StatItemContent, {
+            content: /* @__PURE__ */ jsx54("svg", {
               width: "40",
               height: "40",
               viewBox: "0 0 25 25",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx57("path", {
+              children: /* @__PURE__ */ jsx54("path", {
                 d: "M12.6367 2.47534C12.5488 2.44116 12.4512 2.44116 12.3584 2.47534L3.10547 5.98608L12.5 9.67749L21.8945 5.98608L12.6367 2.47534ZM2.34375 18.4519C2.34375 18.613 2.44629 18.7595 2.59766 18.8181L11.3281 22.1287V11.738L2.34375 8.20776V18.4519ZM13.6719 22.1287L22.4023 18.8181C22.5537 18.7595 22.6562 18.613 22.6562 18.4519V8.20776L13.6719 11.738V22.1287ZM11.5283 0.287842C12.1533 0.048584 12.8418 0.048584 13.4668 0.287842L23.2324 3.9939C24.2969 4.39429 25 5.40991 25 6.54761V18.4519C25 19.5896 24.2969 20.6052 23.2373 21.0105L13.4717 24.7166C12.8467 24.9558 12.1582 24.9558 11.5332 24.7166L1.76758 21.0105C0.703125 20.6052 0 19.5896 0 18.4519V6.54761C0 5.40991 0.703125 4.39429 1.7627 3.98901L11.5283 0.282959V0.287842Z",
                 fill: "var(--text-color)"
               })
@@ -30169,7 +30086,7 @@ var InstallsPerMonth = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx57(StatItemContent, {
+      /* @__PURE__ */ jsx54(StatItemContent, {
         content: "installs per month",
         width: "75%",
         fontSize: "1.0rem",
@@ -30179,27 +30096,27 @@ var InstallsPerMonth = () => {
   });
 };
 var PagesOfDocs = () => {
-  return /* @__PURE__ */ jsxs14(Pill, {
+  return /* @__PURE__ */ jsxs13(Pill, {
     className: "flex-col",
     children: [
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs13("div", {
         style: { display: "flex", alignItems: "center", gap: 8 },
         children: [
-          /* @__PURE__ */ jsx57(StatItemContent, {
-            content: /* @__PURE__ */ jsx57("svg", {
+          /* @__PURE__ */ jsx54(StatItemContent, {
+            content: /* @__PURE__ */ jsx54("svg", {
               width: "28",
               height: "40",
               viewBox: "0 0 18 21",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx57("path", {
+              children: /* @__PURE__ */ jsx54("path", {
                 d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z",
                 fill: "var(--text-color)"
               })
             }),
             width: "32px"
           }),
-          /* @__PURE__ */ jsx57(StatItemContent, {
+          /* @__PURE__ */ jsx54(StatItemContent, {
             content: "1000",
             width: "112px",
             fontSize: "2.5rem",
@@ -30207,7 +30124,7 @@ var PagesOfDocs = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx57(StatItemContent, {
+      /* @__PURE__ */ jsx54(StatItemContent, {
         content: "pages of docs",
         width: "125px",
         fontSize: "1.0rem",
@@ -30216,16 +30133,16 @@ var PagesOfDocs = () => {
     ]
   });
 };
-var TemplatesAndExamples = () => /* @__PURE__ */ jsxs14(Pill, {
+var TemplatesAndExamples = () => /* @__PURE__ */ jsxs13(Pill, {
   className: "w-[30%] flex items-center flex-row",
   children: [
-    /* @__PURE__ */ jsx57(StatItemContent, {
+    /* @__PURE__ */ jsx54(StatItemContent, {
       content: "35",
       width: "60px",
       fontSize: "2.7rem",
       fontWeight: "bold"
     }),
-    /* @__PURE__ */ jsx57(StatItemContent, {
+    /* @__PURE__ */ jsx54(StatItemContent, {
       content: "templates & examples",
       width: "135px",
       fontSize: "1.35rem",
@@ -30234,27 +30151,27 @@ var TemplatesAndExamples = () => /* @__PURE__ */ jsxs14(Pill, {
   ]
 });
 var GitHubStars = () => {
-  return /* @__PURE__ */ jsxs14(Pill, {
+  return /* @__PURE__ */ jsxs13(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs13("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsx57(StatItemContent, {
-            content: /* @__PURE__ */ jsx57("svg", {
+          /* @__PURE__ */ jsx54(StatItemContent, {
+            content: /* @__PURE__ */ jsx54("svg", {
               width: "40",
               height: "40",
               viewBox: "0 0 26 24",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx57("path", {
+              children: /* @__PURE__ */ jsx54("path", {
                 d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z",
                 fill: "var(--text-color)"
               })
             }),
             width: "45px"
           }),
-          /* @__PURE__ */ jsx57(StatItemContent, {
+          /* @__PURE__ */ jsx54(StatItemContent, {
             content: "54K",
             width: "80px",
             fontSize: "2.5rem",
@@ -30262,7 +30179,7 @@ var GitHubStars = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx57(StatItemContent, {
+      /* @__PURE__ */ jsx54(StatItemContent, {
         content: "GitHub stars",
         width: "125px",
         fontSize: "1.0rem",
@@ -30272,9 +30189,9 @@ var GitHubStars = () => {
   });
 };
 var DiscordMembers = () => {
-  return /* @__PURE__ */ jsx57(Pill, {
+  return /* @__PURE__ */ jsx54(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs14("div", {
+    children: /* @__PURE__ */ jsxs13("div", {
       style: {
         width: "80%",
         display: "flex",
@@ -30282,7 +30199,7 @@ var DiscordMembers = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs14("div", {
+        /* @__PURE__ */ jsxs13("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -30290,13 +30207,13 @@ var DiscordMembers = () => {
             justifyContent: "center"
           },
           children: [
-            /* @__PURE__ */ jsx57(StatItemContent, {
+            /* @__PURE__ */ jsx54(StatItemContent, {
               content: "10K+",
               width: "142px",
               fontSize: "2.5rem",
               fontWeight: "bold"
             }),
-            /* @__PURE__ */ jsx57(StatItemContent, {
+            /* @__PURE__ */ jsx54(StatItemContent, {
               content: "Discord members",
               width: "142px",
               fontSize: "1rem",
@@ -30304,19 +30221,19 @@ var DiscordMembers = () => {
             })
           ]
         }),
-        /* @__PURE__ */ jsx57("div", {
+        /* @__PURE__ */ jsx54("div", {
           style: {
             display: "flex",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx57(StatItemContent, {
-            content: /* @__PURE__ */ jsx57("svg", {
+          children: /* @__PURE__ */ jsx54(StatItemContent, {
+            content: /* @__PURE__ */ jsx54("svg", {
               width: "61",
               height: "47",
               viewBox: "0 0 46 35",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx57("path", {
+              children: /* @__PURE__ */ jsx54("path", {
                 d: "M38.9978 2.95533C38.9843 2.93009 38.962 2.91064 38.9352 2.90065C35.955 1.53492 32.8101 0.560692 29.5791 0.00230404C29.55 -0.00300893 29.5201 0.00092017 29.4934 0.0135365C29.4667 0.0261528 29.4447 0.0468187 29.4304 0.0726144C29.0019 0.84938 28.6129 1.64724 28.2648 2.46316C24.7802 1.93495 21.2356 1.93495 17.7509 2.46316C17.4015 1.64523 17.0072 0.847165 16.5697 0.0726144C16.5546 0.0475873 16.5324 0.0275657 16.506 0.0150584C16.4795 0.00255114 16.45 -0.00188563 16.421 0.00230404C13.1844 0.558177 10.034 1.53248 7.04927 2.90065C7.0231 2.91173 7.00116 2.93089 6.98669 2.95533C1.02568 11.8535 -0.609293 20.5251 0.188637 29.0951C0.190896 29.1167 0.197628 29.1376 0.208402 29.1564C0.219177 29.1752 0.233759 29.1916 0.25122 29.2045C3.7235 31.7693 7.60667 33.7268 11.7352 34.9934C11.7648 35.0025 11.7966 35.0022 11.8261 34.9924C11.8556 34.9826 11.8812 34.9638 11.8994 34.9387C12.7852 33.7344 13.5702 32.4593 14.2463 31.1263C14.2553 31.108 14.2604 31.088 14.2613 31.0676C14.2622 31.0471 14.2589 31.0268 14.2516 31.0077C14.2442 30.9886 14.233 30.9713 14.2186 30.9567C14.2043 30.9422 14.1871 30.9308 14.1681 30.9232C12.9278 30.4486 11.7271 29.8765 10.5774 29.2123C10.5571 29.1999 10.54 29.1828 10.5277 29.1624C10.5154 29.142 10.5082 29.119 10.5067 29.0953C10.5051 29.0715 10.5093 29.0478 10.5189 29.026C10.5285 29.0042 10.5432 28.985 10.5617 28.9701C10.8042 28.7904 11.0468 28.6029 11.2736 28.4155C11.2936 28.3979 11.3182 28.3864 11.3445 28.3822C11.3708 28.3781 11.3978 28.3815 11.4222 28.392C18.9478 31.8216 27.0992 31.8216 34.5388 28.392C34.5625 28.3804 34.589 28.3757 34.6153 28.3785C34.6416 28.3813 34.6666 28.3914 34.6874 28.4076C34.9143 28.5951 35.1568 28.7904 35.3993 28.9701C35.4178 28.985 35.4325 29.0042 35.4421 29.026C35.4517 29.0478 35.4559 29.0715 35.4543 29.0953C35.4528 29.119 35.4456 29.142 35.4333 29.1624C35.421 29.1828 35.4039 29.1999 35.3836 29.2123C34.2369 29.8799 33.0357 30.4496 31.7929 30.9154C31.7739 30.923 31.7567 30.9344 31.7424 30.9489C31.728 30.9635 31.7168 30.9808 31.7095 30.9999C31.7021 31.019 31.6988 31.0393 31.6997 31.0597C31.7006 31.0801 31.7057 31.1001 31.7147 31.1185C32.4026 32.4449 33.187 33.7191 34.0616 34.9309C34.0798 34.956 34.1054 34.9748 34.1349 34.9846C34.1644 34.9944 34.1962 34.9947 34.2258 34.9856C38.3663 33.7246 42.2606 31.7669 45.7411 29.1967C45.7589 29.1841 45.7737 29.1679 45.7846 29.149C45.7954 29.1301 45.8019 29.109 45.8037 29.0873C46.758 19.1892 44.1922 10.5879 38.9978 2.95533ZM15.3728 23.8765C13.1042 23.8765 11.2423 21.7985 11.2423 19.2517C11.2423 16.7049 13.0729 14.619 15.3728 14.619C17.6962 14.619 19.5424 16.7127 19.5032 19.2439C19.5032 21.7985 17.6727 23.8765 15.3728 23.8765ZM30.6586 23.8765C28.39 23.8765 26.5282 21.7985 26.5282 19.2517C26.5282 16.7049 28.3509 14.619 30.6586 14.619C32.982 14.619 34.8282 16.7127 34.7891 19.2439C34.7891 21.7985 32.9742 23.8765 30.6586 23.8765Z",
                 fill: "var(--text-color)"
               })
@@ -30329,21 +30246,21 @@ var DiscordMembers = () => {
   });
 };
 var Contributors = () => {
-  return /* @__PURE__ */ jsx57(Pill, {
+  return /* @__PURE__ */ jsx54(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs14("div", {
+    children: /* @__PURE__ */ jsxs13("div", {
       style: { display: "flex", justifyContent: "center" },
       children: [
-        /* @__PURE__ */ jsx57("div", {
+        /* @__PURE__ */ jsx54("div", {
           style: { display: "flex", justifyContent: "center" },
-          children: /* @__PURE__ */ jsx57(StatItemContent, {
-            content: /* @__PURE__ */ jsx57("svg", {
+          children: /* @__PURE__ */ jsx54(StatItemContent, {
+            content: /* @__PURE__ */ jsx54("svg", {
               width: "60",
               height: "50",
               viewBox: "0 0 63 40",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx57("path", {
+              children: /* @__PURE__ */ jsx54("path", {
                 d: "M6.975 5.375C6.975 3.94946 7.54656 2.58231 8.56395 1.5743C9.58133 0.566293 10.9612 0 12.4 0C13.8388 0 15.2187 0.566293 16.2361 1.5743C17.2534 2.58231 17.825 3.94946 17.825 5.375C17.825 6.80054 17.2534 8.16769 16.2361 9.1757C15.2187 10.1837 13.8388 10.75 12.4 10.75C10.9612 10.75 9.58133 10.1837 8.56395 9.1757C7.54656 8.16769 6.975 6.80054 6.975 5.375ZM6.2 20.5114C5.23125 21.5864 4.65 23.0165 4.65 24.5714C4.65 26.1263 5.23125 27.5565 6.2 28.6315V20.5114ZM20.1887 15.7795C17.3116 18.3038 15.5 21.9991 15.5 26.1071C15.5 29.3993 16.6625 32.4228 18.6 34.7935V36.8571C18.6 38.556 17.2147 39.9286 15.5 39.9286H9.3C7.58531 39.9286 6.2 38.556 6.2 36.8571V34.2848C2.53813 32.5571 0 28.8618 0 24.5714C0 18.6301 4.85344 13.8214 10.85 13.8214H13.95C16.275 13.8214 18.4256 14.5413 20.1887 15.7699V15.7795ZM43.4 36.8571V34.7935C45.3375 32.4228 46.5 29.3993 46.5 26.1071C46.5 21.9991 44.6884 18.3038 41.8112 15.7699C43.5744 14.5413 45.725 13.8214 48.05 13.8214H51.15C57.1466 13.8214 62 18.6301 62 24.5714C62 28.8618 59.4619 32.5571 55.8 34.2848V36.8571C55.8 38.556 54.4147 39.9286 52.7 39.9286H46.5C44.7853 39.9286 43.4 38.556 43.4 36.8571ZM44.175 5.375C44.175 3.94946 44.7466 2.58231 45.7639 1.5743C46.7813 0.566293 48.1612 0 49.6 0C51.0388 0 52.4187 0.566293 53.4361 1.5743C54.4534 2.58231 55.025 3.94946 55.025 5.375C55.025 6.80054 54.4534 8.16769 53.4361 9.1757C52.4187 10.1837 51.0388 10.75 49.6 10.75C48.1612 10.75 46.7813 10.1837 45.7639 9.1757C44.7466 8.16769 44.175 6.80054 44.175 5.375ZM55.8 20.5114V28.6411C56.7687 27.5565 57.35 26.1359 57.35 24.581C57.35 23.0261 56.7687 21.596 55.8 20.521V20.5114ZM31 0C32.6443 0 34.2213 0.647192 35.3841 1.7992C36.5468 2.95121 37.2 4.51367 37.2 6.14286C37.2 7.77204 36.5468 9.3345 35.3841 10.4865C34.2213 11.6385 32.6443 12.2857 31 12.2857C29.3557 12.2857 27.7787 11.6385 26.6159 10.4865C25.4532 9.3345 24.8 7.77204 24.8 6.14286C24.8 4.51367 25.4532 2.95121 26.6159 1.7992C27.7787 0.647192 29.3557 0 31 0ZM23.25 26.1071C23.25 27.6621 23.8312 29.0826 24.8 30.1672V22.0471C23.8312 23.1317 23.25 24.5522 23.25 26.1071ZM37.2 22.0471V30.1768C38.1687 29.0922 38.75 27.6717 38.75 26.1167C38.75 24.5618 38.1687 23.1317 37.2 22.0567V22.0471ZM43.4 26.1071C43.4 30.3975 40.8619 34.0929 37.2 35.8205V39.9286C37.2 41.6275 35.8147 43 34.1 43H27.9C26.1853 43 24.8 41.6275 24.8 39.9286V35.8205C21.1381 34.0929 18.6 30.3975 18.6 26.1071C18.6 20.1658 23.4534 15.3571 29.45 15.3571H32.55C38.5466 15.3571 43.4 20.1658 43.4 26.1071Z",
                 fill: "var(--text-color)"
               })
@@ -30351,7 +30268,7 @@ var Contributors = () => {
             width: "65px"
           })
         }),
-        /* @__PURE__ */ jsxs14("div", {
+        /* @__PURE__ */ jsxs13("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -30359,13 +30276,13 @@ var Contributors = () => {
             justifyContent: "center"
           },
           children: [
-            /* @__PURE__ */ jsx57(StatItemContent, {
+            /* @__PURE__ */ jsx54(StatItemContent, {
               content: "300+",
               width: "100px",
               fontSize: "2.5rem",
               fontWeight: "bold"
             }),
-            /* @__PURE__ */ jsx57(StatItemContent, {
+            /* @__PURE__ */ jsx54(StatItemContent, {
               content: "contributors",
               width: "100px",
               fontSize: "1.0rem",
@@ -30378,50 +30295,64 @@ var Contributors = () => {
   });
 };
 
+// src/components/homepage/VideoAppsTitle.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+var SectionTitle = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx56("div", {
+    className: "text-center",
+    children: /* @__PURE__ */ jsx56("h2", {
+      className: "fontbrand text-4xl",
+      children
+    })
+  });
+};
+
 // src/components/homepage/CommunityStats.tsx
-import { jsx as jsx58, jsxs as jsxs15 } from "react/jsx-runtime";
-var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx58("a", {
+import { jsx as jsx57, jsxs as jsxs14 } from "react/jsx-runtime";
+var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx57("a", {
   target: "_blank",
   href,
   className: "no-underline text-inherit contents",
   children
 });
-var CommunityStats = () => /* @__PURE__ */ jsxs15("div", {
+var CommunityStats = () => /* @__PURE__ */ jsxs14("div", {
   className: "m-auto max-w-[700px] text-center",
   children: [
-    /* @__PURE__ */ jsx58(SectionTitle, {
+    /* @__PURE__ */ jsx57(SectionTitle, {
       children: "Never build alone"
     }),
-    /* @__PURE__ */ jsx58("div", {
+    /* @__PURE__ */ jsx57("div", {
       className: "fontbrand text-center mb-10 -mt-4",
       children: "Join a thriving community of developers."
     }),
-    /* @__PURE__ */ jsxs15("div", {
+    /* @__PURE__ */ jsxs14("div", {
       className: "flex flex-wrap justify-between gap-4 w-full items-center",
       children: [
-        /* @__PURE__ */ jsx58(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://www.npmjs.com/package/remotion",
-          children: /* @__PURE__ */ jsx58(InstallsPerMonth, {})
+          children: /* @__PURE__ */ jsx57(InstallsPerMonth, {})
         }),
-        /* @__PURE__ */ jsx58(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://www.remotion.dev/docs/",
-          children: /* @__PURE__ */ jsx58(PagesOfDocs, {})
+          children: /* @__PURE__ */ jsx57(PagesOfDocs, {})
         }),
-        /* @__PURE__ */ jsx58(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://www.remotion.dev/templates",
-          children: /* @__PURE__ */ jsx58(TemplatesAndExamples, {})
+          children: /* @__PURE__ */ jsx57(TemplatesAndExamples, {})
         }),
-        /* @__PURE__ */ jsx58(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://github.com/remotion-dev/remotion",
-          children: /* @__PURE__ */ jsx58(GitHubStars, {})
+          children: /* @__PURE__ */ jsx57(GitHubStars, {})
         }),
-        /* @__PURE__ */ jsx58(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://remotion.dev/discord",
-          children: /* @__PURE__ */ jsx58(DiscordMembers, {})
+          children: /* @__PURE__ */ jsx57(DiscordMembers, {})
         }),
-        /* @__PURE__ */ jsx58(SectionLink, {
+        /* @__PURE__ */ jsx57(SectionLink, {
           href: "https://github.com/remotion-dev/remotion/graphs/contributors",
-          children: /* @__PURE__ */ jsx58(Contributors, {})
+          children: /* @__PURE__ */ jsx57(Contributors, {})
         })
       ]
     })
@@ -30431,8 +30362,8 @@ var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
 import { createContext as createContext32 } from "react";
-import { jsx as jsx59, jsxs as jsxs16 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment13 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
 import React57 from "react";
 import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
 import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
@@ -30441,7 +30372,7 @@ import { useEffect as useEffect210, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext42, useEffect as useEffect52, useRef as useRef47 } from "react";
 import { useEffect as useEffect310, useRef as useRef212 } from "react";
-import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo55, useRef as useRef48, useState as useState310 } from "react";
+import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo56, useRef as useRef48, useState as useState310 } from "react";
 import { useEffect as useEffect42, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -30470,11 +30401,11 @@ import React410, { useEffect as useEffect72 } from "react";
 import { jsx as jsx55 } from "react/jsx-runtime";
 import { useCallback as useCallback72, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
-import { useCallback as useCallback42, useMemo as useMemo42, useRef as useRef52, useState as useState62 } from "react";
+import { useCallback as useCallback42, useMemo as useMemo43, useRef as useRef52, useState as useState62 } from "react";
 import React54, { useCallback as useCallback310, useMemo as useMemo310, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo56, useState as useState82 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo57, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx94, jsxs as jsxs52 } from "react/jsx-runtime";
 import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
@@ -31247,6 +31178,29 @@ var backgroundSchema2 = {
     description: "Color"
   }
 };
+var svgStrokeSchema2 = {
+  stroke: {
+    type: "color",
+    default: "none",
+    description: "Stroke"
+  },
+  strokeWidth: {
+    type: "number",
+    default: 1,
+    description: "Stroke width",
+    min: 0,
+    step: 1,
+    hiddenFromList: false
+  }
+};
+var svgPaintSchema2 = {
+  fill: {
+    type: "color",
+    default: undefined,
+    description: "Fill"
+  },
+  ...svgStrokeSchema2
+};
 var premountSchema2 = {
   premountFor: {
     type: "number",
@@ -31269,7 +31223,51 @@ var premountSchema2 = {
 var sequencePremountSchema2 = {
   ...premountSchema2
 };
+var cropSchema2 = {
+  cropLeft: {
+    type: "number",
+    default: 0,
+    description: "Crop left",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropRight: {
+    type: "number",
+    default: 0,
+    description: "Crop right",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropTop: {
+    type: "number",
+    default: 0,
+    description: "Crop top",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropBottom: {
+    type: "number",
+    default: 0,
+    description: "Crop bottom",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  }
+};
+var sequenceCropSchema2 = cropSchema2;
 var sequenceStyleSchema2 = {
+  ...sequenceCropSchema2,
   ...transformSchema2,
   ...backgroundSchema2,
   ...borderSchema2,
@@ -32058,12 +32056,12 @@ if (typeof createContext32 !== "function") {
 var ICON_SIZE2 = 25;
 var fullscreenIconSize = 16;
 var PlayIcon = () => {
-  return /* @__PURE__ */ jsx59("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 25 25",
     fill: "none",
-    children: /* @__PURE__ */ jsx59("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
       fill: "white",
       stroke: "white",
@@ -32073,12 +32071,12 @@ var PlayIcon = () => {
   });
 };
 var PauseIcon = () => {
-  return /* @__PURE__ */ jsxs16("svg", {
+  return /* @__PURE__ */ jsxs15("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     children: [
-      /* @__PURE__ */ jsx59("rect", {
+      /* @__PURE__ */ jsx58("rect", {
         x: "25",
         y: "20",
         width: "20",
@@ -32087,7 +32085,7 @@ var PauseIcon = () => {
         ry: "5",
         rx: "5"
       }),
-      /* @__PURE__ */ jsx59("rect", {
+      /* @__PURE__ */ jsx58("rect", {
         x: "55",
         y: "20",
         width: "20",
@@ -32107,12 +32105,12 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth2 / 2;
   const middleInset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 / 2;
   const inset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 * 2;
-  return /* @__PURE__ */ jsxs16("svg", {
+  return /* @__PURE__ */ jsxs15("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
     children: [
-      /* @__PURE__ */ jsx59("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
@@ -32122,7 +32120,7 @@ var FullscreenIcon = ({
         strokeWidth: strokeWidth2,
         fill: "none"
       }),
-      /* @__PURE__ */ jsx59("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${viewSize - out} ${inset}
 				L ${viewSize - middleInset} ${middleInset}
@@ -32132,7 +32130,7 @@ var FullscreenIcon = ({
         strokeWidth: strokeWidth2,
         fill: "none"
       }),
-      /* @__PURE__ */ jsx59("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${out} ${viewSize - inset}
 				L ${middleInset} ${viewSize - middleInset}
@@ -32142,7 +32140,7 @@ var FullscreenIcon = ({
         strokeWidth: strokeWidth2,
         fill: "none"
       }),
-      /* @__PURE__ */ jsx59("path", {
+      /* @__PURE__ */ jsx58("path", {
         d: `
 				M ${viewSize - out} ${viewSize - inset}
 				L ${viewSize - middleInset} ${viewSize - middleInset}
@@ -32156,22 +32154,22 @@ var FullscreenIcon = ({
   });
 };
 var VolumeOffIcon = () => {
-  return /* @__PURE__ */ jsx59("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx59("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",
       fill: "#fff"
     })
   });
 };
 var VolumeOnIcon = () => {
-  return /* @__PURE__ */ jsx59("svg", {
+  return /* @__PURE__ */ jsx58("svg", {
     width: ICON_SIZE2,
     height: ICON_SIZE2,
     viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx59("path", {
+    children: /* @__PURE__ */ jsx58("path", {
       d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",
       fill: "#fff"
     })
@@ -32195,7 +32193,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment13, {
+  return /* @__PURE__ */ jsxs24(Fragment12, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -32701,7 +32699,7 @@ var usePlayer = () => {
   const isBuffering = useCallback39(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo55(() => {
+  const returnValue = useMemo56(() => {
     return {
       frameBack,
       frameForward,
@@ -33547,7 +33545,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }
     setPlayerMuted((mute) => !mute);
   }, [isVolume0, setPlayerMuted, setMediaVolume]);
-  const parentDivStyle = useMemo42(() => {
+  const parentDivStyle = useMemo43(() => {
     return {
       display: "inline-flex",
       background: "none",
@@ -33558,7 +33556,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       ...displayVerticalVolumeSlider && { position: "relative" }
     };
   }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo42(() => {
+  const volumeContainer = useMemo43(() => {
     return {
       display: "inline",
       width: ICON_SIZE2,
@@ -33583,10 +33581,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       children: isMutedOrZero ? /* @__PURE__ */ jsx84(VolumeOffIcon, {}) : /* @__PURE__ */ jsx84(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo42(() => {
+  const muteButton = useMemo43(() => {
     return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
   }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo42(() => {
+  const volumeSlider = useMemo43(() => {
     return (focused || hover) && !playerMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
@@ -33674,7 +33672,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo56(() => {
+  const actualStyle = useMemo57(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -33741,7 +33739,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo56(() => {
+  const playbackPopup = useMemo57(() => {
     return {
       position: "absolute",
       right: 0,
@@ -35239,7 +35237,6 @@ var PlayerFn = ({
     [PLAYER_COMP_ID]: initialFrame ?? 0
   }));
   const [playing, setPlaying] = useState132(false);
-  const [rootId] = useState132("player-comp");
   const rootRef = useRef122(null);
   const audioAndVideoTags = useRef122([]);
   const imperativePlaying = useRef122(false);
@@ -35316,11 +35313,10 @@ var PlayerFn = ({
     return {
       frame,
       playing,
-      rootId,
       imperativePlaying,
       audioAndVideoTags
     };
-  }, [frame, playing, rootId]);
+  }, [frame, playing]);
   const playbackRateContextValue = useMemo142(() => {
     return {
       playbackRate: currentPlaybackRate,
@@ -35568,7 +35564,6 @@ var ThumbnailFn = ({
       window.remotion_isPlayer = true;
     }, []);
   }
-  const [thumbnailId] = useState142(() => String(random(null)));
   const rootRef = useRef142(null);
   const timelineState = useMemo172(() => {
     const value = {
@@ -35576,14 +35571,13 @@ var ThumbnailFn = ({
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay
       },
-      rootId: thumbnailId,
       imperativePlaying: {
         current: false
       },
       audioAndVideoTags: { current: [] }
     };
     return value;
-  }, [frameToDisplay, thumbnailId]);
+  }, [frameToDisplay]);
   const playbackRateContext = useMemo172(() => {
     return {
       playbackRate: 1,
@@ -35642,7 +35636,7 @@ var Thumbnail = forward2(ThumbnailFn);
 import {
   useCallback as useCallback55,
   useEffect as useEffect57,
-  useMemo as useMemo69,
+  useMemo as useMemo70,
   useRef as useRef59,
   useState as useState56
 } from "react";
@@ -36393,18 +36387,18 @@ 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 React58, { useContext as useContext48, useMemo as useMemo57 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import React58, { useContext as useContext48, useMemo as useMemo58 } from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Context = React58.createContext(undefined);
 var ColorModeProvider = ({
   children,
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo57(() => {
+  const value = useMemo58(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
-  return /* @__PURE__ */ jsx60(Context.Provider, {
+  return /* @__PURE__ */ jsx59(Context.Provider, {
     value,
     children
   });
@@ -36419,7 +36413,7 @@ function useColorMode() {
 
 // ../media/dist/esm/index.mjs
 import { useMemo as useMemo312, useState as useState312 } from "react";
-import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo59, useRef as useRef50, useState as useState41 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo60, useRef as useRef50, useState as useState41 } from "react";
 import {
   AudioBufferSink,
   InputDisposedError
@@ -36427,7 +36421,7 @@ import {
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext49, useLayoutEffect as useLayoutEffect19 } from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
@@ -36456,7 +36450,7 @@ import { jsx as jsx412 } from "react/jsx-runtime";
 import {
   useContext as useContext53,
   useLayoutEffect as useLayoutEffect43,
-  useMemo as useMemo58,
+  useMemo as useMemo59,
   useRef as useRef312,
   useState as useState53
 } from "react";
@@ -39049,7 +39043,7 @@ var AudioForPreviewAssertedShowing = ({
     setMediaDurationInSeconds
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
-    return /* @__PURE__ */ jsx61(Audio, {
+    return /* @__PURE__ */ jsx60(Audio, {
       src,
       muted,
       volume,
@@ -39099,7 +39093,7 @@ var AudioForPreview2 = ({
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo59(() => {
+  const showShow = useMemo60(() => {
     return getTimeInSeconds({
       unloopedTimeInSeconds: currentTime,
       playbackRate,
@@ -39126,7 +39120,7 @@ var AudioForPreview2 = ({
   if (!setMediaDurationInSeconds) {
     throw new Error("setMediaDurationInSeconds is required");
   }
-  return /* @__PURE__ */ jsx61(AudioForPreviewAssertedShowing, {
+  return /* @__PURE__ */ jsx60(AudioForPreviewAssertedShowing, {
     audioStreamIndex,
     src: preloadedSrc,
     playbackRate,
@@ -41879,7 +41873,7 @@ var VideoForRendering2 = ({
   const { registerRenderAsset, unregisterRenderAsset } = useContext53(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const sequenceContext = useContext53(Internals.SequenceContext);
-  const id = useMemo58(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo59(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -42098,10 +42092,10 @@ var VideoForRendering2 = ({
     initialRequestInit
   ]);
   warnAboutObjectFitInStyleOrClassName({ style: style2, className: className2, logLevel });
-  const classNameValue = useMemo58(() => {
+  const classNameValue = useMemo59(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
   }, [className2]);
-  const styleWithObjectFit = useMemo58(() => {
+  const styleWithObjectFit = useMemo59(() => {
     return {
       ...style2,
       objectFit: objectFitProp
@@ -42171,7 +42165,12 @@ var VideoForRendering2 = ({
     className: classNameValue
   });
 };
-var { validateMediaTrimProps: validateMediaTrimProps2, resolveTrimProps: resolveTrimProps2, validateMediaProps: validateMediaProps22 } = Internals;
+var {
+  validateMediaTrimProps: validateMediaTrimProps2,
+  resolveTrimProps: resolveTrimProps2,
+  validateMediaProps: validateMediaProps22,
+  useCropStyle: useCropStyle2
+} = Internals;
 var videoSchema = {
   src: {
     type: "asset",
@@ -42203,7 +42202,8 @@ var videoSchema = {
   loop: { type: "boolean", default: false, description: "Loop" },
   ...Internals.transformSchema,
   ...Interactive.backgroundSchema,
-  ...Interactive.borderSchema
+  ...Interactive.borderSchema,
+  ...Interactive.cropSchema
 };
 var InnerVideo = ({
   src,
@@ -42357,6 +42357,10 @@ var VideoInner = ({
   postmountFor,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...props
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
@@ -42430,6 +42434,14 @@ var VideoInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle2({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<Video />"
+  });
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -42471,7 +42483,7 @@ var VideoInner = ({
         playbackRate: playbackRate ?? 1,
         showInTimeline: showInTimeline ?? true,
         src,
-        style: premountingStyle ?? {},
+        style: croppedStyle ?? {},
         trimAfter,
         trimBefore,
         volume: volume ?? 1,
@@ -42501,7 +42513,7 @@ var Video = Interactive.withSchema({
 });
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo64, useState as useState48 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo66, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
@@ -42548,14 +42560,14 @@ var getIndexFromPosition = (clientX, clientY) => {
 
 // src/components/homepage/Demo/Switcher.tsx
 import { useCallback as useCallback41 } from "react";
-import { jsx as jsx66, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs16 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
   const onPointerDown = useCallback41((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
   const switcherSize = 40;
-  return /* @__PURE__ */ jsx66("div", {
+  return /* @__PURE__ */ jsx61("div", {
     onPointerDown,
     style: {
       height: switcherSize,
@@ -42573,15 +42585,15 @@ var Switcher = ({ type, theme, onTap }) => {
       alignItems: "center",
       display: "flex"
     },
-    children: /* @__PURE__ */ jsxs17("svg", {
+    children: /* @__PURE__ */ jsxs16("svg", {
       style: { height: switcherSize / 2 },
       viewBox: "0 0 320 512",
       children: [
-        type === "left" ? /* @__PURE__ */ jsx66("path", {
+        type === "left" ? /* @__PURE__ */ jsx61("path", {
           fill: "currentcolor",
           d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
         }) : null,
-        type === "right" ? /* @__PURE__ */ jsx66("path", {
+        type === "right" ? /* @__PURE__ */ jsx61("path", {
           fill: "currentcolor",
           d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
         }) : null
@@ -42591,7 +42603,7 @@ var Switcher = ({ type, theme, onTap }) => {
 };
 
 // src/components/homepage/Demo/Card.tsx
-import { jsx as jsx68, jsxs as jsxs18, Fragment as Fragment14 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs17, Fragment as Fragment13 } from "react/jsx-runtime";
 var arePositionsEqual = (a2, b2) => {
   return a2.every((pos, i) => {
     return pos.x === b2[i].x && pos.y === b2[i].y;
@@ -42752,7 +42764,7 @@ var Card2 = ({
   }, []);
   const { x, y } = getPositionForIndex(index2);
   const color = theme === "light" ? " #EAEAEA" : "#333";
-  return /* @__PURE__ */ jsx68("div", {
+  return /* @__PURE__ */ jsx66("div", {
     ref: refToUse,
     className: "transition-opacity duration-200",
     onPointerDown,
@@ -42768,7 +42780,7 @@ var Card2 = ({
       borderRadius: 13,
       cursor: "grab"
     },
-    children: /* @__PURE__ */ jsxs18(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs17(AbsoluteFill, {
       style: {
         backgroundColor: color,
         borderRadius: 12
@@ -42776,14 +42788,14 @@ var Card2 = ({
       className: "transition-opacity duration-200",
       children: [
         content,
-        withSwitcher ? /* @__PURE__ */ jsxs18(Fragment14, {
+        withSwitcher ? /* @__PURE__ */ jsxs17(Fragment13, {
           children: [
-            /* @__PURE__ */ jsx68(Switcher, {
+            /* @__PURE__ */ jsx66(Switcher, {
               onTap: onClickLeft,
               type: "left",
               theme
             }),
-            /* @__PURE__ */ jsx68(Switcher, {
+            /* @__PURE__ */ jsx66(Switcher, {
               onTap: onClickRight,
               type: "right",
               theme
@@ -42796,7 +42808,7 @@ var Card2 = ({
 };
 
 // src/components/homepage/Demo/CurrentCountry.tsx
-import { jsx as jsx69, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs18 } from "react/jsx-runtime";
 var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -42811,31 +42823,31 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
     frame,
     delay: 10
   });
-  return /* @__PURE__ */ jsxs19(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs18(AbsoluteFill, {
     style: { overflow: "hidden" },
     children: [
-      /* @__PURE__ */ jsx69(AbsoluteFill, {
+      /* @__PURE__ */ jsx68(AbsoluteFill, {
         style: {
           transform: `scale(${progress})`
         },
-        children: /* @__PURE__ */ jsx69("svg", {
+        children: /* @__PURE__ */ jsx68("svg", {
           viewBox: boundingBox.viewBox,
           style: {
             scale: "0.8"
           },
-          children: /* @__PURE__ */ jsx69("path", {
+          children: /* @__PURE__ */ jsx68("path", {
             fill: theme === "light" ? "#bbb" : "#222",
             d: reset
           })
         })
       }),
-      /* @__PURE__ */ jsxs19(AbsoluteFill, {
+      /* @__PURE__ */ jsxs18(AbsoluteFill, {
         style: {
           alignItems: "center",
           justifyContent: "center"
         },
         children: [
-          /* @__PURE__ */ jsx69("div", {
+          /* @__PURE__ */ jsx68("div", {
             style: {
               color: "#0b84f3",
               fontFamily: "GTPlanar",
@@ -42850,7 +42862,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
             },
             children: "Your country"
           }),
-          /* @__PURE__ */ jsx69("div", {
+          /* @__PURE__ */ jsx68("div", {
             style: {
               lineHeight: 1.1,
               fontFamily: "GTPlanar",
@@ -42883,7 +42895,7 @@ import {
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
 import { useEffect as useEffect45, useRef as useRef53, useState as useState44 } from "react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
   const height2 = animationData.h;
@@ -43045,7 +43057,7 @@ var Lottie = ({
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
   }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
-  return /* @__PURE__ */ jsx70("div", {
+  return /* @__PURE__ */ jsx69("div", {
     ref: containerRef,
     className: className2,
     style: style2
@@ -43053,15 +43065,15 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect46, useMemo as useMemo60, useState as useState46 } from "react";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { useEffect as useEffect46, useMemo as useMemo61, 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, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const { isRendering } = useRemotionEnvironment();
-  const src = useMemo60(() => {
+  const src = useMemo61(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -43104,7 +43116,7 @@ var DisplayedEmoji = ({ emoji }) => {
   const ratio = durationInFrames / fps / animDurtion;
   const closestInteger = ratio;
   const closestRatio = closestInteger / ratio;
-  return /* @__PURE__ */ jsx71(Lottie, {
+  return /* @__PURE__ */ jsx70(Lottie, {
     style: {
       height: 100,
       width: "100%",
@@ -43118,7 +43130,7 @@ var DisplayedEmoji = ({ emoji }) => {
 };
 
 // src/components/homepage/Demo/EmojiCard.tsx
-import { jsx as jsx75, jsxs as jsxs20, Fragment as Fragment15 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs19, Fragment as Fragment14 } from "react/jsx-runtime";
 var applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
   ref1.style.transform = `translateX(${transforms[0]}%)`;
   ref2.style.transform = `translateX(${transforms[1]}%)`;
@@ -43214,14 +43226,14 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     });
   }, []);
   const env = useRemotionEnvironment();
-  return /* @__PURE__ */ jsxs20(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs19(AbsoluteFill, {
     style: {
       justifyContent: "center",
       alignItems: "center",
       overflow: "hidden"
     },
     children: [
-      /* @__PURE__ */ jsx75("div", {
+      /* @__PURE__ */ jsx71("div", {
         style: {
           color: "#0b84f3",
           fontFamily: "GTPlanar",
@@ -43233,7 +43245,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
         },
         children: "Choose an emoji"
       }),
-      /* @__PURE__ */ jsx75("div", {
+      /* @__PURE__ */ jsx71("div", {
         style: {
           position: "absolute",
           width: "100%",
@@ -43241,31 +43253,31 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           whiteSpace: "nowrap",
           height: "100%"
         },
-        children: env.isRendering ? /* @__PURE__ */ jsx75("div", {
+        children: env.isRendering ? /* @__PURE__ */ jsx71("div", {
           style: emojiStyle,
-          children: /* @__PURE__ */ jsx75(DisplayedEmoji, {
+          children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
             emoji: emojiIndex
           })
-        }) : /* @__PURE__ */ jsxs20(Fragment15, {
+        }) : /* @__PURE__ */ jsxs19(Fragment14, {
           children: [
-            /* @__PURE__ */ jsx75("div", {
+            /* @__PURE__ */ jsx71("div", {
               ref: ref1,
               style: emojiStyle,
-              children: /* @__PURE__ */ jsx75(DisplayedEmoji, {
+              children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
                 emoji: "melting"
               })
             }),
-            /* @__PURE__ */ jsx75("div", {
+            /* @__PURE__ */ jsx71("div", {
               ref: ref2,
               style: emojiStyle,
-              children: /* @__PURE__ */ jsx75(DisplayedEmoji, {
+              children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
                 emoji: "partying-face"
               })
             }),
-            /* @__PURE__ */ jsx75("div", {
+            /* @__PURE__ */ jsx71("div", {
               ref: ref3,
               style: emojiStyle,
-              children: /* @__PURE__ */ jsx75(DisplayedEmoji, {
+              children: /* @__PURE__ */ jsx71(DisplayedEmoji, {
                 emoji: "fire"
               })
             })
@@ -43278,9 +43290,9 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
 var EmojiCard = forwardRef38(EmojiCardRefFn);
 
 // src/components/homepage/Demo/Minus.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var Minus = ({ leftOffset, minusSignOpacity }) => {
-  return /* @__PURE__ */ jsx77("div", {
+  return /* @__PURE__ */ jsx75("div", {
     style: {
       position: "relative",
       marginLeft: -40 - leftOffset,
@@ -43294,7 +43306,7 @@ var Minus = ({ leftOffset, minusSignOpacity }) => {
 };
 
 // src/components/homepage/Demo/DigitWheel.tsx
-import { jsx as jsx78, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs20 } from "react/jsx-runtime";
 var DURATION = 25;
 var items = 10;
 var NUM_WIDTH = 36;
@@ -43338,7 +43350,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
   const rotation = progresses.map((p, i) => {
     return p * offsets[i];
   }).reduce((a2, b2) => a2 + b2, 0) + rotations[0];
-  return /* @__PURE__ */ jsxs21("div", {
+  return /* @__PURE__ */ jsxs20("div", {
     style: {
       position: "relative",
       width: NUM_WIDTH,
@@ -43347,11 +43359,11 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
       marginLeft: shiftLeft
     },
     children: [
-      isLeadingDigit ? /* @__PURE__ */ jsx78(Minus, {
+      isLeadingDigit ? /* @__PURE__ */ jsx77(Minus, {
         minusSignOpacity,
         leftOffset: shiftLeft + minusSignMarginLeft
       }) : null,
-      /* @__PURE__ */ jsx78(AbsoluteFill, {
+      /* @__PURE__ */ jsx77(AbsoluteFill, {
         style: {
           perspective: 5000,
           maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
@@ -43362,7 +43374,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
           const z = Math.cos(index2 * -Math.PI * 2) * 120;
           const y = Math.sin(index2 * Math.PI * 2) * -120;
           const r2 = interpolate(index2, [0, 1], [0, Math.PI * 2]);
-          return /* @__PURE__ */ jsx78(AbsoluteFill, {
+          return /* @__PURE__ */ jsx77(AbsoluteFill, {
             style: {
               justifyContent: "center",
               alignItems: "center",
@@ -43372,7 +43384,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
               backfaceVisibility: "hidden",
               perspective: 1000
             },
-            children: /* @__PURE__ */ jsx78("div", {
+            children: /* @__PURE__ */ jsx77("div", {
               style: {
                 transform: `rotateX(-${r2}rad)`,
                 backfaceVisibility: "hidden",
@@ -43382,7 +43394,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
                 justifyContent: "center",
                 opacity: opacity2
               },
-              children: /* @__PURE__ */ jsx78("div", {
+              children: /* @__PURE__ */ jsx77("div", {
                 style: {
                   lineHeight: 1,
                   display: "inline",
@@ -43399,14 +43411,14 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
 };
 
 // src/components/homepage/Demo/TemperatureNumber.tsx
-import { jsx as jsx79, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs21 } from "react/jsx-runtime";
 var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
   const temperatureInFahrenheit = temperatureInCelsius * 9 / 5 + 32;
   const celsiusDegree = Math.abs(temperatureInCelsius);
   const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
   const paddedCelsiusDegree = String(celsiusDegree).padStart(fahrenheitDegree.toFixed(0).length, "0").split("");
   const paddedFahrenheitDegree = fahrenheitDegree.toFixed(0).padStart(paddedCelsiusDegree.length, "0").split("");
-  return /* @__PURE__ */ jsxs25("div", {
+  return /* @__PURE__ */ jsxs21("div", {
     style: {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -43420,7 +43432,7 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
       alignItems: "center"
     },
     children: [
-      paddedCelsiusDegree.map((digit, i) => /* @__PURE__ */ jsx79(Wheel, {
+      paddedCelsiusDegree.map((digit, i) => /* @__PURE__ */ jsx78(Wheel, {
         delay: i * 4,
         renderDigit: (_i) => 9 - _i,
         digits: [
@@ -43435,14 +43447,14 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
         ],
         isLeadingDigit: i === 0
       }, i)),
-      /* @__PURE__ */ jsx79("div", {
+      /* @__PURE__ */ jsx78("div", {
         style: { width: 8 }
       }),
       "°",
-      /* @__PURE__ */ jsx79(Wheel, {
+      /* @__PURE__ */ jsx78(Wheel, {
         delay: paddedCelsiusDegree.length * 4 - 2,
         digits: [0, 1, 0],
-        renderDigit: (_i) => _i % 2 === 0 ? "C" : /* @__PURE__ */ jsx79("span", {
+        renderDigit: (_i) => _i % 2 === 0 ? "C" : /* @__PURE__ */ jsx78("span", {
           style: { marginLeft: -5 },
           children: "F"
         }),
@@ -43454,13 +43466,13 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/Temperature.tsx
-import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs25 } from "react/jsx-runtime";
 var Temperature = ({ theme, city, temperatureInCelsius }) => {
   if (temperatureInCelsius === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx80(AbsoluteFill, {
-    children: /* @__PURE__ */ jsxs27(AbsoluteFill, {
+  return /* @__PURE__ */ jsx79(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs25(AbsoluteFill, {
       style: {
         alignItems: "center",
         justifyContent: "center",
@@ -43468,7 +43480,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
         paddingRight: 20
       },
       children: [
-        /* @__PURE__ */ jsxs27("div", {
+        /* @__PURE__ */ jsxs25("div", {
           style: {
             color: "#0b84f3",
             fontFamily: "GTPlanar",
@@ -43482,7 +43494,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
             city
           ]
         }),
-        /* @__PURE__ */ jsx80(TemperatureNumber, {
+        /* @__PURE__ */ jsx79(TemperatureNumber, {
           theme,
           temperatureInCelsius
         })
@@ -43492,8 +43504,8 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/TrendingRepos.tsx
-import { useMemo as useMemo61 } from "react";
-import { jsx as jsx81, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useMemo as useMemo64 } from "react";
+import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -43505,7 +43517,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo61(() => {
+  const item = useMemo64(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -43515,7 +43527,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
       opacity: progress
     };
   }, [progress, theme]);
-  return /* @__PURE__ */ jsxs28("div", {
+  return /* @__PURE__ */ jsxs27("div", {
     style: item,
     children: [
       number,
@@ -43539,16 +43551,16 @@ var TrendingRepos = ({ theme, trending }) => {
   if (trending === null) {
     return null;
   }
-  return /* @__PURE__ */ jsx81(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx81(AbsoluteFill, {
+  return /* @__PURE__ */ jsx80(AbsoluteFill, {
+    children: /* @__PURE__ */ jsx80(AbsoluteFill, {
       style: {
         justifyContent: "center",
         paddingLeft: 20,
         paddingRight: 20
       },
-      children: /* @__PURE__ */ jsxs28("div", {
+      children: /* @__PURE__ */ jsxs27("div", {
         children: [
-          /* @__PURE__ */ jsx81("div", {
+          /* @__PURE__ */ jsx80("div", {
             style: {
               color: fill,
               fontFamily: "GTPlanar",
@@ -43562,7 +43574,7 @@ var TrendingRepos = ({ theme, trending }) => {
               day: "numeric"
             }).format(new Date(trending.date))
           }),
-          /* @__PURE__ */ jsx81("div", {
+          /* @__PURE__ */ jsx80("div", {
             style: {
               color: "#0b84f3",
               fontFamily: "GTPlanar",
@@ -43574,17 +43586,17 @@ var TrendingRepos = ({ theme, trending }) => {
             },
             children: "Trending repositories"
           }),
-          /* @__PURE__ */ jsx81(TrendingRepoItem, {
+          /* @__PURE__ */ jsx80(TrendingRepoItem, {
             number: 1,
             repo: trending.repos[0],
             theme
           }),
-          /* @__PURE__ */ jsx81(TrendingRepoItem, {
+          /* @__PURE__ */ jsx80(TrendingRepoItem, {
             number: 2,
             repo: trending.repos[1],
             theme
           }),
-          /* @__PURE__ */ jsx81(TrendingRepoItem, {
+          /* @__PURE__ */ jsx80(TrendingRepoItem, {
             number: 3,
             repo: trending.repos[2],
             theme
@@ -43596,7 +43608,7 @@ var TrendingRepos = ({ theme, trending }) => {
 };
 
 // src/components/homepage/Demo/Cards.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var Cards = ({
   onUpdate,
   indices,
@@ -43642,26 +43654,26 @@ var Cards = ({
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
-  return /* @__PURE__ */ jsx85(AbsoluteFill, {
+  return /* @__PURE__ */ jsx81(AbsoluteFill, {
     ref: container4,
     children: new Array(4).fill(true).map((_, i) => {
       const index2 = indices[i];
-      const content = index2 === 0 ? /* @__PURE__ */ jsx85(TrendingRepos, {
+      const content = index2 === 0 ? /* @__PURE__ */ jsx81(TrendingRepos, {
         trending,
         theme
-      }) : index2 === 1 ? /* @__PURE__ */ jsx85(Temperature, {
+      }) : index2 === 1 ? /* @__PURE__ */ jsx81(Temperature, {
         city: location?.city ? decodeURIComponent(location?.city) : null,
         theme,
         temperatureInCelsius: trending?.temperatureInCelsius ?? null
-      }) : index2 === 2 ? /* @__PURE__ */ jsx85(CurrentCountry, {
+      }) : index2 === 2 ? /* @__PURE__ */ jsx81(CurrentCountry, {
         countryPaths: trending?.countryPaths ?? null,
         countryLabel: trending?.countryLabel ?? null,
         theme
-      }) : /* @__PURE__ */ jsx85(EmojiCard, {
+      }) : /* @__PURE__ */ jsx81(EmojiCard, {
         ref,
         emojiIndex: emojiName
       });
-      return /* @__PURE__ */ jsx85(Card2, {
+      return /* @__PURE__ */ jsx81(Card2, {
         onUpdate,
         refsToUse: refs,
         index: i,
@@ -43679,7 +43691,7 @@ var Cards = ({
 };
 
 // src/components/homepage/Demo/Comp.tsx
-import { jsx as jsx87, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs28 } from "react/jsx-runtime";
 var getDataAndProps = async () => {
   const location = await fetch("https://utils.remotion.dev/location").then((res) => res.json());
   const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`).then((res) => res.json()).then((data) => {
@@ -43712,7 +43724,7 @@ var HomepageVideoComp = ({
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo64(() => {
+  const emoji = useMemo66(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -43721,7 +43733,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo64(() => {
+  const audioSrc = useMemo66(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -43740,12 +43752,12 @@ var HomepageVideoComp = ({
       c2.free();
     };
   }, []);
-  return /* @__PURE__ */ jsxs29(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs28(AbsoluteFill, {
     style: {
       backgroundColor: theme === "dark" ? "#222" : "#fafafa"
     },
     children: [
-      /* @__PURE__ */ jsx87(Cards, {
+      /* @__PURE__ */ jsx85(Cards, {
         onUpdate,
         indices: cardOrder,
         theme,
@@ -43756,7 +43768,7 @@ var HomepageVideoComp = ({
         onRight: onClickRight,
         emojiName: emoji
       }, rerenders),
-      audioSrc ? /* @__PURE__ */ jsx87(Audio2, {
+      audioSrc ? /* @__PURE__ */ jsx85(Audio2, {
         src: audioSrc
       }) : null
     ]
@@ -43764,9 +43776,9 @@ var HomepageVideoComp = ({
 };
 
 // src/components/homepage/Demo/DemoError.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var DemoError = () => {
-  return /* @__PURE__ */ jsx88("div", {
+  return /* @__PURE__ */ jsx87("div", {
     style: {
       color: RED,
       fontFamily: FONTS.GTPLANAR,
@@ -43806,7 +43818,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.498";
+var VERSION2 = "4.0.500";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43816,7 +43828,7 @@ import { flushSync as flushSync22 } from "react-dom";
 import ReactDOM6 from "react-dom/client";
 import { useImperativeHandle as useImperativeHandle14, useState as useState49 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 import { jsx as jsx217 } from "react/jsx-runtime";
 import { Output, VideoSampleSource } from "mediabunny";
 var __dispose2 = Symbol.dispose || /* @__PURE__ */ Symbol.for("Symbol.dispose");
@@ -44592,7 +44604,7 @@ var UpdateTime = ({
       });
     }
   }));
-  return /* @__PURE__ */ jsx89(Internals.RemotionRootContexts, {
+  return /* @__PURE__ */ jsx88(Internals.RemotionRootContexts, {
     audioEnabled,
     videoEnabled,
     logLevel,
@@ -46430,12 +46442,106 @@ function setClipPath({
     ctx.restore();
   };
 }
+var firstLayer = (value) => value.split(",")[0].trim();
+var parseLengthPercentage = (value) => {
+  const match = value.match(/^(-?(?:\d+\.?\d*|\.\d+))(%|px)$/);
+  if (match) {
+    return {
+      unit: match[2],
+      value: Number(match[1])
+    };
+  }
+  if (value === "0") {
+    return { unit: "px", value: 0 };
+  }
+  return null;
+};
+var resolveSize = ({
+  containerSize,
+  value
+}) => {
+  if (value === undefined || value === "auto") {
+    return containerSize;
+  }
+  const parsed = parseLengthPercentage(value);
+  if (!parsed) {
+    return containerSize;
+  }
+  return parsed.unit === "%" ? containerSize * (parsed.value / 100) : parsed.value;
+};
+var positionKeywordToPercentage = (value) => {
+  if (value === "left" || value === "top") {
+    return 0;
+  }
+  if (value === "center") {
+    return 50;
+  }
+  if (value === "right" || value === "bottom") {
+    return 100;
+  }
+  return null;
+};
+var resolvePosition = ({
+  containerSize,
+  imageSize,
+  value
+}) => {
+  const keywordPercentage = positionKeywordToPercentage(value);
+  if (keywordPercentage !== null) {
+    return (containerSize - imageSize) * (keywordPercentage / 100);
+  }
+  const parsed = parseLengthPercentage(value);
+  if (!parsed) {
+    return 0;
+  }
+  return parsed.unit === "%" ? (containerSize - imageSize) * (parsed.value / 100) : parsed.value;
+};
+var parsePosition2 = (value) => {
+  const parts = firstLayer(value).split(/\s+/);
+  if (parts.length === 1) {
+    if (parts[0] === "top" || parts[0] === "bottom") {
+      return { x: "center", y: parts[0] };
+    }
+    return { x: parts[0], y: "center" };
+  }
+  if (parts[0] === "top" || parts[0] === "bottom") {
+    return { x: parts[1], y: parts[0] };
+  }
+  return { x: parts[0], y: parts[1] };
+};
+var getBackgroundImageRect = ({
+  backgroundPosition,
+  backgroundSize,
+  positioningArea
+}) => {
+  const sizeParts = firstLayer(backgroundSize).split(/\s+/);
+  const width2 = resolveSize({
+    containerSize: positioningArea.width,
+    value: sizeParts[0]
+  });
+  const height2 = resolveSize({
+    containerSize: positioningArea.height,
+    value: sizeParts[1]
+  });
+  const position = parsePosition2(backgroundPosition);
+  return new DOMRect(positioningArea.left + resolvePosition({
+    containerSize: positioningArea.width,
+    imageSize: width2,
+    value: position.x
+  }), positioningArea.top + resolvePosition({
+    containerSize: positioningArea.height,
+    imageSize: height2,
+    value: position.y
+  }), width2, height2);
+};
 var isColorTransparent = (color) => {
   return color === "transparent" || color.startsWith("rgba") && (color.endsWith(", 0)") || color.endsWith(",0"));
 };
 var getBackgroundFill = ({
   backgroundColor,
   backgroundImage,
+  backgroundPosition,
+  backgroundSize,
   contextToDraw,
   boundingRect,
   offsetLeft,
@@ -46444,9 +46550,14 @@ var getBackgroundFill = ({
   if (backgroundImage && backgroundImage !== "none") {
     const gradientInfo = parseLinearGradient(backgroundImage);
     if (gradientInfo) {
+      const backgroundImageRect = getBackgroundImageRect({
+        backgroundPosition,
+        backgroundSize,
+        positioningArea: boundingRect
+      });
       const gradient = createCanvasGradient({
         ctx: contextToDraw,
-        rect: boundingRect,
+        rect: backgroundImageRect,
         gradientInfo,
         offsetLeft,
         offsetTop
@@ -46514,6 +46625,8 @@ var drawBackground = async ({
     }
     const backgroundFill = getBackgroundFill({
       backgroundImage,
+      backgroundPosition: computedStyle.backgroundPosition,
+      backgroundSize: computedStyle.backgroundSize,
       backgroundColor,
       contextToDraw,
       boundingRect,
@@ -47192,10 +47305,10 @@ var drawElement = async ({
   finishTransform();
   return {
     cleanupAfterChildren: () => {
+      finishOverflowHidden();
       finishFilter();
       finishOpacity();
       finishClipPath();
-      finishOverflowHidden();
     }
   };
 };
@@ -49000,9 +49113,9 @@ import React70, { useCallback as useCallback48 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var DemoErrorIcon = () => {
-  return /* @__PURE__ */ jsx90("div", {
+  return /* @__PURE__ */ jsx89("div", {
     style: {
       height: 26,
       width: 26,
@@ -49012,14 +49125,14 @@ var DemoErrorIcon = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsx90("svg", {
+    children: /* @__PURE__ */ jsx89("svg", {
       style: {
         flexShrink: 0,
         width: 26
       },
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ jsx90("path", {
+      children: /* @__PURE__ */ jsx89("path", {
         fill: RED,
         d: "M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
       })
@@ -49028,9 +49141,9 @@ var DemoErrorIcon = () => {
 };
 
 // src/components/homepage/Demo/DoneCheckmark.tsx
-import { jsx as jsx91, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs29 } from "react/jsx-runtime";
 var DoneCheckmark = () => {
-  return /* @__PURE__ */ jsx91("div", {
+  return /* @__PURE__ */ jsx90("div", {
     style: {
       backgroundColor: PALETTE.BRAND,
       height: 26,
@@ -49041,7 +49154,7 @@ var DoneCheckmark = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsxs30("svg", {
+    children: /* @__PURE__ */ jsxs29("svg", {
       viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -49050,13 +49163,13 @@ var DoneCheckmark = () => {
         width: 26
       },
       children: [
-        /* @__PURE__ */ jsx91("circle", {
+        /* @__PURE__ */ jsx90("circle", {
           cx: "10",
           cy: "10",
           r: "10",
           fill: "#0B84F3"
         }),
-        /* @__PURE__ */ jsx91("path", {
+        /* @__PURE__ */ jsx90("path", {
           d: "M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z",
           fill: "white",
           style: {
@@ -49070,7 +49183,7 @@ var DoneCheckmark = () => {
 };
 
 // src/components/homepage/Demo/Progress.tsx
-import { jsx as jsx95, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs30 } from "react/jsx-runtime";
 var Progress = ({ progress }) => {
   const inner2 = makeCircle({
     radius: 10
@@ -49080,17 +49193,17 @@ var Progress = ({ progress }) => {
     closePath: false,
     radius: 10
   });
-  return /* @__PURE__ */ jsxs31("svg", {
+  return /* @__PURE__ */ jsxs30("svg", {
     viewBox: `0 0 ${inner2.width} ${inner2.height}`,
     style: { overflow: "visible", height: 22 },
     children: [
-      /* @__PURE__ */ jsx95("path", {
+      /* @__PURE__ */ jsx91("path", {
         d: inner2.path,
         stroke: PALETTE.BORDER_COLOR,
         strokeWidth: 4,
         fill: "transparent"
       }),
-      /* @__PURE__ */ jsx95("path", {
+      /* @__PURE__ */ jsx91("path", {
         d: outer.path,
         stroke: PALETTE.BRAND,
         strokeWidth: 4,
@@ -49102,23 +49215,23 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo66 } from "react";
-import { jsx as jsx97, jsxs as jsxs34, Fragment as Fragment16 } from "react/jsx-runtime";
+import { useMemo as useMemo67 } from "react";
+import { jsx as jsx95, jsxs as jsxs31, Fragment as Fragment15 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
 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 = useMemo66(() => {
+  const style2 = useMemo67(() => {
     return {
       width: size4,
       height: size4
     };
   }, [size4]);
-  return /* @__PURE__ */ jsxs34(Fragment16, {
+  return /* @__PURE__ */ jsxs31(Fragment15, {
     children: [
-      /* @__PURE__ */ jsx97("style", {
+      /* @__PURE__ */ jsx95("style", {
         type: "text/css",
         children: `
 				@keyframes ${remotionSpinnerAnimation} {
@@ -49135,11 +49248,11 @@ var Spinner2 = ({ size: size4, duration }) => {
         }        
 			`
       }),
-      /* @__PURE__ */ jsx97("svg", {
+      /* @__PURE__ */ jsx95("svg", {
         style: style2,
         viewBox: `0 0 ${viewBox2} ${viewBox2}`,
         children: new Array(lines2).fill(true).map((_, index2) => {
-          return /* @__PURE__ */ jsx97("path", {
+          return /* @__PURE__ */ jsx95("path", {
             className: className2,
             style: {
               rotate: `${index2 * Math.PI * 2 / lines2}rad`,
@@ -49156,7 +49269,7 @@ var Spinner2 = ({ size: size4, duration }) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var countryPath = z.object({
   d: z.string(),
   class: z.string()
@@ -49246,24 +49359,24 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
       onError();
     }
   }, [onError, renderData, playerRef]);
-  return /* @__PURE__ */ jsx98("button", {
+  return /* @__PURE__ */ jsx97("button", {
     type: "button",
     onClick: triggerRender,
     style: style2,
     disabled: !renderData || state.type !== "idle",
-    children: state.type === "error" ? /* @__PURE__ */ jsx98(DemoErrorIcon, {}) : state.type === "done" ? /* @__PURE__ */ jsx98(DoneCheckmark, {}) : state.type === "progress" ? /* @__PURE__ */ jsx98(Progress, {
+    children: state.type === "error" ? /* @__PURE__ */ jsx97(DemoErrorIcon, {}) : state.type === "done" ? /* @__PURE__ */ jsx97(DoneCheckmark, {}) : state.type === "progress" ? /* @__PURE__ */ jsx97(Progress, {
       progress: state.progress
-    }) : state.type === "invoking" ? /* @__PURE__ */ jsx98(Spinner2, {
+    }) : state.type === "invoking" ? /* @__PURE__ */ jsx97(Spinner2, {
       size: 20,
       duration: 1
-    }) : /* @__PURE__ */ jsx98("svg", {
+    }) : /* @__PURE__ */ jsx97("svg", {
       style: {
         width: 18,
         opacity: renderData ? 1 : 0.5
       },
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 384 512",
-      children: /* @__PURE__ */ jsx98("path", {
+      children: /* @__PURE__ */ jsx97("path", {
         fill: PALETTE.TEXT_COLOR,
         d: "M214.6 342.6L192 365.3l-22.6-22.6-128-128L18.7 192 64 146.7l22.6 22.6L160 242.7 160 64l0-32 64 0 0 32 0 178.7 73.4-73.4L320 146.7 365.3 192l-22.6 22.6-128 128zM32 416l320 0 32 0 0 64-32 0L32 480 0 480l0-64 32 0z"
       })
@@ -49272,18 +49385,18 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
 };
 
 // src/components/homepage/Demo/DownloadNudge.tsx
-import { jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs34 } from "react/jsx-runtime";
 var origWidth = 77;
 var scale = 0.4;
 var Icon3 = () => {
-  return /* @__PURE__ */ jsx99("svg", {
+  return /* @__PURE__ */ jsx98("svg", {
     style: {
       width: origWidth * scale
     },
     viewBox: "0 0 77 160",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx99("path", {
+    children: /* @__PURE__ */ jsx98("path", {
       d: "M5 154.5C51 121 79 81 69 5",
       stroke: "currentColor",
       strokeWidth: "8",
@@ -49292,7 +49405,7 @@ var Icon3 = () => {
   });
 };
 var DownloadNudge = () => {
-  return /* @__PURE__ */ jsx99("div", {
+  return /* @__PURE__ */ jsx98("div", {
     style: {
       position: "relative",
       flexDirection: "row",
@@ -49302,10 +49415,10 @@ var DownloadNudge = () => {
       paddingRight: 24,
       paddingTop: 18
     },
-    children: /* @__PURE__ */ jsxs36("div", {
+    children: /* @__PURE__ */ jsxs34("div", {
       children: [
-        /* @__PURE__ */ jsx99(Icon3, {}),
-        /* @__PURE__ */ jsx99("div", {
+        /* @__PURE__ */ jsx98(Icon3, {}),
+        /* @__PURE__ */ jsx98("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -49322,18 +49435,18 @@ var DownloadNudge = () => {
 };
 
 // src/components/homepage/Demo/DragAndDropNudge.tsx
-import { jsx as jsx100, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
 var origWidth2 = 37;
 var scale2 = 0.4;
 var Icon5 = () => {
-  return /* @__PURE__ */ jsx100("svg", {
+  return /* @__PURE__ */ jsx99("svg", {
     style: {
       width: origWidth2 * scale2,
       overflow: "visible"
     },
     viewBox: "0 0 37 59",
     fill: "none",
-    children: /* @__PURE__ */ jsx100("path", {
+    children: /* @__PURE__ */ jsx99("path", {
       d: "M5.00003 5C5.00002 36.5 16 44 32.0002 54",
       stroke: PALETTE.TEXT_COLOR,
       strokeWidth: "8",
@@ -49342,7 +49455,7 @@ var Icon5 = () => {
   });
 };
 var DragAndDropNudge = () => {
-  return /* @__PURE__ */ jsx100("div", {
+  return /* @__PURE__ */ jsx99("div", {
     style: {
       position: "absolute",
       flexDirection: "row",
@@ -49352,9 +49465,9 @@ var DragAndDropNudge = () => {
       marginTop: 18
     },
     className: "ml-4 lg:-ml-5",
-    children: /* @__PURE__ */ jsxs37("div", {
+    children: /* @__PURE__ */ jsxs36("div", {
       children: [
-        /* @__PURE__ */ jsx100("div", {
+        /* @__PURE__ */ jsx99("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -49365,20 +49478,20 @@ var DragAndDropNudge = () => {
           className: "-ml-3 lg:-ml-5",
           children: "Drag and drop the cards to reorder them."
         }),
-        /* @__PURE__ */ jsx100(Icon5, {})
+        /* @__PURE__ */ jsx99(Icon5, {})
       ]
     })
   });
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback50, useEffect as useEffect51, useMemo as useMemo68, useRef as useRef57, useState as useState51 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect51, useMemo as useMemo69, useRef as useRef57, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback49, useEffect as useEffect50, useMemo as useMemo67, useState as useState50 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect50, useMemo as useMemo68, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
-  const observer = useMemo67(() => {
+  const observer = useMemo68(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -49417,7 +49530,7 @@ var useElementSize2 = (ref) => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { jsx as jsx101, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs37 } from "react/jsx-runtime";
 var getFrameFromX2 = (clientX, durationInFrames, width2) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width2], [0, durationInFrames - 1], {
@@ -49592,7 +49705,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo68(() => {
+  const knobStyle = useMemo69(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -49606,7 +49719,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo68(() => {
+  const fillStyle = useMemo69(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -49615,7 +49728,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo68(() => {
+  const active = useMemo69(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -49626,23 +49739,23 @@ var PlayerSeekBar2 = ({
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs38("div", {
+  return /* @__PURE__ */ jsxs37("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle3,
     children: [
-      /* @__PURE__ */ jsxs38("div", {
+      /* @__PURE__ */ jsxs37("div", {
         style: barBackground2,
         children: [
-          /* @__PURE__ */ jsx101("div", {
+          /* @__PURE__ */ jsx100("div", {
             style: active
           }),
-          /* @__PURE__ */ jsx101("div", {
+          /* @__PURE__ */ jsx100("div", {
             style: fillStyle
           })
         ]
       }),
-      /* @__PURE__ */ jsx101("div", {
+      /* @__PURE__ */ jsx100("div", {
         style: knobStyle
       })
     ]
@@ -49653,9 +49766,9 @@ var PlayerSeekBar2 = ({
 import { useCallback as useCallback51, useEffect as useEffect53, useRef as useRef58, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var PausedIcon = (props) => {
-  return /* @__PURE__ */ jsx105("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     "aria-hidden": "true",
     focusable: "false",
     "data-prefix": "fas",
@@ -49665,48 +49778,48 @@ var PausedIcon = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 480 512",
     ...props,
-    children: /* @__PURE__ */ jsx105("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       fill: "currentColor",
       d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
     })
   });
 };
 var PlayingIcon = (props) => {
-  return /* @__PURE__ */ jsx105("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 400 512",
     fill: "currentColor",
     ...props,
-    children: /* @__PURE__ */ jsx105("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       d: "M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"
     })
   });
 };
 var NotMutedIcon = (props) => {
-  return /* @__PURE__ */ jsx105("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 640 512",
     fill: "currentColor",
-    children: /* @__PURE__ */ jsx105("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       d: "M32 160l0 192 128 0L304 480l48 0 0-448-48 0L160 160 32 160zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z"
     })
   });
 };
 var IsMutedIcon = (props) => {
-  return /* @__PURE__ */ jsx105("svg", {
+  return /* @__PURE__ */ jsx101("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 640 512",
     fill: RED,
-    children: /* @__PURE__ */ jsx105("path", {
+    children: /* @__PURE__ */ jsx101("path", {
       d: "M48.4 14.8L29.4 .1 0 38l19 14.7L591.5 497.2l19 14.7L639.9 474l-19-14.7-95.1-73.8C557 351.3 576 305.9 576 256c0-62.8-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2c0 38.8-15.3 74-40.3 99.9l-38.2-29.7C468.3 308.7 480 283.7 480 256c0-31.4-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l5.9 7.9L352 250.5 352 32l-48 0L195.2 128.7 48.4 14.8zM352 373.3L81.2 160 32 160l0 192 128 0L304 480l48 0 0-106.7z"
     })
   });
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
@@ -49742,10 +49855,10 @@ var PlayerVolume = ({ playerRef }) => {
       playerRef.current.mute();
     }
   }, [playerRef]);
-  return /* @__PURE__ */ jsx107("div", {
+  return /* @__PURE__ */ jsx105("div", {
     className: "relative cursor-pointer block pl-4 pr-4 h-full",
     onPointerEnter: () => setIsHovered(true),
-    children: /* @__PURE__ */ jsx107("button", {
+    children: /* @__PURE__ */ jsx105("button", {
       type: "button",
       onClick,
       style: {
@@ -49759,9 +49872,9 @@ var PlayerVolume = ({ playerRef }) => {
         alignItems: "center",
         color: PALETTE.TEXT_COLOR
       },
-      children: muted ? /* @__PURE__ */ jsx107(IsMutedIcon, {
+      children: muted ? /* @__PURE__ */ jsx105(IsMutedIcon, {
         style: { height: 20 }
-      }) : /* @__PURE__ */ jsx107(NotMutedIcon, {
+      }) : /* @__PURE__ */ jsx105(NotMutedIcon, {
         style: { height: 20 }
       })
     })
@@ -49770,7 +49883,7 @@ var PlayerVolume = ({ playerRef }) => {
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
 import React75, { useCallback as useCallback53, useEffect as useEffect55 } from "react";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
   border: "none",
@@ -49811,13 +49924,13 @@ var PlayPauseButton = ({ playerRef }) => {
   const playPauseIconStyle = {
     width: 15
   };
-  return /* @__PURE__ */ jsx108("button", {
+  return /* @__PURE__ */ jsx107("button", {
     type: "button",
     style: playerButtonStyle2,
     onClick: onToggle,
-    children: playing ? /* @__PURE__ */ jsx108(PlayingIcon, {
+    children: playing ? /* @__PURE__ */ jsx107(PlayingIcon, {
       style: playPauseIconStyle
-    }) : /* @__PURE__ */ jsx108(PausedIcon, {
+    }) : /* @__PURE__ */ jsx107(PausedIcon, {
       style: playPauseIconStyle
     })
   });
@@ -49825,7 +49938,7 @@ var PlayPauseButton = ({ playerRef }) => {
 
 // src/components/homepage/Demo/TimeDisplay.tsx
 import React76, { useEffect as useEffect56 } from "react";
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
   const seconds = Math.floor(timeInSeconds - minutes * 60);
@@ -49846,21 +49959,21 @@ var TimeDisplay = ({ fps, playerRef }) => {
       current.removeEventListener("frameupdate", onTimeUpdate);
     };
   }, [playerRef]);
-  return /* @__PURE__ */ jsx109("div", {
+  return /* @__PURE__ */ jsx108("div", {
     style: {
       fontSize: 16,
       fontVariantNumeric: "tabular-nums"
     },
-    children: /* @__PURE__ */ jsx109("span", {
+    children: /* @__PURE__ */ jsx108("span", {
       children: formatTime2(time / fps)
     })
   });
 };
 
 // src/components/homepage/Demo/PlayerControls.tsx
-import { jsx as jsx110, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs38 } from "react/jsx-runtime";
 var Separator2 = () => {
-  return /* @__PURE__ */ jsx110("div", {
+  return /* @__PURE__ */ jsx109("div", {
     style: {
       borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
       height: 50
@@ -49868,28 +49981,28 @@ var Separator2 = () => {
   });
 };
 var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
-  return /* @__PURE__ */ jsxs39("div", {
+  return /* @__PURE__ */ jsxs38("div", {
     className: "flex flex-row items-center bg-pane",
     children: [
-      /* @__PURE__ */ jsx110(PlayPauseButton, {
+      /* @__PURE__ */ jsx109(PlayPauseButton, {
         playerRef
       }),
-      /* @__PURE__ */ jsx110(Separator2, {}),
-      /* @__PURE__ */ jsx110(PlayerVolume, {
+      /* @__PURE__ */ jsx109(Separator2, {}),
+      /* @__PURE__ */ jsx109(PlayerVolume, {
         playerRef
       }),
-      /* @__PURE__ */ jsx110(Separator2, {}),
-      /* @__PURE__ */ jsx110("div", {
+      /* @__PURE__ */ jsx109(Separator2, {}),
+      /* @__PURE__ */ jsx109("div", {
         style: { width: 15 }
       }),
-      /* @__PURE__ */ jsx110(TimeDisplay, {
+      /* @__PURE__ */ jsx109(TimeDisplay, {
         playerRef,
         fps
       }),
-      /* @__PURE__ */ jsx110("div", {
+      /* @__PURE__ */ jsx109("div", {
         style: { width: 15 }
       }),
-      /* @__PURE__ */ jsx110(PlayerSeekBar2, {
+      /* @__PURE__ */ jsx109(PlayerSeekBar2, {
         durationInFrames,
         playerRef,
         inFrame: null,
@@ -49901,10 +50014,10 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
           return;
         }
       }),
-      /* @__PURE__ */ jsx110("div", {
+      /* @__PURE__ */ jsx109("div", {
         style: { width: 20 }
       }),
-      /* @__PURE__ */ jsx110(Separator2, {}),
+      /* @__PURE__ */ jsx109(Separator2, {}),
       children
     ]
   });
@@ -49912,11 +50025,11 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 
 // src/components/homepage/Demo/ThemeNudge.tsx
 import React77 from "react";
-import { jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs39 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
 var Icon6 = () => {
-  return /* @__PURE__ */ jsx111("svg", {
+  return /* @__PURE__ */ jsx110("svg", {
     style: {
       width: origWidth3 * scale3,
       overflow: "visible"
@@ -49924,7 +50037,7 @@ var Icon6 = () => {
     viewBox: "0 0 37 59",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx111("path", {
+    children: /* @__PURE__ */ jsx110("path", {
       d: "M32 5C32 36.5 21 44 5 54",
       stroke: "currentColor",
       strokeWidth: "8",
@@ -49938,7 +50051,7 @@ var ThemeNudge = () => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
-  return /* @__PURE__ */ jsx111("div", {
+  return /* @__PURE__ */ jsx110("div", {
     style: {
       flexDirection: "row",
       display: "flex",
@@ -49948,9 +50061,9 @@ var ThemeNudge = () => {
       position: "absolute"
     },
     className: "lg:top-3 lg:-right-6 right-0 top-0",
-    children: /* @__PURE__ */ jsxs40("div", {
+    children: /* @__PURE__ */ jsxs39("div", {
       children: [
-        /* @__PURE__ */ jsxs40("div", {
+        /* @__PURE__ */ jsxs39("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -49961,7 +50074,7 @@ var ThemeNudge = () => {
             marginTop: 5
           },
           children: [
-            /* @__PURE__ */ jsxs40("a", {
+            /* @__PURE__ */ jsxs39("a", {
               href: "#",
               onClick: toggleTheme,
               className: "bluelink",
@@ -49976,14 +50089,14 @@ var ThemeNudge = () => {
             " "
           ]
         }),
-        /* @__PURE__ */ jsx111(Icon6, {})
+        /* @__PURE__ */ jsx110(Icon6, {})
       ]
     })
   });
 };
 
 // src/components/homepage/Demo/index.tsx
-import { jsx as jsx115, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
 var style3 = {
   width: "100%",
   aspectRatio: "640 / 360",
@@ -50029,7 +50142,7 @@ var Demo = () => {
   const updateCardOrder = useCallback55((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo69(() => {
+  const props = useMemo70(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -50051,28 +50164,27 @@ var Demo = () => {
   const onError = useCallback55(() => {
     setError(true);
   }, []);
-  return /* @__PURE__ */ jsxs41("div", {
+  return /* @__PURE__ */ jsxs40("div", {
     id: "demo",
+    className: "pt-24",
     children: [
-      /* @__PURE__ */ jsx115("br", {}),
-      /* @__PURE__ */ jsx115("br", {}),
-      /* @__PURE__ */ jsx115(SectionTitle, {
+      /* @__PURE__ */ jsx111(SectionTitle, {
         children: "Interactive demo"
       }),
-      /* @__PURE__ */ jsxs41("div", {
+      /* @__PURE__ */ jsxs40("div", {
         className: "max-w-[760px] mx-auto",
         children: [
-          /* @__PURE__ */ jsxs41("div", {
+          /* @__PURE__ */ jsxs40("div", {
             className: "h-[105px] relative",
             children: [
-              /* @__PURE__ */ jsx115(DragAndDropNudge, {}),
-              /* @__PURE__ */ jsx115(ThemeNudge, {})
+              /* @__PURE__ */ jsx111(DragAndDropNudge, {}),
+              /* @__PURE__ */ jsx111(ThemeNudge, {})
             ]
           }),
-          /* @__PURE__ */ jsxs41("div", {
+          /* @__PURE__ */ jsxs40("div", {
             style: playerWrapper,
             children: [
-              /* @__PURE__ */ jsx115(Player, {
+              /* @__PURE__ */ jsx111(Player, {
                 ref,
                 component: HomepageVideoComp,
                 compositionWidth: 640,
@@ -50089,11 +50201,11 @@ var Demo = () => {
                 numberOfSharedAudioTags: 0,
                 loop: true
               }),
-              /* @__PURE__ */ jsx115(PlayerControls, {
+              /* @__PURE__ */ jsx111(PlayerControls, {
                 playerRef: ref,
                 durationInFrames: 120,
                 fps: 30,
-                children: /* @__PURE__ */ jsx115(RenderButton, {
+                children: /* @__PURE__ */ jsx111(RenderButton, {
                   onError,
                   renderData: data2 ? {
                     cardOrder,
@@ -50107,8 +50219,8 @@ var Demo = () => {
               })
             ]
           }),
-          error2 ? /* @__PURE__ */ jsx115(DemoError, {}) : null,
-          /* @__PURE__ */ jsx115(DownloadNudge, {})
+          error2 ? /* @__PURE__ */ jsx111(DemoError, {}) : null,
+          /* @__PURE__ */ jsx111(DownloadNudge, {})
         ]
       })
     ]
@@ -50119,7 +50231,7 @@ var Demo = () => {
 import { useEffect as useEffect58, useState as useState57 } from "react";
 
 // src/components/homepage/layout/Button.tsx
-import { jsx as jsx117 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var Button2 = (props) => {
   const {
     children,
@@ -50132,7 +50244,7 @@ var Button2 = (props) => {
     ...other
   } = props;
   const actualDisabled = other.disabled || loading;
-  return /* @__PURE__ */ jsx117("button", {
+  return /* @__PURE__ */ jsx115("button", {
     type: "button",
     className: cn2("text-base rounded-lg font-bold appearance-none border-2 border-solid border-black border-b-4 font-sans flex flex-row items-center justify-center ", className3),
     disabled: actualDisabled,
@@ -50150,7 +50262,7 @@ var Button2 = (props) => {
   });
 };
 var BlueButton = (props) => {
-  return /* @__PURE__ */ jsx117(Button2, {
+  return /* @__PURE__ */ jsx115(Button2, {
     ...props,
     background: "var(--blue-underlay)",
     color: "white"
@@ -50158,7 +50270,7 @@ var BlueButton = (props) => {
 };
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState57([]);
   useEffect58(() => {
@@ -50171,41 +50283,41 @@ var EvaluateRemotionSection = () => {
     }
     setDailyAvatars(selectedAvatars);
   }, []);
-  return /* @__PURE__ */ jsxs44("div", {
+  return /* @__PURE__ */ jsxs41("div", {
     className: "flex flex-col lg:flex-row gap-2",
     children: [
-      /* @__PURE__ */ jsxs44("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "card flex-1 flex flex-col",
         children: [
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx117("div", {
             className: "fontbrand text-2xl font-bold",
             children: "Questions about our license?"
           }),
-          /* @__PURE__ */ jsx118("p", {
+          /* @__PURE__ */ jsx117("p", {
             className: "text-muted fontbrand leading-snug",
             children: "Book a 20 minute call or write us an email to get all your questions answered."
           }),
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx117("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs44("div", {
+          /* @__PURE__ */ jsxs41("div", {
             className: "flex flex-row flex-wrap gap-2",
             children: [
-              /* @__PURE__ */ jsx118("a", {
+              /* @__PURE__ */ jsx117("a", {
                 target: "_blank",
                 href: "https://cal.com/remotion/evaluate",
                 style: { textDecoration: "none" },
-                children: /* @__PURE__ */ jsx118(BlueButton, {
+                children: /* @__PURE__ */ jsx117(BlueButton, {
                   size: "sm",
                   loading: false,
                   children: "Schedule a call"
                 })
               }),
-              /* @__PURE__ */ jsx118("a", {
+              /* @__PURE__ */ jsx117("a", {
                 target: "_blank",
                 href: "mailto:hi@remotion.dev",
                 style: { textDecoration: "none" },
-                children: /* @__PURE__ */ jsx118(BlueButton, {
+                children: /* @__PURE__ */ jsx117(BlueButton, {
                   size: "sm",
                   loading: false,
                   children: "Write an email"
@@ -50215,35 +50327,35 @@ var EvaluateRemotionSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs44("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "card flex-1 flex flex-col",
         children: [
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx117("div", {
             className: "fontbrand text-2xl font-bold",
             children: "Get help with your Remotion project"
           }),
-          /* @__PURE__ */ jsx118("p", {
+          /* @__PURE__ */ jsx117("p", {
             className: "text-muted fontbrand leading-snug",
             children: "Contact our experts for help and work."
           }),
-          /* @__PURE__ */ jsx118("div", {
+          /* @__PURE__ */ jsx117("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs44("div", {
+          /* @__PURE__ */ jsxs41("div", {
             className: "flex flex-row justify-between",
             children: [
-              /* @__PURE__ */ jsx118("a", {
+              /* @__PURE__ */ jsx117("a", {
                 href: "/experts",
                 style: { textDecoration: "none" },
-                children: /* @__PURE__ */ jsx118(BlueButton, {
+                children: /* @__PURE__ */ jsx117(BlueButton, {
                   size: "sm",
                   loading: false,
                   children: "Remotion Experts"
                 })
               }),
-              /* @__PURE__ */ jsx118("div", {
+              /* @__PURE__ */ jsx117("div", {
                 className: "flex justify-end items-end gap-3",
-                children: dailyAvatars.map((avatar) => /* @__PURE__ */ jsx118("div", {
+                children: dailyAvatars.map((avatar) => /* @__PURE__ */ jsx117("div", {
                   className: "w-12 h-12 rounded-full bg-muted bg-cover bg-center -ml-5 border-2 border-black",
                   style: { backgroundImage: `url(${avatar})` }
                 }, avatar))
@@ -50258,26 +50370,26 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/MakeVideosAgentically.tsx
-import { useEffect as useEffect59, useRef as useRef60 } from "react";
+import { useEffect as useEffect61, useRef as useRef60 } from "react";
 
 // src/components/homepage/MakeVideosLinks.tsx
 import React80 from "react";
-import { jsx as jsx119, jsxs as jsxs46, Fragment as Fragment17 } from "react/jsx-runtime";
-var icon3 = {
+import { jsx as jsx118, jsxs as jsxs44, Fragment as Fragment16 } from "react/jsx-runtime";
+var icon2 = {
   height: 16,
   marginLeft: 10
 };
 var MakeVideosLinkItem = ({ href, label: label3 }) => {
-  return /* @__PURE__ */ jsxs46("a", {
+  return /* @__PURE__ */ jsxs44("a", {
     className: "no-underline text-[var(--subtitle)] font-brand font-medium text-sm inline-flex flex-row items-center",
     href,
     children: [
       label3,
-      /* @__PURE__ */ jsx119("svg", {
-        style: icon3,
+      /* @__PURE__ */ jsx118("svg", {
+        style: icon2,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 448 512",
-        children: /* @__PURE__ */ jsx119("path", {
+        children: /* @__PURE__ */ jsx118("path", {
           fill: "currentColor",
           d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"
         })
@@ -50289,20 +50401,20 @@ var MakeVideosLinks = ({ links }) => {
   if (links.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs46(Fragment17, {
+  return /* @__PURE__ */ jsxs44(Fragment16, {
     children: [
-      /* @__PURE__ */ jsx119("div", {
+      /* @__PURE__ */ jsx118("div", {
         className: "h-4"
       }),
-      /* @__PURE__ */ jsx119("div", {
+      /* @__PURE__ */ jsx118("div", {
         className: "leading-6",
         children: links.map((link) => {
-          return /* @__PURE__ */ jsxs46(React80.Fragment, {
+          return /* @__PURE__ */ jsxs44(React80.Fragment, {
             children: [
-              /* @__PURE__ */ jsx119(MakeVideosLinkItem, {
+              /* @__PURE__ */ jsx118(MakeVideosLinkItem, {
                 ...link
               }),
-              /* @__PURE__ */ jsx119("br", {})
+              /* @__PURE__ */ jsx118("br", {})
             ]
           }, link.href);
         })
@@ -50311,10 +50423,37 @@ var MakeVideosLinks = ({ links }) => {
   });
 };
 
+// src/components/homepage/use-transparent-video-source.ts
+import { useEffect as useEffect60, useState as useState59 } from "react";
+
+// src/components/homepage/IfYouKnowReact.tsx
+import { useEffect as useEffect59, useState as useState58 } from "react";
+import { jsx as jsx119, jsxs as jsxs46 } from "react/jsx-runtime";
+var isWebkit = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const isSafariUserAgent = Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
+  const isChrome = Boolean(navigator.userAgent.match(/CriOS\//));
+  return isSafariUserAgent || isChrome;
+};
+
+// src/components/homepage/use-transparent-video-source.ts
+var useTransparentVideoSource = ({
+  fallbackVideoSrc,
+  videoSrc
+}) => {
+  const [src, setSrc] = useState59(videoSrc);
+  useEffect60(() => {
+    setSrc(isWebkit() ? fallbackVideoSrc : videoSrc);
+  }, [fallbackVideoSrc, videoSrc]);
+  return src;
+};
+
 // src/components/homepage/MakeVideosAgentically.tsx
-import { jsx as jsx120, jsxs as jsxs47, Fragment as Fragment18 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs47, Fragment as Fragment17 } from "react/jsx-runtime";
 var MakeVideosAgentically = ({
-  title = /* @__PURE__ */ jsxs47(Fragment18, {
+  title = /* @__PURE__ */ jsxs47(Fragment17, {
     children: [
       /* @__PURE__ */ jsx120("span", {
         className: "text-[var(--subtitle)]",
@@ -50336,7 +50475,8 @@ var MakeVideosAgentically = ({
 }) => {
   const ref = useRef60(null);
   const videoRef = useRef60(null);
-  useEffect59(() => {
+  const src = useTransparentVideoSource({ fallbackVideoSrc, videoSrc });
+  useEffect61(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -50359,8 +50499,9 @@ var MakeVideosAgentically = ({
     children: [
       /* @__PURE__ */ jsx120("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs47("video", {
+        children: showVideo ? /* @__PURE__ */ jsx120("video", {
           ref: videoRef,
+          src,
           muted: true,
           autoPlay: true,
           playsInline: true,
@@ -50373,17 +50514,7 @@ var MakeVideosAgentically = ({
             borderRadius: 7,
             overflow: "hidden"
           },
-          className: "cursor-default! relative object-contain",
-          children: [
-            /* @__PURE__ */ jsx120("source", {
-              src: fallbackVideoSrc,
-              type: "video/mp4"
-            }),
-            /* @__PURE__ */ jsx120("source", {
-              src: videoSrc,
-              type: "video/webm"
-            })
-          ]
+          className: "cursor-default! relative object-contain"
         }) : null
       }),
       /* @__PURE__ */ jsxs47("div", {
@@ -50408,9 +50539,9 @@ var MakeVideosAgentically = ({
 
 // src/components/homepage/MakeVideosInteractively.tsx
 import { useRef as useRef61 } from "react";
-import { jsx as jsx121, jsxs as jsxs48, Fragment as Fragment19 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs48, Fragment as Fragment18 } from "react/jsx-runtime";
 var MakeVideosInteractively = ({
-  title = /* @__PURE__ */ jsxs48(Fragment19, {
+  title = /* @__PURE__ */ jsxs48(Fragment18, {
     children: [
       /* @__PURE__ */ jsx121("span", {
         className: "text-[var(--subtitle)]",
@@ -50428,13 +50559,15 @@ var MakeVideosInteractively = ({
   fallbackVideoSrc = "/img/editing-safari.mp4"
 }) => {
   const ref = useRef61(null);
+  const src = useTransparentVideoSource({ fallbackVideoSrc, videoSrc });
   return /* @__PURE__ */ jsxs48("div", {
     ref,
     className: "flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1",
     children: [
       /* @__PURE__ */ jsx121("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs48("video", {
+        children: showVideo ? /* @__PURE__ */ jsx121("video", {
+          src,
           autoPlay: true,
           muted: true,
           playsInline: true,
@@ -50447,17 +50580,7 @@ var MakeVideosInteractively = ({
             borderRadius: 7,
             overflow: "hidden"
           },
-          className: "object-contain",
-          children: [
-            /* @__PURE__ */ jsx121("source", {
-              src: fallbackVideoSrc,
-              type: "video/mp4"
-            }),
-            /* @__PURE__ */ jsx121("source", {
-              src: videoSrc,
-              type: "video/webm"
-            })
-          ]
+          className: "object-contain"
         }) : null
       }),
       /* @__PURE__ */ jsxs48("div", {
@@ -50481,9 +50604,9 @@ var MakeVideosInteractively = ({
 };
 
 // src/components/homepage/MakeVideosProgrammatically.tsx
-import { jsx as jsx125, jsxs as jsxs49, Fragment as Fragment20 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs49, Fragment as Fragment19 } from "react/jsx-runtime";
 var MakeVideosProgrammatically = ({
-  title = /* @__PURE__ */ jsxs49(Fragment20, {
+  title = /* @__PURE__ */ jsxs49(Fragment19, {
     children: [
       /* @__PURE__ */ jsx125("span", {
         className: "text-[var(--subtitle)]",
@@ -50500,28 +50623,20 @@ var MakeVideosProgrammatically = ({
   videoSrc = "/img/what-is-remotion.webm",
   fallbackVideoSrc = "/img/what-is-remotion.mp4"
 }) => {
+  const src = useTransparentVideoSource({ fallbackVideoSrc, videoSrc });
   return /* @__PURE__ */ jsxs49("div", {
     className: "flex min-w-0 basis-0 flex-col flex-1",
     children: [
       /* @__PURE__ */ jsx125("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs49("video", {
+        children: showVideo ? /* @__PURE__ */ jsx125("video", {
+          src,
           muted: true,
           autoPlay: true,
           playsInline: true,
           loop: true,
           preload: "metadata",
-          className: "relative max-h-full max-w-full cursor-default! object-contain lg:mb-0 lg:mt-0",
-          children: [
-            /* @__PURE__ */ jsx125("source", {
-              src: fallbackVideoSrc,
-              type: "video/mp4"
-            }),
-            /* @__PURE__ */ jsx125("source", {
-              src: videoSrc,
-              type: "video/webm"
-            })
-          ]
+          className: "relative max-h-full max-w-full cursor-default! object-contain lg:mb-0 lg:mt-0"
         }) : null
       }),
       /* @__PURE__ */ jsxs49("div", {
@@ -50545,12 +50660,12 @@ var MakeVideosProgrammatically = ({
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback56, useState as useState58 } from "react";
+import { useCallback as useCallback56, useState as useState60 } from "react";
 import { jsx as jsx127, jsxs as jsxs50 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState58("");
-  const [submitting, setSubmitting] = useState58(false);
-  const [subscribed, setSubscribed] = useState58(false);
+  const [email, setEmail] = useState60("");
+  const [submitting, setSubmitting] = useState60(false);
+  const [subscribed, setSubscribed] = useState60(false);
   const handleSubmit = useCallback56(async (e) => {
     try {
       setSubmitting(true);
@@ -50633,7 +50748,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/TrustedByBanner.tsx
-import { jsx as jsx128, jsxs as jsxs51, Fragment as Fragment21 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs51, Fragment as Fragment20 } from "react/jsx-runtime";
 var TrustedByBanner = () => {
   const logos = [
     {
@@ -50746,7 +50861,7 @@ var TrustedByBanner = () => {
       })
     }
   ];
-  return /* @__PURE__ */ jsxs51(Fragment21, {
+  return /* @__PURE__ */ jsxs51(Fragment20, {
     children: [
       /* @__PURE__ */ jsx128("h3", {
         className: "text-center mt-20 mb-10",
@@ -50767,20 +50882,20 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef66, useState as useState60 } from "react";
+import { useRef as useRef66, useState as useState64 } from "react";
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef41, useEffect as useEffect61, useImperativeHandle as useImperativeHandle15, useRef as useRef65 } from "react";
+import { forwardRef as forwardRef41, useEffect as useEffect65, useImperativeHandle as useImperativeHandle15, useRef as useRef65 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef40, useCallback as useCallback57, useEffect as useEffect60, useRef as useRef63, useState as useState59 } from "react";
+import { forwardRef as forwardRef40, useCallback as useCallback57, useEffect as useEffect63, useRef as useRef63, useState as useState61 } from "react";
 import { jsx as jsx129 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef63(null);
-  useEffect60(() => {
+  useEffect63(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -50797,7 +50912,7 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
   const videoRef = useRef63(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef63(null);
-  const [playerInitTime] = useState59(Date.now());
+  const [playerInitTime] = useState61(Date.now());
   const videoError = useCallback57((event) => onError(event), [onError]);
   const onImageLoad = useCallback57((event) => {
     const [w, h] = [event.target.width, event.target.height];
@@ -50809,12 +50924,12 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect60(() => {
+  useEffect63(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect60(() => {
+  useEffect63(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -50857,7 +50972,7 @@ var VideoPlayerWithControls = forwardRef40(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect60(() => {
+  useEffect63(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -50884,7 +50999,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef65(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle15(ref, () => videoRef.current, []);
-  useEffect61(() => {
+  useEffect65(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -50959,12 +51074,12 @@ var videoApps = [
     buttonText: "GitHub Unwrapped website"
   }
 ];
-var icon4 = {
+var icon3 = {
   height: 16,
   marginLeft: 10
 };
-var Arrow4 = () => /* @__PURE__ */ jsx131("svg", {
-  style: icon4,
+var Arrow3 = () => /* @__PURE__ */ jsx131("svg", {
+  style: icon3,
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512",
   children: /* @__PURE__ */ jsx131("path", {
@@ -50973,10 +51088,10 @@ var Arrow4 = () => /* @__PURE__ */ jsx131("svg", {
   })
 });
 var BuiltWithRemotionShowcase = () => {
-  const [activeTab, setActiveTab] = useState60(0);
-  const [isMuted, setIsMuted] = useState60(true);
-  const [isPlaying, setIsPlaying] = useState60(false);
-  const [videoLoaded, setVideoLoaded] = useState60(false);
+  const [activeTab, setActiveTab] = useState64(0);
+  const [isMuted, setIsMuted] = useState64(true);
+  const [isPlaying, setIsPlaying] = useState64(false);
+  const [videoLoaded, setVideoLoaded] = useState64(false);
   const videoRef = useRef66(null);
   const containerRef = useRef66(null);
   const handleTabChange = (index2) => {
@@ -51128,7 +51243,7 @@ var BuiltWithRemotionShowcase = () => {
                   href: videoApps[activeTab].link,
                   children: [
                     videoApps[activeTab].buttonText,
-                    /* @__PURE__ */ jsx131(Arrow4, {})
+                    /* @__PURE__ */ jsx131(Arrow3, {})
                   ]
                 })
               ]
@@ -51163,7 +51278,7 @@ var BuiltWithRemotionShowcase = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState61 } from "react";
+import { useState as useState66 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx134, jsxs as jsxs55 } from "react/jsx-runtime";
@@ -51198,7 +51313,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx136, jsxs as jsxs56 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState61(null);
+  const [clicked, setClicked] = useState66(null);
   return /* @__PURE__ */ jsxs56("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [
@@ -51342,13 +51457,44 @@ var NewLanding = ({ colorMode, setColorMode }) => {
               }),
               /* @__PURE__ */ jsx138("br", {}),
               /* @__PURE__ */ jsx138("br", {}),
-              /* @__PURE__ */ jsx138("br", {}),
-              /* @__PURE__ */ jsx138("div", {
-                className: "pt-6 md:pt-8",
-                children: /* @__PURE__ */ jsx138(AutomationsSection_default, {})
+              /* @__PURE__ */ jsxs58("div", {
+                className: makeVideosRowClassName,
+                children: [
+                  /* @__PURE__ */ jsx138(MakeVideosProgrammatically, {
+                    title: "Design systems",
+                    description: "Create a library of animated assets for your organization.",
+                    videoSrc: "/img/design-systems.webm",
+                    fallbackVideoSrc: "/img/design-systems.mp4",
+                    links: [
+                      { label: "Motion design systems", href: "/design-systems" }
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx138(MakeVideosAgentically, {
+                    title: "Batch rendering",
+                    description: "Render millions of videos on your own infrastructure.",
+                    links: [
+                      {
+                        label: "Server-side rendering",
+                        href: "/docs/compare-ssr"
+                      },
+                      {
+                        label: "Client-side rendering",
+                        href: "/docs/client-side-rendering"
+                      }
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx138(MakeVideosInteractively, {
+                    title: "Applications",
+                    description: "Publish a simple tool or a complex video editor.",
+                    videoSrc: "/img/applications.webm",
+                    fallbackVideoSrc: "/img/applications.mp4",
+                    links: [
+                      { label: "Player", href: "/docs/player" },
+                      { label: "Editor Starter", href: "/editor-starter" }
+                    ]
+                  })
+                ]
               }),
-              /* @__PURE__ */ jsx138("br", {}),
-              /* @__PURE__ */ jsx138("br", {}),
               /* @__PURE__ */ jsx138(Demo, {}),
               /* @__PURE__ */ jsx138("br", {}),
               /* @__PURE__ */ jsx138("br", {}),