@remotion/promo-pages 4.0.486 → 4.0.488

package/dist/components/Homepage.js

@@ -1,20 +1,36 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import AutomationsSection from './homepage/AutomationsSection';
 import { BackgroundAnimation } from './homepage/BackgroundAnimation';
+import { CanvasSectionTitle } from './homepage/CanvasSectionTitle';
 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 = '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" }), _jsx(MakeVideosInteractively, {}), _jsx(MakeVideosProgrammatically, { links: [
+                                            { label: 'API Docs', href: '/docs/api' },
+                                            { label: 'Resources', href: '/docs/api' },
+                                        ] })] }), _jsx("br", {}), _jsx("br", {}), _jsx(CanvasSectionTitle, { children: "Automate video production" }), _jsxs("div", { className: makeVideosRowClassName, children: [_jsx(MakeVideosProgrammatically, { title: "Design systems", description: "Create a library of animated assets for your organization.", showVideo: false }), _jsx(MakeVideosAgentically, { title: "Batch rendering", description: "Render millions of videos on your own infrastructure.", links: [
+                                            {
+                                                label: 'Server-side rendering',
+                                                href: '/docs/compare-ssr',
+                                            },
+                                            {
+                                                label: 'Client-side rendering',
+                                                href: '/docs/client-side-rendering',
+                                            },
+                                        ] }), _jsx(MakeVideosInteractively, { title: "Applications", description: "Publish a simple tool or a complex video editor.", showVideo: false, links: [
+                                            { label: 'Player', href: '/docs/player' },
+                                            { label: 'Editor Starter', href: '/editor-starter' },
+                                        ] })] }), _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,14 +23,14 @@ 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" })] }));
 };
 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: "52K", 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: "51K", 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: {

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

@@ -20,8 +20,8 @@ declare const data: z.ZodObject<{
     }, z.core.$strip>;
     emojiIndex: z.ZodNumber;
     theme: z.ZodEnum<{
-        light: "light";
         dark: "dark";
+        light: "light";
     }>;
     cardOrder: z.ZodArray<z.ZodNumber>;
 }, z.core.$strip>;

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

@@ -6,7 +6,7 @@ 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 { delayRender, continueRender } = useDelayRender();
     const src = useMemo(() => {
         if (emoji === 'melting') {
             return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
@@ -31,10 +31,8 @@ export const DisplayedEmoji = ({ emoji }) => {
             });
             continueRender(handle);
         })
-            .catch((err) => {
-            cancelRender(err);
-        });
-    }, [handle, src, continueRender, cancelRender]);
+            .catch(() => undefined);
+    }, [handle, src, continueRender]);
     useEffect(() => {
         if (typeof document !== 'undefined') {
             setBrowser(true);

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

@@ -7,4 +7,4 @@ export declare const cardHeight: number;
 export declare const cardWidth: number;
 export declare const getPositionForIndex: (index: number) => Position;
 export declare const getInitialPositions: () => Position[];
-export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 2 | 3 | 1 | undefined;
+export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 3 | 1 | 2 | undefined;

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/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: '52k' })] }));
+    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: '51k' })] }));
 };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type MakeVideosLink } from './MakeVideosLinks';
+export declare const MakeVideosAgentically: React.FC<{
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly showLinks?: boolean;
+    readonly links?: readonly MakeVideosLink[];
+    readonly showVideo?: boolean;
+    readonly videoSrc?: string;
+}>;

package/dist/components/homepage/MakeVideosAgentically.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { MakeVideosLinks } from './MakeVideosLinks';
+export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-500", children: "Make videos" }), _jsx("br", {}), " agentically"] })), description = 'Turn your idea into a video using your coding agent.', showLinks = true, links = [
+    { label: 'Agent Skills', href: '/docs/ai/skills' },
+    { label: 'Prompts', href: '/prompts' },
+], showVideo = true, videoSrc = '/img/render-progress.webm', }) => {
+    const ref = useRef(null);
+    const videoRef = useRef(null);
+    // eslint-disable-next-line no-warning-comments
+    // TODO: Add an opaque fallback for browsers that do not support transparent WebM.
+    useEffect(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const callback = (data) => {
+            var _a;
+            if (data[0].isIntersecting) {
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            }
+        };
+        const observer = new IntersectionObserver(callback, {
+            root: null,
+            threshold: 0.5,
+        });
+        observer.observe(current);
+        return () => observer.unobserve(current);
+    }, []);
+    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsx("video", { ref: videoRef, src: videoSrc, muted: true, autoPlay: true, playsInline: true, loop: true, style: {
+                        width: 400,
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        borderRadius: 7,
+                        overflow: 'hidden',
+                    }, className: "cursor-default! relative object-contain" })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type MakeVideosLink } from './MakeVideosLinks';
+export declare const MakeVideosInteractively: React.FC<{
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly showLinks?: boolean;
+    readonly links?: readonly MakeVideosLink[];
+    readonly showVideo?: boolean;
+}>;

