@remotion/promo-pages 4.0.490 → 4.0.492

package/dist/components/Homepage.js

@@ -5,16 +5,20 @@ import { BackgroundAnimation } from './homepage/BackgroundAnimation';
 import CommunityStats from './homepage/CommunityStats';
 import { Demo } from './homepage/Demo';
 import EvaluateRemotionSection from './homepage/EvaluateRemotion';
-import { IfYouKnowReact } from './homepage/IfYouKnowReact';
 import { ColorModeProvider } from './homepage/layout/use-color-mode';
+import { MakeVideosAgentically } from './homepage/MakeVideosAgentically';
+import { MakeVideosInteractively } from './homepage/MakeVideosInteractively';
+import { MakeVideosProgrammatically } from './homepage/MakeVideosProgrammatically';
 import { NewsletterButton } from './homepage/NewsletterButton';
-import { ParameterizeAndEdit } from './homepage/ParameterizeAndEdit';
 import { Pricing } from './homepage/Pricing';
-import { RealMP4Videos } from './homepage/RealMp4Videos';
 import TrustedByBanner from './homepage/TrustedByBanner';
 import { BuiltWithRemotionShowcase } from './homepage/VideoAppsShowcase';
 import { SectionTitle } from './homepage/VideoAppsTitle';
 import { WriteInReact } from './homepage/WriteInReact';
+const makeVideosRowClassName = 'mt-4 md:mt-6 flex flex-col lg:flex-row gap-10';
 export const NewLanding = ({ colorMode, setColorMode }) => {
-    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full 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(ParameterizeAndEdit, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("div", { className: "pt-6 md:pt-8", children: _jsx(AutomationsSection, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(BuiltWithRemotionShowcase, {}), _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("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full 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", {}), _jsxs("div", { className: makeVideosRowClassName, children: [_jsx(MakeVideosAgentically, { videoSrc: "/img/homepage-assets-master.webm", fallbackVideoSrc: "/img/homepage-assets-master.mp4" }), _jsx(MakeVideosInteractively, {}), _jsx(MakeVideosProgrammatically, { links: [
+                                            { label: 'API Docs', href: '/docs/api' },
+                                            { label: 'Resources', href: '/docs/resources' },
+                                        ] })] }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("div", { className: "pt-6 md:pt-8", children: _jsx(AutomationsSection, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(BuiltWithRemotionShowcase, {}), _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("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CanvasSectionTitle: React.FC<{
+    readonly children: string;
+}>;

package/dist/components/homepage/CanvasSectionTitle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+export const CanvasSectionTitle = ({ children }) => {
+    const svgId = useId().replace(/:/g, '');
+    const glowFilterId = `title-glow-${svgId}`;
+    const glowClipId = `title-glow-clip-${svgId}`;
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute w-full overflow-visible h-20", focusable: "false", preserveAspectRatio: "none", viewBox: "0 0 1200 320", children: [_jsx("g", { clipPath: `url(#${glowClipId})`, filter: `url(#${glowFilterId})`, children: _jsx("ellipse", { cx: "600", cy: "320", fill: "rgba(0, 0, 0, 0.1)", rx: "400", ry: '100' }) }), _jsxs("defs", { children: [_jsx("filter", { id: glowFilterId, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "1120", width: "2000", x: "-400", y: "-480", children: _jsx("feGaussianBlur", { stdDeviation: "140" }) }), _jsx("clipPath", { id: glowClipId, clipPathUnits: "userSpaceOnUse", children: _jsx("rect", { height: "320", width: "2000", x: "-400", y: "0" }) })] })] }), _jsx("div", { className: "relative h-24 w-full overflow-visible", children: _jsx("div", { className: "relative z-10 flex h-full items-end justify-center", children: _jsx("h2", { className: "m-0 text-center text-4xl leading-none text-black", style: {
+                            fontFamily: 'GTPlanarVF, GTPlanar, sans-serif',
+                            fontVariationSettings: "'slnt' 0, 'wght' 700",
+                            fontStyle: 'normal',
+                            fontWeight: 700,
+                            paddingBottom: 16,
+                        }, children: children }) }) })] }));
+};

