@remotion/promo-pages 4.0.504 → 4.0.506

package/dist/components/Homepage.js

@@ -3,6 +3,7 @@ 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 { DiscoverRemotion } from './homepage/DiscoverRemotion';
 import EvaluateRemotionSection from './homepage/EvaluateRemotion';
 import { ColorModeProvider } from './homepage/layout/use-color-mode';
 import { MakeVideosAgentically } from './homepage/MakeVideosAgentically';
@@ -10,6 +11,7 @@ import { MakeVideosInteractively } from './homepage/MakeVideosInteractively';
 import { MakeVideosProgrammatically } from './homepage/MakeVideosProgrammatically';
 import { NewsletterButton } from './homepage/NewsletterButton';
 import { Pricing } from './homepage/Pricing';
+import { ReactSourceOfTruth } from './homepage/ReactSourceOfTruth';
 import TrustedByBanner from './homepage/TrustedByBanner';
 import { BuiltWithRemotionShowcase } from './homepage/VideoAppsShowcase';
 import { SectionTitle } from './homepage/VideoAppsTitle';
@@ -19,7 +21,7 @@ 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", {}), _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", {}), _jsxs("div", { className: makeVideosRowClassName, children: [_jsx(MakeVideosProgrammatically, { title: "Design systems", description: "Create a library of animated assets for your organization.", videoSrc: "/img/design-systems.webm", fallbackVideoSrc: "/img/design-systems.mp4", links: [
+                                        ] })] }), _jsx(ReactSourceOfTruth, {}), _jsxs("div", { className: makeVideosRowClassName, children: [_jsx(MakeVideosProgrammatically, { title: "Design systems", description: "Create a library of animated assets for your organization.", videoSrc: "/img/design-systems.webm", fallbackVideoSrc: "/img/design-systems.mp4", links: [
                                             { label: 'Motion design systems', href: '/design-systems' },
                                         ] }), _jsx(MakeVideosAgentically, { title: "Batch rendering", description: "Render millions of videos on your own infrastructure.", links: [
                                             {
@@ -33,5 +35,5 @@ export const NewLanding = ({ colorMode, setColorMode }) => {
                                         ] }), _jsx(MakeVideosInteractively, { title: "Applications", description: "Publish a simple tool or a complex video editor.", videoSrc: "/img/applications.webm", fallbackVideoSrc: "/img/applications.mp4", links: [
                                             { label: 'Player', href: '/docs/player' },
                                             { label: 'Editor Starter', href: '/editor-starter' },
-                                        ] })] }), _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", {})] })] }) }) }));
+                                        ] })] }), _jsx(DiscoverRemotion, {}), _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/DiscoverRemotion.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './DiscoverRemotion.css';
+type Orientation = {
+    readonly x: number;
+    readonly y: number;
+};
+export declare const DiscoverRemotion: React.FC<{
+    readonly initialOrientation?: Orientation;
+}>;
+export {};

