@remotion/promo-pages 4.0.304 → 4.0.306

package/.turbo/turbo-make.log

@@ -1,8 +1,8 @@
 
 
-> @remotion/promo-pages@4.0.304 make /Users/jonathanburger/remotion/packages/promo-pages
+> @remotion/promo-pages@4.0.306 make /Users/jonathanburger/remotion/packages/promo-pages
 > bun --env-file=../.env.bundle bundle.ts
 
 ≈ tailwindcss v4.1.1
 
-Done in 40ms
+Done in 35ms

package/dist/Homepage.js

@@ -5016,7 +5016,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useContext as useContext22,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
   useRef as useRef11,
@@ -5030,20 +5030,20 @@ import React13, {
   createRef as createRef2,
   useCallback as useCallback6,
   useContext as useContext14,
-  useEffect as useEffect8,
+  useEffect as useEffect7,
   useMemo as useMemo14,
   useRef as useRef4,
   useState as useState9
 } from "react";
-import { useEffect as useEffect7, useMemo as useMemo13 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 import { useRef as useRef5 } from "react";
-import { useContext as useContext17, useEffect as useEffect9, useMemo as useMemo15, useState as useState10 } from "react";
+import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState10 } from "react";
 import { useContext as useContext16 } from "react";
 import {
   useCallback as useCallback9,
   useContext as useContext20,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect5,
   useRef as useRef10
 } from "react";
