@remotion/promo-pages 4.0.446 → 4.0.447

package/dist/Homepage.js

@@ -2042,7 +2042,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -29731,8 +29731,10 @@ var videoIteratorManager = ({
   let framesRendered = 0;
   let currentDelayHandle = null;
   if (canvas) {
-    canvas.width = videoTrack.displayWidth;
-    canvas.height = videoTrack.displayHeight;
+    if (canvas.width !== videoTrack.displayWidth || canvas.height !== videoTrack.displayHeight) {
+      canvas.width = videoTrack.displayWidth;
+      canvas.height = videoTrack.displayHeight;
+    }
   }
   const canvasSink = new CanvasSink(videoTrack, {
     poolSize: 2,
@@ -33024,6 +33026,27 @@ var AudioInner = (props) => {
 };
 var Audio2 = Internals.wrapInSchema(AudioInner, audioSchema);
 Internals.addSequenceStackTraces(Audio2);
+var cache2 = new Map;
+var cacheVideoFrame = (src, sourceCanvas) => {
+  const { width, height } = sourceCanvas;
+  if (width === 0 || height === 0) {
+    return;
+  }
+  let cached = cache2.get(src);
+  if (!cached || cached.width !== width || cached.height !== height) {
+    cached = new OffscreenCanvas(width, height);
+    cache2.set(src, cached);
+  }
+  const ctx = cached.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(sourceCanvas, 0, 0);
+};
+var getCachedVideoFrame = (src) => {
+  return cache2.get(src) ?? null;
+};
 var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
 var warnedStyle = false;
 var warnedClassName = false;
@@ -33079,7 +33102,8 @@ var VideoForPreviewAssertedShowing = ({
   onError,
   credentials,
   controls,
-  objectFit: objectFitProp
+  objectFit: objectFitProp,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const src = usePreload22(unpreloadedSrc);
   const canvasRef = useRef212(null);
@@ -33156,6 +33180,44 @@ var VideoForPreviewAssertedShowing = ({
   const initialMuted = useRef212(effectiveMuted);
   const initialDurationInFrames = useRef212(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef212(sequenceOffset);
+  const hasDrawnRealFrameRef = useRef212(false);
+  const isPremountingRef = useRef212(isPremounting);
+  isPremountingRef.current = isPremounting;
+  useLayoutEffect34(() => {
+    if (!_experimentalInitiallyDrawCachedFrame) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const cached = getCachedVideoFrame(src);
+    if (!cached) {
+      return;
+    }
+    canvas.width = cached.width;
+    canvas.height = cached.height;
+    const ctx = canvas.getContext("2d", {
+      alpha: true,
+      desynchronized: true
+    });
+    if (!ctx) {
+      return;
+    }
+    ctx.drawImage(cached, 0, 0);
+  }, [_experimentalInitiallyDrawCachedFrame, src]);
+  useLayoutEffect34(() => {
+    if (!_experimentalInitiallyDrawCachedFrame) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    return () => {
+      if (!canvas || !hasDrawnRealFrameRef.current || isPremountingRef.current) {
+        return;
+      }
+      cacheVideoFrame(src, canvas);
+    };
+  }, [_experimentalInitiallyDrawCachedFrame, src]);
   useEffect312(() => {
     if (!sharedAudioContext)
       return;
@@ -33224,6 +33286,7 @@ var VideoForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
+          hasDrawnRealFrameRef.current = true;
         }
       }).catch((error2) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -33261,6 +33324,7 @@ var VideoForPreviewAssertedShowing = ({
       }
       setMediaPlayerReady(false);
       setShouldFallbackToNativeVideo(false);
+      hasDrawnRealFrameRef.current = false;
     };
   }, [
     audioStreamIndex,
@@ -33759,7 +33823,8 @@ var InnerVideo = ({
   onError,
   credentials,
   controls,
-  objectFit
+  objectFit,
+  _experimentalInitiallyDrawCachedFrame
 }) => {
   const environment = useRemotionEnvironment();
   if (typeof src !== "string") {
@@ -33831,7 +33896,8 @@ var InnerVideo = ({
     onError,
     credentials,
     controls,
-    objectFit
+    objectFit,
+    _experimentalInitiallyDrawCachedFrame
   });
 };
 var VideoInner = ({
@@ -33863,6 +33929,7 @@ var VideoInner = ({
   credentials,
   controls,
   objectFit,
+  _experimentalInitiallyDrawCachedFrame,
   from,
   durationInFrames
 }) => {
@@ -33900,7 +33967,8 @@ var VideoInner = ({
       onError,
       credentials,
       controls,
-      objectFit: objectFit ?? "contain"
+      objectFit: objectFit ?? "contain",
+      _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false
     })
   });
 };
@@ -35208,7 +35276,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.446";
+var VERSION2 = "4.0.447";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -35764,6 +35832,80 @@ var createAudioSampleSource = ({
   });
   return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
 };
+var supportsNativeHtmlInCanvas = () => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const ctx = document.createElement("canvas").getContext("2d");
+  return typeof ctx?.drawElementImage === "function";
+};
+var setupHtmlInCanvas = ({
+  wrapper,
+  div,
+  width: width2,
+  height: height2
+}) => {
+  if (!supportsNativeHtmlInCanvas()) {
+    return null;
+  }
+  const layoutCanvas = document.createElement("canvas");
+  layoutCanvas.layoutSubtree = true;
+  layoutCanvas.width = width2;
+  layoutCanvas.height = height2;
+  layoutCanvas.style.position = "absolute";
+  layoutCanvas.style.top = "0";
+  layoutCanvas.style.left = "0";
+  layoutCanvas.style.width = `${width2}px`;
+  layoutCanvas.style.height = `${height2}px`;
+  layoutCanvas.style.visibility = "visible";
+  const maybeCtx = layoutCanvas.getContext("2d");
+  if (!maybeCtx || typeof maybeCtx.drawElementImage !== "function") {
+    return null;
+  }
+  if (typeof layoutCanvas.requestPaint !== "function") {
+    return null;
+  }
+  wrapper.removeChild(div);
+  layoutCanvas.appendChild(div);
+  wrapper.appendChild(layoutCanvas);
+  return { layoutCanvas, ctx: maybeCtx };
+};
+var waitForPaint = (layoutCanvas) => {
+  return new Promise((resolve) => {
+    layoutCanvas.addEventListener("paint", () => resolve(), { once: true });
+    layoutCanvas.requestPaint();
+  });
+};
+var drawWithHtmlInCanvas = async ({
+  htmlInCanvasContext,
+  element,
+  scaledWidth,
+  scaledHeight
+}) => {
+  const { ctx, layoutCanvas } = htmlInCanvasContext;
+  await waitForPaint(layoutCanvas);
+  layoutCanvas.width = scaledWidth;
+  layoutCanvas.height = scaledHeight;
+  ctx.reset();
+  ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  const offscreen = new OffscreenCanvas(scaledWidth, scaledHeight);
+  const offCtx = offscreen.getContext("2d");
+  if (!offCtx) {
+    throw new Error("Could not get offscreen context");
+  }
+  offCtx.drawImage(layoutCanvas, 0, 0);
+  return offCtx;
+};
+var teardownHtmlInCanvas = ({
+  htmlInCanvasContext,
+  wrapper,
+  div
+}) => {
+  const { layoutCanvas } = htmlInCanvasContext;
+  layoutCanvas.removeChild(div);
+  wrapper.removeChild(layoutCanvas);
+  wrapper.appendChild(div);
+};
 var UpdateTime = ({
   children,
   audioEnabled,
@@ -35876,7 +36018,8 @@ function createScaffold({
   audioEnabled,
   videoEnabled,
   defaultCodec,
-  defaultOutName
+  defaultOutName,
+  allowHtmlInCanvas
 }) {
   if (!ReactDOM6.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
@@ -35902,6 +36045,7 @@ function createScaffold({
   const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
+  const htmlInCanvasContext = allowHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
   const errorHolder = { error: null };
   const root = ReactDOM6.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -35992,8 +36136,12 @@ function createScaffold({
     delayRenderScope,
     div,
     errorHolder,
+    htmlInCanvasContext,
     [Symbol.dispose]: () => {
       root.unmount();
+      if (htmlInCanvasContext) {
+        teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });
+      }
       div.remove();
       wrapper.remove();
       cleanupCSS();
@@ -38737,10 +38885,32 @@ var createLayer = async ({
   logLevel,
   internalState,
   onlyBackgroundClipText,
-  cutout
+  cutout,
+  htmlInCanvasContext,
+  onHtmlInCanvasLayerOutcome
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
+  if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
+    try {
+      const offCtx = await drawWithHtmlInCanvas({
+        htmlInCanvasContext,
+        element,
+        scaledWidth,
+        scaledHeight
+      });
+      onHtmlInCanvasLayerOutcome({ native: true });
+      return offCtx;
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : JSON.stringify(err);
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
+        shouldWarn: true
+      });
+      Internals.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+    }
+  }
   const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
   const context = canvas.getContext("2d");
   if (!context) {
@@ -38971,11 +39141,24 @@ var internalRenderMediaOnWeb = async ({
   licenseKey,
   muted,
   scale,
-  isProduction
+  isProduction,
+  allowHtmlInCanvas
 }) => {
   let __stack2 = [];
   try {
     validateScale(scale);
+    let htmlInCanvasLayerOutcomeReported = false;
+    const onHtmlInCanvasLayerOutcome = (outcome) => {
+      if (htmlInCanvasLayerOutcomeReported) {
+        return;
+      }
+      htmlInCanvasLayerOutcomeReported = true;
+      if (outcome.native) {
+        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://github.com/WICG/html-in-canvas");
+      } else if (outcome.shouldWarn) {
+        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
+      }
+    };
     const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
     if (outputTarget === "web-fs") {
       await cleanupStaleOpfsFiles();
@@ -39041,9 +39224,38 @@ var internalRenderMediaOnWeb = async ({
       videoEnabled,
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
-      defaultOutName: resolved.defaultOutName
+      defaultOutName: resolved.defaultOutName,
+      allowHtmlInCanvas
     }), 0);
-    const { delayRenderScope, div, timeUpdater, collectAssets, errorHolder } = scaffold;
+    const {
+      delayRenderScope,
+      div,
+      timeUpdater,
+      collectAssets,
+      errorHolder,
+      htmlInCanvasContext
+    } = scaffold;
+    if (allowHtmlInCanvas && !htmlInCanvasContext) {
+      if (!supportsNativeHtmlInCanvas()) {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "This browser does not expose CanvasRenderingContext2D.prototype.drawElementImage. In Chromium, enable chrome://flags/#canvas-draw-element and use a version that ships the API.",
+          shouldWarn: false
+        });
+      } else {
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: "drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.",
+          shouldWarn: true
+        });
+      }
+    } else if (!allowHtmlInCanvas) {
+      onHtmlInCanvasLayerOutcome({
+        native: false,
+        reason: "allowHtmlInCanvas is false; using the built-in DOM composer.",
+        shouldWarn: false
+      });
+    }
     const internalState = __using2(__stack2, makeInternalState(), 0);
     const keepalive = __using2(__stack2, createBackgroundKeepalive({
       fps: resolved.fps,
@@ -39156,7 +39368,9 @@ var internalRenderMediaOnWeb = async ({
               logLevel,
               internalState,
               onlyBackgroundClipText: false,
-              cutout: new DOMRect(0, 0, resolved.width, resolved.height)
+              cutout: new DOMRect(0, 0, resolved.width, resolved.height),
+              htmlInCanvasContext,
+              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
@@ -39320,7 +39534,8 @@ var renderMediaOnWeb = (options2) => {
     licenseKey: options2.licenseKey ?? null,
     muted: options2.muted ?? false,
     scale: options2.scale ?? 1,
-    isProduction: options2.isProduction ?? true
+    isProduction: options2.isProduction ?? true,
+    allowHtmlInCanvas: options2.allowHtmlInCanvas ?? false
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };

package/dist/components/experts/experts-data.js

@@ -260,4 +260,17 @@ export const experts = [
         since: new Date('2026-02-13').getTime(),
         description: (_jsxs("div", { children: ["Creator of", ' ', _jsx("a", { target: '_blank', href: "https://react-video-editor-mu.vercel.app/", children: "Pablituuu Studio" }), ", a premium AI-powered video editor.", _jsx("br", {}), "I specialize in building complex Remotion applications integrated with AI services like Gemini (for video analysis and highlights) and Deepgram (for automated captions). I also focus on high-performance canvas interactions using Fabric.js and cost-effective AI workflows."] })),
     },
+    {
+        slug: 'hai-nguyen',
+        name: 'Hai Nguyen',
+        image: '/img/freelancers/hai.jpg',
+        website: 'https://haingt.dev',
+        x: 'haingt_dev',
+        github: 'haingt-dev',
+        linkedin: 'in/haingt-dev/',
+        email: 'hai@haingt.dev',
+        videocall: null,
+        since: new Date('2026-04-02').getTime(),
+        description: (_jsxs("div", { children: ["Built a full", ' ', _jsx("a", { target: '_blank', href: "https://github.com/haingt-dev/Bookie/tree/master/projects/ai-book-video", children: "AI video production pipeline" }), ' ', "using Remotion 4.0 \u2014 orchestrating self-hosted TTS (viXTTS), Gemini API image generation, SRT-driven subtitle timing, and Ken Burns motion presets. The pipeline produces complete book-to-video content in about an hour (1-person operation) with editorial design overlays, cross-dissolve transitions, and audio spectrum visualization. GPU-accelerated rendering on Linux.", _jsx("br", {}), "Available for AI-powered video pipelines, multi-API media orchestration, and Remotion integrations with existing backend infrastructure."] })),
+    },
 ];

package/dist/components/homepage/CommunityStatsItems.js

@@ -23,14 +23,14 @@ export const InstallsPerMonth = () => {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                }, children: [_jsx(StatItemContent, { content: "900K", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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)" }) }), width: "50px" })] }), _jsx(StatItemContent, { content: "installs per month", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
+                }, children: [_jsx(StatItemContent, { content: "1.4M", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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)" }) }), width: "50px" })] }), _jsx(StatItemContent, { content: "installs per month", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
 };
 export const PagesOfDocs = () => {
-    return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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: "40px" }), _jsx(StatItemContent, { content: "700", width: "85px", maxWidth: "100px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "pages of docs", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
+    return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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: "40px" }), _jsx(StatItemContent, { content: "800", width: "85px", maxWidth: "100px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "pages of docs", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
 };
 export const TemplatesAndExamples = () => (_jsxs(Pill, { className: "w-[30%] flex items-center flex-row", children: [_jsx(StatItemContent, { content: "35", width: "60px", fontSize: "2.7rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "templates & examples", width: "135px", fontSize: "1.35rem", fontWeight: "bold" })] }));
 export const GitHubStars = () => {
-    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }), _jsx(StatItemContent, { content: "39k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
+    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }), _jsx(StatItemContent, { content: "41k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
 };
 export const DiscordMembers = () => {
     return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {
@@ -43,7 +43,7 @@ export const DiscordMembers = () => {
                         flexDirection: 'column',
                         alignItems: 'center',
                         justifyContent: 'center',
-                    }, children: [_jsx(StatItemContent, { content: "6000+", width: "142px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "Discord members", width: "142px", fontSize: "1rem", fontWeight: "bold" })] }), _jsx("div", { style: {
+                    }, children: [_jsx(StatItemContent, { content: "8000+", width: "142px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "Discord members", width: "142px", fontSize: "1rem", fontWeight: "bold" })] }), _jsx("div", { style: {
                         display: 'flex',
                         justifyContent: 'center',
                     }, children: _jsx(StatItemContent, { content: _jsx("svg", { width: "61", height: "47", viewBox: "0 0 46 35", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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)" }) }), width: "45px" }) })] }) }));

package/dist/components/homepage/GitHubButton.js

@@ -3,5 +3,5 @@ const GithubIcon = () => {
     return (_jsx("svg", { viewBox: "0 0 496 512", style: { height: 24, marginRight: 8 }, children: _jsx("path", { fill: "currentColor", d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" }) }));
 };
 export const GithubButton = () => {
-    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '39k' })] }));
+    return (_jsxs("div", { className: "flex flex-row items-center text-base", children: [_jsx(GithubIcon, {}), " ", _jsx("span", { children: "GitHub" }), ' ', _jsx("div", { className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center", children: '41k' })] }));
 };

package/dist/components/homepage/RealMp4Videos.js

@@ -37,5 +37,5 @@ export const RealMP4Videos = () => {
                         maxWidth: '100%',
                         borderRadius: 7,
                         overflow: 'hidden',
-                    }, className: "w-[550px] cursor-default! relative lg:translate-x-8 -mt-20 lg:mt-0" }) }), ' ', _jsxs("div", { className: "font-brand", children: [_jsxs("h2", { className: "text-4xl fontbrand", children: [_jsx("span", { className: 'text-brand', children: "Scalable" }), " rendering"] }), _jsxs("p", { className: "leading-relaxed", children: ["Render the video .mp4 or other formats. ", _jsx("br", {}), "Locally, on the server or serverless."] }), ' ', _jsx("div", { className: "h-4" }), _jsxs("div", { className: "leading-6", children: [_jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/render", children: ["Render options", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] }), _jsx("br", {}), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/lambda", children: ["Remotion Lambda", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] })] })] })] }));
+                    }, className: "w-[550px] cursor-default! relative lg:translate-x-8 -mt-20 lg:mt-0" }) }), ' ', _jsxs("div", { className: "font-brand", children: [_jsxs("h2", { className: "text-4xl fontbrand", children: [_jsx("span", { className: 'text-brand', children: "Scalable" }), " rendering"] }), _jsxs("p", { className: "leading-relaxed", children: ["Render the video as .mp4 or other formats. ", _jsx("br", {}), "Locally, on the server or serverless."] }), ' ', _jsx("div", { className: "h-4" }), _jsxs("div", { className: "leading-6", children: [_jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/docs/render", children: ["Render options", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] }), _jsx("br", {}), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: "/lambda", children: ["Remotion Lambda", ' ', _jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("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" }) })] })] })] })] }));
 };

package/dist/components/prompts/PromptsGallery.js

@@ -56,5 +56,5 @@ const Pagination = ({ currentPage, totalPages }) => {
                         : 'text-muted-foreground hover:text-text'}`, children: page }, page))) }), currentPage < totalPages ? (_jsx("a", { href: getPageUrl(currentPage + 1), className: "text-muted-foreground hover:text-text no-underline hover:no-underline", children: "Next \u2192" })) : (_jsx("span", { className: "text-gray-300 cursor-not-allowed", children: "Next \u2192" }))] }));
 };
 export const PromptsGalleryPage = ({ promptSubmissions, currentPage, totalPages }) => {
-    return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Create a video with just a prompt" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["With", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ", you can create videos simply by giving a prompt to your coding agent, whether it's Claude Code, Codex, or OpenCode. Browse the gallery for inspiration!"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { href: "/docs/ai/claude-code", className: "font-brand rounded-full bg-[#D97757] flex items-center text-white", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 149 149", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginRight: 8 }, children: _jsx("path", { d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z", fill: "#fff" }) }), _jsx("div", { className: "text-sm", children: "Create your own video" })] }), _jsx(Button, { href: "/prompts/submit", className: "font-brand rounded-full text-sm", children: "Submit a prompt" })] }), _jsx("div", { className: "h-12" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: promptSubmissions.map((p) => (_jsx(PromptSubmissionCard, { promptSubmission: p }, p.id))) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages })] }) }));
+    return (_jsx(Page, { className: "flex-col", children: _jsxs("div", { className: "m-auto max-w-[1200px] w-full px-4 py-12", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Prompt Showcase" }), _jsxs("p", { className: "font-brand text-muted-foreground mt-4 max-w-[700px]", children: ["See what the community has built using", ' ', _jsx("a", { href: "/docs/ai/skills", className: "underline hover:text-text underline-offset-4", children: "Remotion Skills" }), ' ', "and a coding agent like Claude Code, Codex, or OpenCode. Want to make your own?"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { href: "/docs/ai/claude-code", className: "font-brand rounded-full bg-[#D97757] flex items-center text-white", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 149 149", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginRight: 8 }, children: _jsx("path", { d: "M29.05 98.54L58.19 82.19L58.68 80.77L58.19 79.98H56.77L51.9 79.68L35.25 79.23L20.81 78.63L6.82 77.88L3.3 77.13L0 72.78L0.340004 70.61L3.3 68.62L7.54 68.99L16.91 69.63L30.97 70.6L41.17 71.2L56.28 72.77H58.68L59.02 71.8L58.2 71.2L57.56 70.6L43.01 60.74L27.26 50.32L19.01 44.32L14.55 41.28L12.3 38.43L11.33 32.21L15.38 27.75L20.82 28.12L22.21 28.49L27.72 32.73L39.49 41.84L54.86 53.16L57.11 55.03L58.01 54.39L58.12 53.94L57.11 52.25L48.75 37.14L39.83 21.77L35.86 15.4L34.81 11.58C34.44 10.01 34.17 8.69 34.17 7.08L38.78 0.820007L41.33 0L47.48 0.820007L50.07 3.07001L53.89 11.81L60.08 25.57L69.68 44.28L72.49 49.83L73.99 54.97L74.55 56.54H75.52V55.64L76.31 45.1L77.77 32.16L79.19 15.51L79.68 10.82L82 5.2L86.61 2.16L90.21 3.88L93.17 8.12L92.76 10.86L91 22.3L87.55 40.22L85.3 52.22H86.61L88.11 50.72L94.18 42.66L104.38 29.91L108.88 24.85L114.13 19.26L117.5 16.6H123.87L128.56 23.57L126.46 30.77L119.9 39.09L114.46 46.14L106.66 56.64L101.79 65.04L102.24 65.71L103.4 65.6L121.02 61.85L130.54 60.13L141.9 58.18L147.04 60.58L147.6 63.02L145.58 68.01L133.43 71.01L119.18 73.86L97.96 78.88L97.7 79.07L98 79.44L107.56 80.34L111.65 80.56H121.66L140.3 81.95L145.17 85.17L148.09 89.11L147.6 92.11L140.1 95.93L129.98 93.53L106.36 87.91L98.26 85.89H97.14V86.56L103.89 93.16L116.26 104.33L131.75 118.73L132.54 122.29L130.55 125.1L128.45 124.8L114.84 114.56L109.59 109.95L97.7 99.94H96.91V100.99L99.65 105L114.12 126.75L114.87 133.42L113.82 135.59L110.07 136.9L105.95 136.15L97.48 124.26L88.74 110.87L81.69 98.87L80.83 99.36L76.67 144.17L74.72 146.46L70.22 148.18L66.47 145.33L64.48 140.72L66.47 131.61L68.87 119.72L70.82 110.27L72.58 98.53L73.63 94.63L73.56 94.37L72.7 94.48L63.85 106.63L50.39 124.82L39.74 136.22L37.19 137.23L32.77 134.94L33.18 130.85L35.65 127.21L50.39 108.46L59.28 96.84L65.02 90.13L64.98 89.16H64.64L25.49 114.58L18.52 115.48L15.52 112.67L15.89 108.06L17.31 106.56L29.08 98.46L29.04 98.5L29.05 98.54Z", fill: "#fff" }) }), _jsx("div", { className: "text-sm", children: "Create your own video" })] }), _jsx(Button, { href: "/prompts/submit", className: "font-brand rounded-full text-sm", children: "Share your video" })] }), _jsx("div", { className: "h-12" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: promptSubmissions.map((p) => (_jsx(PromptSubmissionCard, { promptSubmission: p }, p.id))) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages })] }) }));
 };

package/dist/components/prompts/PromptsSubmit.js

@@ -159,11 +159,11 @@ export const PromptsSubmitPage = () => {
         modelUsed,
     ]);
     if (submitStatus.type === 'done') {
-        return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 mt-12 pt-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Submission received!" }), _jsxs("div", { className: "mt-4 text-muted-foreground font-brand", children: ["Thanks for submitting your prompt! Your prompt submission is pending review.", _jsx("br", {}), " Once approved, it will appear on the", ' ', _jsx("a", { href: "/prompts", className: "underline", children: "prompts gallery" }), "."] }), _jsx("div", { className: "mt-4 text-muted-foreground font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx(Button, { onClick: () => {
+        return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 mt-12 pt-8", children: [_jsx("h1", { className: "text-3xl font-brand font-black", children: "Submission received!" }), _jsxs("div", { className: "mt-4 text-muted-foreground font-brand", children: ["Thanks for submitting your prompt! Your prompt submission is pending review.", _jsx("br", {}), " Once approved, it will appear on the", ' ', _jsx("a", { href: "/prompts", className: "underline", children: "prompts showcase" }), "."] }), _jsx("div", { className: "mt-4 text-muted-foreground font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx(Button, { onClick: () => {
                                 window.location.href = '/prompts';
                             }, className: "font-brand rounded-full mt-4", children: "Back to gallery" })] }) }) }));
     }
-    return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 pt-8", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("h1", { className: "text-3xl font-brand font-black", children: "Submit a prompt" }), _jsxs("p", { className: "text-muted-foreground text-sm font-brand", children: ["Submit a prompt to be featured in the", ' ', _jsx("a", { href: "/prompts", className: "underline hover:text-text underline-offset-4", children: "prompt gallery." })] }), _jsx("p", { className: "text-muted-foreground text-sm font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Title *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "A short title for your prompt (max 80 characters)." }), _jsx(Input, { name: "title", placeholder: "Newspaper highlighting animation", className: "font-brand mt-3", value: title, maxLength: 80, onChange: (e) => setTitle(e.target.value) }), _jsxs("p", { className: "text-muted-foreground text-xs mt-1 mb-0 font-brand", children: [title.length, "/80"] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Video *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Upload a video showing the result of your prompt." }), _jsx("input", { ref: fileInputRef, type: "file", accept: "video/*", onChange: onFileSelect, className: "hidden" }), _jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragEnter, onDragLeave: onDragLeave, className: `flex flex-col items-center py-12 mt-3 rounded-lg border-2 border-dashed transition-colors ${isDragging
+    return (_jsx(Page, { className: "flex-col", children: _jsx("div", { className: "m-auto max-w-[800px] w-full", children: _jsxs("div", { className: "mx-4 px-8 py-8 pt-8", children: [_jsx(NewBackButton, { text: "Back to gallery", link: "/prompts" }), _jsx("h1", { className: "text-3xl font-brand font-black", children: "Share your video" }), _jsxs("p", { className: "text-muted-foreground text-sm font-brand", children: ["Share a video you made with Remotion to be featured in the", ' ', _jsx("a", { href: "/prompts", className: "underline hover:text-text underline-offset-4", children: "Prompt Showcase." })] }), _jsx("p", { className: "text-muted-foreground text-sm font-brand", children: "Note that this showcase is curated - we may reject submissions if they are repetitive or not up to our quality standards. In that case, we will not give notification or reason." }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Title *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "A short title for your prompt (max 80 characters)." }), _jsx(Input, { name: "title", placeholder: "Newspaper highlighting animation", className: "font-brand mt-3", value: title, maxLength: 80, onChange: (e) => setTitle(e.target.value) }), _jsxs("p", { className: "text-muted-foreground text-xs mt-1 mb-0 font-brand", children: [title.length, "/80"] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Video *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Upload a video showing the result of your prompt." }), _jsx("input", { ref: fileInputRef, type: "file", accept: "video/*", onChange: onFileSelect, className: "hidden" }), _jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragEnter, onDragLeave: onDragLeave, className: `flex flex-col items-center py-12 mt-3 rounded-lg border-2 border-dashed transition-colors ${isDragging
                             ? 'border-brand bg-brand/10'
                             : 'border-muted-foreground/25'}`, children: [uploadState.type === 'idle' &&
                                 (isDragging ? (_jsx("div", { className: "font-brand text-sm text-brand font-medium", children: "Drop your video here" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { className: "font-brand rounded-full", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Choose video file" }), _jsx("div", { className: "font-brand text-sm mt-3 text-muted-foreground", children: "or drag and drop a video file here" })] }))), uploadState.type === 'uploading' && (_jsxs("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: ["Uploading ", Math.round(uploadState.progress), "%"] })), uploadState.type === 'processing' && (_jsx("div", { className: "text-muted-foreground font-brand font-medium text-sm", children: "Processing video..." })), uploadState.type === 'ready' && (_jsxs("div", { className: "w-full flex flex-col items-center px-4 gap-4", children: [_jsx(MuxPlayer, { playbackId: uploadState.muxPlaybackId, title: title || 'Preview' }), _jsx("button", { type: "button", className: "font-brand text-sm text-muted-foreground hover:text-foreground transition-colors", onClick: () => setUploadState({ type: 'idle' }), children: "Remove video" })] })), uploadState.type === 'error' && (_jsx("div", { className: "text-red-500 font-brand font-medium text-sm", children: uploadState.message }))] }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Prompt(s) *" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "The prompts you used to generate this video. Separate multiple prompts with an empty line." }), _jsx(Textarea, { name: "prompt", className: "font-brand mt-3", placeholder: "Enter your full prompt here", value: prompt, onChange: (e) => setPrompt(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Tool used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which tool did you use to generate this video? (e.g. Claude Code, Cursor, Codex)" }), _jsx(Input, { name: "toolUsed", placeholder: "Claude Code", className: "font-brand mt-3", value: toolUsed, onChange: (e) => setToolUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "Model used" }), _jsx("p", { className: "text-muted-foreground text-sm mb-0 font-brand", children: "Which AI model did you use? (e.g. Opus 4.5, GPT-5.2)" }), _jsx(Input, { name: "modelUsed", placeholder: "Opus 4.5", className: "font-brand mt-3", value: modelUsed, onChange: (e) => setModelUsed(e.target.value) }), _jsx("h2", { className: "font-brand mt-5 font-bold", children: "How should we credit you? *" }), _jsxs(Tabs, { defaultValue: "github", className: "mt-3", onValueChange: (value) => {

package/dist/components/team/TitleTeamCards.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TeamPicture } from '../TeamPicture';
 import { TeamCardsLayout } from './TeamCards';
 export const TitleTeamCards = () => {
-    return (_jsxs("div", { children: [_jsx("h1", { className: "font-brand", children: "Team" }), _jsx(TeamPicture, {}), _jsx(TeamCardsLayout, {}), _jsx("h1", { className: "font-brand mt-8", children: "Company" }), _jsxs("p", { className: "font-brand leading-normal", children: ["Wonder how we operate? If we are stable? Who is backing us? ", _jsx("br", {}), "Check our our", ' ', _jsx("a", { href: "/investors", className: "font-brand no-underline text-brand", children: "investors page" }), "!"] })] }));
+    return (_jsxs("div", { children: [_jsx("h1", { className: "font-brand", children: "Team" }), _jsx(TeamPicture, {}), _jsx(TeamCardsLayout, {})] }));
 };

package/dist/components/team.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TitleTeamCards } from './team/TitleTeamCards';
+import { TrustSection } from './team/TrustSection';
 export const AboutUsHeader = () => {
     return (_jsx("div", { className: "flex flex-row items-center md:flex-col pt-10", children: _jsxs("div", { className: "flex-1", children: [_jsxs("h1", { className: "text-3xl font-bold font-['GTPlanar'] leading-tight max-w-[1000px] md:text-5xl", children: [_jsx("svg", { className: "h-6 md:h-8 mr-3 md:mr-6", viewBox: "0 0 105 107", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24.0635 0.00717926C21.8217 0.12886 20.0152 0.48455 18.1946 1.17721C17.2867 1.51886 15.7984 2.26301 14.9794 2.77782C11.5535 4.926 8.94203 8.15529 7.58011 11.9134C7.30866 12.6576 6.57388 15.0304 6.10119 16.6638C2.95146 27.5825 1.16365 39.5215 0.779884 52.1579C0.719043 54.1703 0.719043 58.9628 0.779884 60.9425C1.03729 69.3199 1.83759 76.883 3.28843 84.5958C3.87813 87.7175 4.82352 91.9109 5.37109 93.8157C6.48964 97.6861 8.77354 100.981 12.0216 103.396C14.1978 105.015 16.6689 106.101 19.4068 106.635C20.7266 106.892 22.4676 107.009 23.75 106.925C25.5237 106.808 29.0432 106.335 31.9027 105.825C44.7918 103.527 56.6981 99.4131 67.4951 93.5255C74.3328 89.7954 80.1783 85.7565 85.8178 80.8564C91.4386 75.9797 96.2311 70.7333 100.448 64.8457C101.426 63.4838 101.917 62.6881 102.409 61.6866C103.673 59.1032 104.267 56.5338 104.262 53.6602C104.262 50.9831 103.757 48.6056 102.666 46.172C102.142 44.9973 101.641 44.1548 100.518 42.5542C96.3809 36.662 91.7897 31.5278 86.1922 26.5388C77.5153 18.8073 67.2096 12.4657 55.7012 7.77151C53.2067 6.75593 50.7496 5.86202 47.7918 4.89323C41.5298 2.84802 33.7795 1.07425 27.2226 0.189705C26.193 0.0493011 24.7936 -0.0302582 24.0635 0.00717926Z", fill: "#0B84F3" }) }), "The programmatic video dream", ' '] }), _jsx("p", { className: "leading-relaxed text-balance font-brand", children: "Started as a side project in 2021, we are now a company in Zurich, Switzerland and are pushing to combine the powers of video editing and programming!" })] }) }));
 };
@@ -10,5 +11,5 @@ const container = {
     paddingRight: 16,
 };
 export const TeamPage = () => {
-    return (_jsx("div", { className: "bg-[var(--background)]", children: _jsxs("div", { style: container, children: [_jsx("br", {}), _jsx(AboutUsHeader, {}), _jsx("br", {}), _jsx(TitleTeamCards, {}), _jsx("br", {})] }) }));
+    return (_jsx("div", { className: "bg-[var(--background)]", children: _jsxs("div", { style: container, children: [_jsx("br", {}), _jsx(AboutUsHeader, {}), _jsx("br", {}), _jsx(TitleTeamCards, {}), _jsx("br", {}), _jsx(TrustSection, {}), _jsx("br", {})] }) }));
 };

package/dist/design.js

@@ -6989,7 +6989,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/experts.js

@@ -2042,7 +2042,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/homepage/Pricing.js

@@ -6989,7 +6989,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsGallery.js

@@ -6989,7 +6989,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsShow.js

@@ -24323,7 +24323,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsSubmit.js

@@ -24323,7 +24323,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/team.js

@@ -7170,7 +7170,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/template-modal-content.js

@@ -6989,7 +6989,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/templates.js

@@ -6989,7 +6989,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.446";
+var VERSION = "4.0.447";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.446",
+	"version": "4.0.447",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,19 +11,19 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.446",
-		"@remotion/design": "4.0.446",
-		"@remotion/web-renderer": "4.0.446",
-		"@remotion/lottie": "4.0.446",
-		"@remotion/paths": "4.0.446",
-		"@remotion/player": "4.0.446",
-		"@remotion/shapes": "4.0.446",
-		"@remotion/media": "4.0.446",
-		"@remotion/svg-3d-engine": "4.0.446",
-		"create-video": "4.0.446",
+		"@remotion/animated-emoji": "4.0.447",
+		"@remotion/design": "4.0.447",
+		"@remotion/web-renderer": "4.0.447",
+		"@remotion/lottie": "4.0.447",
+		"@remotion/paths": "4.0.447",
+		"@remotion/player": "4.0.447",
+		"@remotion/shapes": "4.0.447",
+		"@remotion/media": "4.0.447",
+		"@remotion/svg-3d-engine": "4.0.447",
+		"create-video": "4.0.447",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.446",
+		"remotion": "4.0.447",
 		"zod": "4.3.6",
 		"@mux/upchunk": "^3.5.0",
 		"@vidstack/react": "1.12.13",
@@ -34,7 +34,7 @@
 		"@mediabunny/mp3-encoder": "1.39.2"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.446",
+		"@remotion/eslint-config-internal": "4.0.447",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",