package/dist/components/homepage/DiscoverRemotion.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@remotion/design';
+import { reduceMatrices, rotateX, rotateY } from '@remotion/svg-3d-engine';
+import { useEffect, useState } from 'react';
+import './DiscoverRemotion.css';
+import { SectionTitle } from './VideoAppsTitle';
+const meritRows = [
+    [
+        {
+            label: '1,000+ pages of docs',
+            href: '/docs',
+        },
+        {
+            label: '5M monthly npm downloads',
+            href: 'https://www.npmjs.com/package/remotion',
+        },
+        {
+            label: '55,000 GitHub stars',
+            href: 'https://github.com/remotion-dev/remotion',
+        },
+    ],
+    [
+        {
+            label: '20+ ready-to-use templates',
+            href: '/templates',
+        },
+        { label: 'Remotion Convert', href: '/convert' },
+        { label: 'Editor Starter', href: '/editor-starter' },
+        { label: 'Experts for hire', href: '/experts' },
+    ],
+    [
+        { label: 'Make videos in React', href: '/docs' },
+        { label: 'Server rendering', href: '/docs/ssr' },
+        {
+            label: 'Browser rendering',
+            href: '/docs/client-side-rendering',
+        },
+        { label: 'Drag & drop effects', href: '/docs/effects' },
+        { label: 'Animated captions', href: '/docs/captions' },
+    ],
+    [
+        { label: 'Elements library', href: '/elements' },
+        { label: 'Sound effects', href: '/docs/sfx' },
+        { label: 'Transition library', href: '/docs/transitions' },
+        { label: 'AI-native tooling', href: '/docs/ai' },
+    ],
+    [
+        {
+            label: 'Loved by OpenAI & Anthropic',
+            href: '/showcase',
+        },
+        {
+            label: 'Independent team, no VCs',
+            href: '/about',
+        },
+        {
+            label: 'Join us on Discord',
+            href: 'https://remotion.dev/discord',
+        },
+    ],
+];
+const positionedRows = meritRows.map((row, rowIndex) => {
+    return row.map((merit, columnIndex) => {
+        const itemIndex = meritRows.slice(0, rowIndex).reduce((sum, items) => {
+            return sum + items.length;
+        }, 0) + columnIndex;
+        const x = row.length === 1 ? 0 : columnIndex / (row.length - 1) - 0.5;
+        const y = rowIndex / (meritRows.length - 1) - 0.5;
+        const mobileRow = Math.floor(itemIndex / 2);
+        const mobileRows = Math.ceil(meritRows.flat().length / 2);
+        const mobileY = mobileRow / Math.max(1, mobileRows - 1) - 0.5;
+        return {
+            ...merit,
+            desktopSizeFactor: 1 + Math.max(0, 1 - Math.hypot(x * 2, y * 2)) * 0.3,
+            isLast: itemIndex === meritRows.flat().length - 1,
+            mobileColumn: itemIndex % 2 === 0 ? 'left' : 'right',
+            rotationX: y * 40,
+            rotationY: x * -50,
+            mobileRotationX: mobileY * 26,
+            mobileRotationY: (itemIndex % 2 === 0 ? 1 : -1) * 12,
+            mobileSizeFactor: 1 + (1 - Math.abs(mobileY) * 2) * 0.3,
+        };
+    });
+});
+const MeritButton = ({ initialOrientation, isMobile, merit }) => {
+    const isExternal = merit.href.startsWith('http');
+    return (_jsx("div", { className: `discovery-merit discovery-merit-${merit.mobileColumn}${merit.isLast ? ' discovery-merit-last' : ''}`, style: {
+            '--discovery-size-factor': isMobile
+                ? merit.mobileSizeFactor
+                : merit.desktopSizeFactor,
+        }, children: _jsx(Button, { href: merit.href, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noreferrer' : undefined, depth: 1.5, initialTransform: reduceMatrices([
+                rotateX(((isMobile ? merit.mobileRotationX : merit.rotationX) +
+                    initialOrientation.x) *
+                    (Math.PI / 180)),
+                rotateY(((isMobile ? merit.mobileRotationY : merit.rotationY) +
+                    initialOrientation.y) *
+                    (Math.PI / 180)),
+            ]), className: "discovery-merit-button", children: merit.label }) }));
+};
+export const DiscoverRemotion = ({ initialOrientation = { x: 0, y: 0 } }) => {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(max-width: 767px)');
+        const updateLayout = () => setIsMobile(mediaQuery.matches);
+        updateLayout();
+        mediaQuery.addEventListener('change', updateLayout);
+        return () => mediaQuery.removeEventListener('change', updateLayout);
+    }, []);
+    return (_jsxs("section", { className: "discovery-section", children: [_jsx(SectionTitle, { children: "Discover Remotion" }), _jsx("p", { className: "discovery-subtitle", children: "The most complete ecosystem for programmatic video creation." }), _jsx("div", { className: "discovery-perspective", children: _jsx("div", { className: "discovery-cluster", children: positionedRows.map((row, rowIndex) => {
+                        return (_jsx("div", { className: "discovery-row", children: row.map((merit) => {
+                                return (_jsx(MeritButton, { initialOrientation: initialOrientation, isMobile: isMobile, merit: merit }, `${merit.label}-${isMobile ? 'mobile' : 'desktop'}`));
+                            }) }, rowIndex));
+                    }) }) })] }));
+};

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

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

package/dist/components/homepage/ReactSourceOfTruth.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ReactSourceOfTruth = () => {
+    return (_jsx("section", { "aria-labelledby": "react-source-of-truth", className: "mb-16 mt-[60px] hidden items-center justify-center gap-2 lg:flex", children: _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs("svg", { "aria-hidden": "true", className: "h-6 w-6 text-[var(--subtitle)]", fill: "none", viewBox: "0 0 64 64", children: [_jsx("ellipse", { cx: "32", cy: "32", rx: "26", ry: "10", stroke: "currentColor", strokeWidth: "5" }), _jsx("ellipse", { cx: "32", cy: "32", rx: "26", ry: "10", stroke: "currentColor", strokeWidth: "5", transform: "rotate(60 32 32)" }), _jsx("ellipse", { cx: "32", cy: "32", rx: "26", ry: "10", stroke: "currentColor", strokeWidth: "5", transform: "rotate(120 32 32)" }), _jsx("circle", { cx: "32", cy: "32", fill: "currentColor", r: "3.5" })] }), _jsx("p", { id: "react-source-of-truth", className: "m-0 font-brand leading-relaxed", children: "Switch workflows at any time. Code is always the source of truth." }), _jsx("svg", { "aria-hidden": "true", className: "h-6 w-6 text-[var(--subtitle)]", fill: "currentColor", viewBox: "0 0 640 640", children: _jsx("path", { d: "M176 168C189.3 168 200 157.3 200 144C200 130.7 189.3 120 176 120C162.7 120 152 130.7 152 144C152 157.3 162.7 168 176 168zM256 144C256 176.8 236.3 205 208 217.3L208 288L384 288C410.5 288 432 266.5 432 240L432 217.3C403.7 205 384 176.8 384 144C384 99.8 419.8 64 464 64C508.2 64 544 99.8 544 144C544 176.8 524.3 205 496 217.3L496 240C496 301.9 445.9 352 384 352L208 352L208 422.7C236.3 435 256 463.2 256 496C256 540.2 220.2 576 176 576C131.8 576 96 540.2 96 496C96 463.2 115.7 435 144 422.7L144 217.4C115.7 205 96 176.8 96 144C96 99.8 131.8 64 176 64C220.2 64 256 99.8 256 144zM488 144C488 130.7 477.3 120 464 120C450.7 120 440 130.7 440 144C440 157.3 450.7 168 464 168C477.3 168 488 157.3 488 144zM176 520C189.3 520 200 509.3 200 496C200 482.7 189.3 472 176 472C162.7 472 152 482.7 152 496C152 509.3 162.7 520 176 520z" }) })] }) }));
+};