package/dist/components/homepage/MakeVideosInteractively.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { MakeVideosLinks } from './MakeVideosLinks';
+export const MakeVideosInteractively = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-500", children: "Make videos" }), _jsx("br", {}), " interactively"] })), description = 'Edit and animate using drag and drop and save back to code.', showLinks = true, links = [{ label: 'Remotion Studio', href: '/docs/studio' }], showVideo = true, }) => {
+    const ref = useRef(null);
+    // eslint-disable-next-line no-warning-comments
+    // TODO: Add an opaque fallback for browsers that do not support transparent WebM.
+    const videoSrc = '/img/editing-vp9-chrome.webm';
+    return (_jsxs("div", { ref: ref, className: 'flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsx("video", { src: videoSrc, autoPlay: true, muted: true, playsInline: true, loop: true, style: {
+                        width: 500,
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        borderRadius: 7,
+                        overflow: 'hidden',
+                    }, className: "object-contain" })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type MakeVideosLink = {
+    readonly label: string;
+    readonly href: string;
+};
+export declare const MakeVideosLinkItem: React.FC<MakeVideosLink>;
+export declare const MakeVideosLinks: React.FC<{
+    readonly links: readonly MakeVideosLink[];
+}>;

package/dist/components/homepage/MakeVideosLinks.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+const icon = {
+    height: 16,
+    marginLeft: 10,
+};
+export const MakeVideosLinkItem = ({ href, label }) => {
+    return (_jsxs("a", { className: "no-underline text-gray-500 font-brand font-medium text-sm inline-flex flex-row items-center", href: href, children: [label, _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" }) })] }));
+};
+export const MakeVideosLinks = ({ links }) => {
+    if (links.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-4" }), _jsx("div", { className: "leading-6", children: links.map((link) => {
+                    return (_jsxs(React.Fragment, { children: [_jsx(MakeVideosLinkItem, { ...link }), _jsx("br", {})] }, link.href));
+                }) })] }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type MakeVideosLink } from './MakeVideosLinks';
+export declare const MakeVideosProgrammatically: React.FC<{
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly showLinks?: boolean;
+    readonly links?: readonly MakeVideosLink[];
+    readonly showVideo?: boolean;
+}>;

package/dist/components/homepage/MakeVideosProgrammatically.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MakeVideosLinks } from './MakeVideosLinks';
+export const MakeVideosProgrammatically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-500", children: "Make videos" }), _jsx("br", {}), " programmatically"] })), description = 'Connect data, and manage complexity with code.', showLinks = true, links = [], showVideo = true, }) => {
+    // eslint-disable-next-line no-warning-comments
+    // TODO: Add an opaque fallback for browsers that do not support transparent WebM.
+    const videoSrc = '/img/what-is-remotion.webm';
+    return (_jsxs("div", { className: 'flex min-w-0 basis-0 flex-col flex-1', children: [_jsx("div", { className: "flex aspect-square w-full items-start", children: showVideo ? (_jsx("video", { src: videoSrc, muted: true, autoPlay: true, playsInline: true, loop: true, className: "relative max-h-full max-w-full cursor-default! object-contain lg:mb-0 lg:mt-0" })) : null }), _jsxs("div", { className: "font-brand", children: [_jsx("h2", { className: "text-2xl fontbrand leading-[1.1] font-medium", children: title }), _jsx("p", { className: "leading-relaxed", children: description }), showLinks ? _jsx(MakeVideosLinks, { links: links }) : null] })] }));
+};

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

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

package/dist/components/homepage/Pricing.js

@@ -1,10 +1,6 @@
 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' }) => {
-    const faqLinkTarget = useMemo(() => {
-        return faqHref.startsWith('http') ? '_blank' : undefined;
-    }, [faqHref]);
+export const Pricing = () => {
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -15,5 +11,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: "_blank", className: "bluelink", href: "https://remotion.pro/faq", children: "FAQ" }), ' ', "and", ' ', _jsx("a", { target: "_blank", className: "bluelink", href: "https://www.remotion.pro/terms", 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: ["Video tools for the agent era. ", _jsx("br", {}), "Motion graphics, video editing, automations and apps."] }), _jsx("br", {}), _jsx("div", { children: _jsx(GetStarted, {}) })] }));
 };