package/dist/components/homepage/CommunityStatsItems.js

@@ -23,7 +23,7 @@ export const InstallsPerMonth = () => {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                }, children: [_jsx(StatItemContent, { content: "3M+", 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", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
+                }, children: [_jsx(StatItemContent, { content: "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', gap: 8 }, 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: "32px" }), _jsx(StatItemContent, { content: "1000", width: "112px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "pages of docs", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));

package/dist/components/homepage/Demo/Card.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { type Position } from './math';
 export declare const Card: React.FC<{
     readonly index: number;
-    readonly refsToUse: React.MutableRefObject<HTMLDivElement>[];
+    readonly refsToUse: React.RefObject<HTMLDivElement>[];
     readonly onUpdate: (newIndices: number[]) => void;
     readonly content: React.ReactNode;
-    readonly positions: React.MutableRefObject<Position[]>;
-    readonly shouldBePositions: React.MutableRefObject<Position[]>;
+    readonly positions: React.RefObject<Position[]>;
+    readonly shouldBePositions: React.RefObject<Position[]>;
     readonly indices: number[];
     readonly theme: 'dark' | 'light';
     readonly withSwitcher: boolean;

package/dist/components/homepage/Demo/DisplayedEmoji.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getLottieMetadata, Lottie, } from '@remotion/lottie';
 import { useEffect, useMemo, useState } from 'react';
-import { useDelayRender, useVideoConfig } from 'remotion';
+import { useDelayRender, useRemotionEnvironment, useVideoConfig } from 'remotion';
 export const DisplayedEmoji = ({ emoji }) => {
     const [data, setData] = useState(null);
     const { durationInFrames, fps } = useVideoConfig();
     const [browser, setBrowser] = useState(typeof document !== 'undefined');
     const { delayRender, continueRender, cancelRender } = useDelayRender();
+    const { isRendering } = useRemotionEnvironment();
     const src = useMemo(() => {
         if (emoji === 'melting') {
             return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
@@ -32,9 +33,14 @@ export const DisplayedEmoji = ({ emoji }) => {
             continueRender(handle);
         })
             .catch((err) => {
-            cancelRender(err);
+            if (isRendering) {
+                cancelRender(err);
+            }
+            // eslint-disable-next-line no-console
+            console.warn('Could not load emoji animation', err);
+            continueRender(handle);
         });
-    }, [handle, src, continueRender, cancelRender]);
+    }, [handle, src, continueRender, cancelRender, isRendering]);
     useEffect(() => {
         if (typeof document !== 'undefined') {
             setBrowser(true);

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const EditorStarterSection: React.FC;
+export default EditorStarterSection;

package/dist/components/homepage/EditorStarterSection.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BlueButton, ClearButton } from './layout/Button';
+import { MuxVideo } from './MuxVideo';
+import { SectionTitle } from './VideoAppsTitle';
+const EditorStarterSection = () => {
+    return (_jsxs("div", { children: [_jsx(SectionTitle, { children: "Build your own video editor" }), _jsx("br", {}), _jsx("div", { className: 'card flex p-0 overflow-hidden', children: _jsxs("div", { className: 'flex-1 flex flex-col lg:flex-row justify-center', children: [_jsx("div", { className: 'w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee]', children: _jsx(MuxVideo, { muxId: 'YIvIidbcAc7009B00Wr7gIbGyq67YGNlytGvMXwdsLRtc', className: 'absolute left-0 top-0 w-full h-full object-cover object-top rounded-sm rounded-tr-none rounded-br-none', loop: true, autoPlay: true, playsInline: true, muted: true }) }), _jsxs("div", { className: 'p-6 flex-1 flex flex-col h-full', children: [_jsx("div", { className: "text-4xl font-bold fontbrand mt-0", children: "Editor Starter" }), _jsx("div", { className: "text-muted mt-4 text-base fontbrand", children: "A comprehensive template that includes everything you need to create custom video editing applications with React and TypeScript." }), _jsx("div", { className: "h-5" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("a", { href: "https://www.remotion.pro/editor-starter?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(BlueButton, { size: "sm", loading: false, children: "Purchase" }) }), _jsx("a", { href: "https://editor-starter.remotion.dev?ref=remotion.dev", target: "_blank", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Demo" }) }), ' ', _jsx("a", { href: "https://remotion.dev/editor-starter", className: "no-underline", children: _jsx(ClearButton, { size: "sm", loading: false, children: "Docs" }) })] }), _jsx("br", {})] })] }) })] }));
+};
+export default EditorStarterSection;

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

@@ -1,4 +1,7 @@
 import React from 'react';
 export declare const Pricing: React.FC<{
     readonly faqHref?: string;
+    readonly faqLabel?: string;
+    readonly licenseHref?: string;
+    readonly termsHref?: string;
 }>;

package/dist/components/homepage/Pricing.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { CompanyPricing, EnterpriseLicense, FreePricing } from './FreePricing';
-export const Pricing = ({ faqHref = '/pricing#faq' }) => {
+export const Pricing = ({ faqHref = '/docs/license/faq', faqLabel = 'License FAQ', licenseHref = 'https://github.com/remotion-dev/remotion/blob/main/LICENSE.md', termsHref = 'https://www.remotion.pro/terms', }) => {
     const faqLinkTarget = useMemo(() => {
         return faqHref.startsWith('http') ? '_blank' : undefined;
     }, [faqHref]);
+    const licenseLinkTarget = useMemo(() => {
+        return licenseHref.startsWith('http') ? '_blank' : undefined;
+    }, [licenseHref]);
+    const termsLinkTarget = useMemo(() => {
+        return termsHref.startsWith('http') ? '_blank' : undefined;
+    }, [termsHref]);
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -15,5 +21,5 @@ export const Pricing = ({ faqHref = '/pricing#faq' }) => {
                     display: 'flex',
                 }, children: _jsxs("div", { style: {
                         fontFamily: 'GTPlanar',
-                    }, children: ["See our", ' ', _jsx("a", { target: faqLinkTarget, className: "bluelink", href: faqHref, children: "FAQ" }), ' ', "and", ' ', _jsx("a", { target: "_blank", className: "bluelink", href: "https://www.remotion.pro/terms", children: "Terms and Conditions" }), ' ', "for more details."] }) })] }));
+                    }, children: ["See our", ' ', _jsx("a", { target: licenseLinkTarget, className: "bluelink", href: licenseHref, children: "LICENSE.md" }), ', ', _jsx("a", { target: faqLinkTarget, className: "bluelink", href: faqHref, children: faqLabel }), ', and ', _jsx("a", { target: termsLinkTarget, className: "bluelink", href: termsHref, children: "Terms and Conditions" }), ' ', "for more details."] }) })] }));
 };

package/dist/components/homepage/WriteInReact.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChooseTemplate } from './ChooseTemplate';
 import { GetStarted } from './GetStartedStrip';
 export const WriteInReact = () => {
     return (_jsxs("div", { children: [_jsx("h1", { className: "text-4xl sm:text-5xl lg:text-[5em] text-center fontbrand font-black leading-none text-balance", style: {
                     textShadow: '0 5px 30px var(--background)',
                 }, children: "Make videos programmatically." }), _jsxs("p", { style: {
                     textShadow: '0 5px 30px var(--background)',
-                }, className: "font-medium text-center text-lg", children: ["Create real MP4 videos with React. ", _jsx("br", {}), "Use coding agents, build apps and render in bulk."] }), _jsx("br", {}), _jsx("div", { children: _jsx(GetStarted, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx(ChooseTemplate, {})] }));
+                }, className: "font-medium text-center text-lg", children: ["Create real MP4 videos with React. ", _jsx("br", {}), "Use coding agents, build apps and render in bulk."] }), _jsx("br", {}), _jsx("div", { children: _jsx(GetStarted, {}) }), _jsx("br", {}), _jsx("br", {})] }));
 };