@@ -5052,7 +5052,7 @@ import { useContext as useContext19, useMemo as useMemo17 } from "react";
 import React14, {
   useCallback as useCallback7,
   useContext as useContext18,
-  useEffect as useEffect10,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo16,
   useRef as useRef7,
@@ -5060,14 +5060,14 @@ import React14, {
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import React15 from "react";
-import { useEffect as useEffect11, useState as useState12 } from "react";
-import { useEffect as useEffect12, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect11, useRef as useRef9 } from "react";
 import { createContext as createContext16, useContext as useContext21, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
   useContext as useContext23,
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo21,
@@ -5075,9 +5075,9 @@ import {
 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext26, useEffect as useEffect17 } from "react";
+import { Suspense, useContext as useContext26, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext17, useContext as useContext25, useEffect as useEffect16, useMemo as useMemo222 } from "react";
+import { createContext as createContext17, useContext as useContext25, useEffect as useEffect15, useMemo as useMemo222 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
 import React19, { useMemo as useMemo23 } from "react";
@@ -5103,7 +5103,7 @@ import React23, {
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
-  useEffect as useEffect18,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
@@ -5123,7 +5123,7 @@ import { useCallback as useCallback15 } from "react";
 import {
   useCallback as useCallback14,
   useContext as useContext28,
-  useEffect as useEffect19,
+  useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo28,
   useState as useState17
@@ -5132,20 +5132,20 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
   useContext as useContext29,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo29,
   useRef as useRef16,
   useState as useState18
 } from "react";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect19 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext31 } from "react";
 import {
   forwardRef as forwardRef11,
   useContext as useContext30,
-  useEffect as useEffect222,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
@@ -5236,7 +5236,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.304";
+var VERSION = "4.0.306";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -7488,9 +7488,6 @@ var getCrossOriginValue = ({
   if (requestsVideoFrame) {
     return "anonymous";
   }
-  if (!getRemotionEnvironment().isRendering) {
-    return "anonymous";
-  }
   return;
 };
 var LogLevelContext = createContext14({
@@ -7642,13 +7639,6 @@ var useSingletonAudioContext = (logLevel, latencyHint) => {
       latencyHint
     });
   }, [logLevel, latencyHint]);
-  useEffect7(() => {
-    return () => {
-      if (audioContext) {
-        audioContext.close();
-      }
-    };
-  }, [audioContext]);
   return audioContext;
 };
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
@@ -7817,7 +7807,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     audios.current = [];
     rerenderAudios();
   }, [numberOfAudioTags, rerenderAudios]);
-  useEffect8(() => {
+  useEffect7(() => {
     return () => {
       resetAudio();
     };
@@ -7998,7 +7988,8 @@ var useVolume = ({
   mediaRef,
   volume,
   logLevel,
-  source
+  source,
+  shouldUseWebAudioApi
 }) => {
   const audioStuffRef = useRef6(null);
   const currentVolumeRef = useRef6(volume);
@@ -8015,6 +8006,9 @@ var useVolume = ({
     if (!mediaRef.current) {
       return;
     }
+    if (!shouldUseWebAudioApi) {
+      return;
+    }
     if (mediaRef.current.playbackRate !== 1 && isSafari()) {
       warnSafariOnce(logLevel);
       return;
@@ -8037,7 +8031,7 @@ var useVolume = ({
       gainNode.disconnect();
       source.get().disconnect();
     };
-  }, [logLevel, mediaRef, audioContext, source]);
+  }, [logLevel, mediaRef, audioContext, source, shouldUseWebAudioApi]);
   if (audioStuffRef.current) {
     const valueToSet = volume;
     if (!isApproximatelyTheSame(audioStuffRef.current.gainNode.gain.value, valueToSet)) {
@@ -8045,7 +8039,9 @@ var useVolume = ({
       Log.trace(logLevel, `Setting gain to ${valueToSet} for ${mediaRef.current?.src}`);
     }
   }
-  if (mediaRef.current && isSafari() && mediaRef.current?.playbackRate !== 1 && !isApproximatelyTheSame(volume, mediaRef.current?.volume)) {
+  const safariCase = isSafari() && mediaRef.current && mediaRef.current?.playbackRate !== 1;
+  const shouldUseTraditionalVolume = safariCase || !shouldUseWebAudioApi;
+  if (shouldUseTraditionalVolume && mediaRef.current && !isApproximatelyTheSame(volume, mediaRef.current?.volume)) {
     mediaRef.current.volume = Math.min(volume, 1);
   }
   return audioStuffRef;
@@ -8142,12 +8138,12 @@ var useMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
   }, [initialVolume, mediaType, src, volume]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (!mediaRef.current) {
       return;
     }
@@ -8204,7 +8200,7 @@ var useMediaInTimeline = ({
     showInTimeline,
     premountDisplay
   ]);
-  useEffect9(() => {
+  useEffect8(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -8275,7 +8271,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -8312,7 +8308,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
-  useEffect10(() => {
+  useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -8485,7 +8481,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState12(false);
-  useEffect11(() => {
+  useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -8609,7 +8605,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef9(null);
-  useEffect12(() => {
+  useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -8893,7 +8889,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect13(() => {
+  useEffect12(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -8936,7 +8932,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect13(() => {
+  useEffect12(() => {
     const tagName = mediaType === "audio" ? "<Audio>" : "<Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -9102,6 +9098,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     toneFrequency,
+    useWebAudioApi,
     ...nativeProps
   } = props;
   const _propsValid = true;
@@ -9124,11 +9121,16 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume,
     mediaVolume
   });
+  const crossOriginValue = getCrossOriginValue({
+    crossOrigin,
+    requestsVideoFrame: false
+  });
   const propsToPass = useMemo20(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
       loop: _remotionInternalNativeLoopPassed,
+      crossOrigin: crossOriginValue,
       ...nativeProps
     };
   }, [
@@ -9138,7 +9140,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     muted,
     nativeProps,
     preloadedSrc,
-    userPreferredVolume
+    userPreferredVolume,
+    crossOriginValue
   ]);
   const id = useMemo20(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
@@ -9183,14 +9186,15 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     logLevel,
     mediaRef: audioRef,
     source: mediaElementSourceNode,
-    volume: userPreferredVolume
+    volume: userPreferredVolume,
+    shouldUseWebAudioApi: useWebAudioApi ?? false
   });
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef11(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect13(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -9210,10 +9214,6 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  const crossOriginValue = getCrossOriginValue({
-    crossOrigin,
-    requestsVideoFrame: false
-  });
   return /* @__PURE__ */ jsx17("audio", {
     ref: audioRef,
     preload: "metadata",
@@ -9260,7 +9260,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -9579,7 +9579,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
   }
 };
 var Fallback = () => {
-  useEffect17(() => {
+  useEffect16(() => {
     const fallback = delayRender("Waiting for Root component to unsuspend");
     return () => continueRender(fallback);
   }, []);
@@ -9614,7 +9614,7 @@ var InnerComposition = ({
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext26(FolderContext);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -9653,7 +9653,7 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect17(() => {
+  useEffect16(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -10136,7 +10136,7 @@ var RemotionRoot = ({
       }
     };
   }, []);
-  useEffect18(() => {
+  useEffect17(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -10833,7 +10833,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -10894,6 +10894,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     allowAmplificationDuringRender,
+    useWebAudioApi,
     ...nativeProps
   } = props2;
   const _propsValid = true;
@@ -10948,7 +10949,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     logLevel,
     mediaRef: videoRef,
     volume: userPreferredVolume,
-    source: sharedSource
+    source: sharedSource,
+    shouldUseWebAudioApi: useWebAudioApi ?? false
   });
   const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, durationInFrames) : durationInFrames;
@@ -10968,7 +10970,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -10999,7 +11001,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11016,7 +11018,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11211,7 +11213,7 @@ var VideoForRenderingForwardFunction = ({
     frame: volumePropsFrame,
     mediaVolume: 1
   });
-  useEffect222(() => {
+  useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -11252,7 +11254,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect222(() => {
+  useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -14816,23 +14818,23 @@ var PlayerUI = ({
   });
 };
 var PlayerUI_default = forwardRef13(PlayerUI);
-var VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
-var persistVolume = (volume, logLevel) => {
+var DEFAULT_VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
+var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
     return;
   }
   try {
-    window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
+    window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
   } catch (e) {
     Internals.Log.error(logLevel, "Could not persist volume", e);
   }
 };
-var getPreferredVolume = () => {
+var getPreferredVolume = (volumePersistenceKey) => {
   if (typeof window === "undefined") {
     return 1;
   }
   try {
-    const val = window.localStorage.getItem(VOLUME_PERSISTANCE_KEY);
+    const val = window.localStorage.getItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY);
     return val ? Number(val) : 1;
   } catch {
     return 1;
@@ -14850,7 +14852,8 @@ var SharedPlayerContexts = ({
   numberOfSharedAudioTags,
   initiallyMuted,
   logLevel,
-  audioLatencyHint
+  audioLatencyHint,
+  volumePersistenceKey
 }) => {
   const compositionManagerContext = useMemo132(() => {
     const context = {
@@ -14876,7 +14879,7 @@ var SharedPlayerContexts = ({
     return context;
   }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
   const [mediaMuted, setMediaMuted] = useState122(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState122(() => getPreferredVolume());
+  const [mediaVolume, setMediaVolume] = useState122(() => getPreferredVolume(volumePersistenceKey ?? null));
   const mediaVolumeContextValue = useMemo132(() => {
     return {
       mediaMuted,
@@ -14885,8 +14888,8 @@ var SharedPlayerContexts = ({
   }, [mediaMuted, mediaVolume]);
   const setMediaVolumeAndPersist = useCallback122((vol) => {
     setMediaVolume(vol);
-    persistVolume(vol, logLevel);
-  }, [logLevel]);
+    persistVolume(vol, logLevel, volumePersistenceKey ?? null);
+  }, [logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo132(() => {
     return {
       setMediaMuted,
@@ -15085,6 +15088,7 @@ var PlayerFn = ({
   noSuspense,
   acknowledgeRemotionLicense,
   audioLatencyHint = "interactive",
+  volumePersistenceKey,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -15219,6 +15223,7 @@ var PlayerFn = ({
       initiallyMuted,
       logLevel,
       audioLatencyHint,
+      volumePersistenceKey,
       children: /* @__PURE__ */ jsx142(Internals.Timeline.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx142(PlayerEmitterProvider, {
@@ -21371,6 +21376,7 @@ var NewLanding = ({ colorMode, setColorMode }) => {
     children: /* @__PURE__ */ jsx131("div", {
       className: "bg-[var(--background)] relative",
       children: /* @__PURE__ */ jsxs58("div", {
+        style: { overflow: "hidden" },
         children: [
           /* @__PURE__ */ jsx131("div", {
             children: /* @__PURE__ */ jsx131(BackgroundAnimation, {})

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/components/Homepage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ColorMode } from './homepage/layout/use-color-mode';
+export declare const NewLanding: React.FC<{
+    readonly colorMode: ColorMode;
+    readonly setColorMode: (colorMode: ColorMode) => void;
+}>;

package/dist/components/Homepage.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BackgroundAnimation } from './homepage/BackgroundAnimation';
+import CommunityStats from './homepage/CommunityStats';
+import { Demo } from './homepage/Demo';
+import { LightningFastEditor } from './homepage/Editor';
+import EvaluateRemotionSection from './homepage/EvaluateRemotion';
+import { IfYouKnowReact } from './homepage/IfYouKnowReact';
+import { ColorModeProvider } from './homepage/layout/use-color-mode';
+import { NewsletterButton } from './homepage/NewsletterButton';
+import { Pricing } from './homepage/Pricing';
+import { RealMP4Videos } from './homepage/RealMp4Videos';
+import TrustedByBanner from './homepage/TrustedByBanner';
+import { VideoApps } from './homepage/VideoApps';
+import VideoAppsShowcase from './homepage/VideoAppsShowcase';
+import { SectionTitle, VideoAppsTitle } from './homepage/VideoAppsTitle';
+import { WriteInReact } from './homepage/WriteInReact';
+export const NewLanding = ({ colorMode, setColorMode }) => {
+    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "bg-[var(--background)] relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(LightningFastEditor, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsTitle, {}), _jsx(VideoApps, { active: "remotion" }), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+};

package/dist/components/homepage/BackgroundAnimation.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BackgroundAnimation: React.FC;

package/dist/components/homepage/BackgroundAnimation.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLength } from '@remotion/paths';
+import { useEffect } from 'react';
+const rx = 0.2;
+const ry = 0.45;
+function ellipseToPath(cx, cy) {
+    let output = 'M' + (cx - rx).toString() + ',' + cy.toString();
+    output +=
+        'a' +
+            rx.toString() +
+            ',' +
+            ry.toString() +
+            ' 0 1,0 ' +
+            (2 * rx).toString() +
+            ',0';
+    output +=
+        'a' +
+            rx.toString() +
+            ',' +
+            ry.toString() +
+            ' 0 1,0 ' +
+            (-2 * rx).toString() +
+            ',0';
+    return output;
+}
+const strokeWidth = 0.035;
+export const BackgroundAnimation = () => {
+    const d = ellipseToPath(0.5, 0.5);
+    const length = getLength(d);
+    const css = `
+    @keyframes bganimation {
+      from {
+        stroke-dashoffset: 0
+      }
+    
+      to {
+        stroke-dashoffset: ${length};
+      }
+    }  
+  `;
+    useEffect(() => {
+        const _style = document.createElement('style');
+        _style.innerHTML = css;
+        document.head.appendChild(_style);
+    }, [css]);
+    return (_jsx("div", { className: " w-full h-full left-[50%] ml-[-50%] min-w-0 lg:m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none", children: _jsxs("svg", { className: "translate-y-[-30%] lg:translate-y-[-50%]", viewBox: "0 0 1 1", style: {
+                width: '100%',
+                position: 'absolute',
+            }, children: [_jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", className: "stroke-[0.04] lg:stroke-[0.035]", style: {
+                        transformOrigin: 'center center',
+                        transform: `rotate(120deg)`,
+                        animation: `bganimation 20s linear infinite`,
+                        strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    } }), _jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", strokeWidth: strokeWidth, className: "stroke-[0.04] lg:stroke-[0.035]", style: {
+                        transformOrigin: 'center center',
+                        transform: `rotate(0deg)`,
+                        animation: `bganimation 20s linear infinite`,
+                        strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    } }), _jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", strokeWidth: strokeWidth, className: "stroke-[0.04] lg:stroke-[0.035]", style: {
+                        transformOrigin: 'center center',
+                        transform: `rotate(240deg)`,
+                        animation: `bganimation 20s linear infinite`,
+                        strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    } })] }) }));
+};

package/dist/components/homepage/ChooseTemplate.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChooseTemplate: React.FC;

package/dist/components/homepage/ChooseTemplate.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CreateVideoInternals } from 'create-video';
+import { IconForTemplate } from './IconForTemplate';
+import { MoreTemplatesButton } from './MoreTemplatesButton';
+import { TemplateIcon } from './TemplateIcon';
+export const ChooseTemplate = () => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: _jsx("div", { style: {
+                position: 'relative',
+                textAlign: 'center',
+            }, children: _jsxs("div", { className: "no-scroll-bar", style: {
+                    backgroundColor: 'var(--plain-button)',
+                    display: 'inline-flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-around',
+                    boxShadow: '0 0 4px 0px var(--ifm-color-emphasis-200)',
+                    borderRadius: 50,
+                    alignItems: 'center',
+                    padding: 8,
+                    width: '100%',
+                    maxWidth: '550px',
+                }, children: [CreateVideoInternals.FEATURED_TEMPLATES.filter((f) => f.featuredOnHomePage).map((template) => {
+                        return (_jsx("a", { className: "text-inherit no-underline", href: `/templates/${template.cliId}`, children: _jsx(TemplateIcon, { label: template.featuredOnHomePage, children: _jsx(IconForTemplate, { scale: 0.7, template: template }) }) }, template.cliId));
+                    }), _jsx(MoreTemplatesButton, {})] }) }) }));
+};