package/dist/components/team/TrustSection.js

@@ -55,5 +55,5 @@ const StarIcon = () => {
         }, children: _jsx("path", { className: "fill-brand stroke-black dark:stroke-white", strokeWidth: 36, d: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.6 329l104.2-103.1c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" }) }));
 };
 export const TrustSection = () => {
-    return (_jsxs("div", { className: "mt-10", children: [_jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(SwissIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Swiss quality" }), _jsxs("div", { className: "font-brand", children: ["We are a company based in Zurich, Switzerland. We", "'", "re far away from the craziness that is Silicon Valley."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ProfitableIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Sustainable business" }), _jsxs("div", { className: "font-brand", children: ["Remotion is profitable. Aside from our", ' ', _jsx("a", { href: "/docs/investors", className: "text-brand hover:underline underline-offset-4", children: "early investors" }), ", we don", "'", "t need outside investment to sustain the business."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(KeyIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Founder-owned" }), _jsx("div", { className: "font-brand", children: "We, the founders, own the company. And we just want one thing: Make programmatic video glorious." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ClockIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "5 years and counting" }), _jsx("div", { className: "font-brand", children: "Making Remotion since 2021. No plans to change our business model or sell the company." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ShieldIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Succession plan" }), _jsxs("div", { className: "font-brand", children: ["If something happens to us, the project will fall under", ' ', _jsx("a", { href: "https://github.com/wcandillon", target: "_blank", className: "text-brand hover:underline underline-offset-4", children: "William Candillon" }), "'s", " supervision."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(UsersIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "300+ customers" }), _jsx("div", { className: "font-brand", children: "More than 300 companies trust Remotion, from small businesses to FAANG." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(CodeIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Source-available" }), _jsx("div", { className: "font-brand", children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(VideoIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "2M+ videos/month" }), _jsx("div", { className: "font-brand", children: "More than one million videos are rendered with Remotion every month. Battle-tested at scale." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(StarIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "50,000+ GitHub stars" }), _jsx("div", { className: "font-brand", children: "One of the most popular media projects on GitHub. Trusted by the developer community." })] })] })] }));
+    return (_jsxs("div", { className: "mt-10", children: [_jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(SwissIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Swiss quality" }), _jsxs("div", { className: "font-brand", children: ["We are a company based in Zurich, Switzerland. We", "'", "re far away from the craziness that is Silicon Valley."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ProfitableIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Sustainable business" }), _jsxs("div", { className: "font-brand", children: ["Remotion is profitable. Aside from our", ' ', _jsx("a", { href: "/docs/investors", className: "text-brand hover:underline underline-offset-4", children: "early investors" }), ", we don", "'", "t need outside investment to sustain the business."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(KeyIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Founder-owned" }), _jsx("div", { className: "font-brand", children: "Us founders own the company. And we just want one thing: Make programmatic video glorious." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ClockIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "5 years and counting" }), _jsx("div", { className: "font-brand", children: "Making Remotion since 2021. No plans to change our business model or sell the company." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(ShieldIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Succession plan" }), _jsxs("div", { className: "font-brand", children: ["If something happens to us, the project will fall under", ' ', _jsx("a", { href: "https://github.com/wcandillon", target: "_blank", className: "text-brand hover:underline underline-offset-4", children: "William Candillon" }), "'s", " supervision."] })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(UsersIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "200+ customers" }), _jsx("div", { className: "font-brand", children: "More than 200 companies trust Remotion, from small businesses to FAANG." })] })] }), _jsx("div", { className: "h-4" }), _jsxs("div", { className: "inline-flex flex-col lg:flex-row gap-4 flex-wrap", children: [_jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(CodeIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "Source-available" }), _jsx("div", { className: "font-brand", children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(VideoIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "1M+ videos/month" }), _jsx("div", { className: "font-brand", children: "More than one million videos are rendered with Remotion every month. Battle-tested at scale." })] }), _jsxs(Card, { className: "lg:w-[300px] text-left px-4 py-6 flex-1", children: [_jsx(StarIcon, {}), _jsx("div", { className: "h-4" }), _jsx("div", { className: "font-brand font-bold text-2xl mb-2", children: "40,000+ GitHub stars" }), _jsx("div", { className: "font-brand", children: "One of the most popular media projects on GitHub. Trusted by the developer community." })] })] })] }));
 };