@remotion/promo-pages 4.0.489 → 4.0.490
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Homepage.js +291 -153
- package/dist/components/Homepage.js +5 -21
- package/dist/components/homepage/CommunityStatsItems.js +2 -2
- package/dist/components/homepage/Demo/DemoRender.d.ts +1 -1
- package/dist/components/homepage/Demo/DisplayedEmoji.js +5 -3
- package/dist/components/homepage/Demo/math.d.ts +1 -1
- package/dist/components/homepage/GitHubButton.js +1 -1
- package/dist/components/homepage/MakeVideosAgentically.d.ts +1 -0
- package/dist/components/homepage/MakeVideosAgentically.js +4 -6
- package/dist/components/homepage/MakeVideosInteractively.d.ts +2 -0
- package/dist/components/homepage/MakeVideosInteractively.js +3 -6
- package/dist/components/homepage/MakeVideosLinks.js +1 -1
- package/dist/components/homepage/MakeVideosProgrammatically.d.ts +2 -0
- package/dist/components/homepage/MakeVideosProgrammatically.js +2 -5
- package/dist/components/homepage/Pricing.d.ts +3 -1
- package/dist/components/homepage/Pricing.js +6 -2
- package/dist/components/homepage/WriteInReact.js +2 -1
- package/dist/components/team/TrustSection.js +1 -1
- package/dist/design.js +94 -48
- package/dist/experts.js +94 -37
- package/dist/homepage/Pricing.js +94 -48
- package/dist/prompts/PromptsGallery.js +94 -48
- package/dist/prompts/PromptsShow.js +94 -48
- package/dist/prompts/PromptsSubmit.js +94 -48
- package/dist/team.js +94 -48
- package/dist/template-modal-content.js +94 -48
- package/dist/templates.js +95 -48
- package/package.json +13 -13
- package/dist/components/homepage/CanvasSectionTitle.d.ts +0 -4
- package/dist/components/homepage/CanvasSectionTitle.js +0 -14
- package/dist/components/homepage/EditorStarterSection.d.ts +0 -3
- package/dist/components/homepage/EditorStarterSection.js +0 -8
|
@@ -1,36 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import AutomationsSection from './homepage/AutomationsSection';
|
|
3
4
|
import { BackgroundAnimation } from './homepage/BackgroundAnimation';
|
|
4
|
-
import { CanvasSectionTitle } from './homepage/CanvasSectionTitle';
|
|
5
5
|
import CommunityStats from './homepage/CommunityStats';
|
|
6
6
|
import { Demo } from './homepage/Demo';
|
|
7
7
|
import EvaluateRemotionSection from './homepage/EvaluateRemotion';
|
|
8
|
+
import { IfYouKnowReact } from './homepage/IfYouKnowReact';
|
|
8
9
|
import { ColorModeProvider } from './homepage/layout/use-color-mode';
|
|
9
|
-
import { MakeVideosAgentically } from './homepage/MakeVideosAgentically';
|
|
10
|
-
import { MakeVideosInteractively } from './homepage/MakeVideosInteractively';
|
|
11
|
-
import { MakeVideosProgrammatically } from './homepage/MakeVideosProgrammatically';
|
|
12
10
|
import { NewsletterButton } from './homepage/NewsletterButton';
|
|
11
|
+
import { ParameterizeAndEdit } from './homepage/ParameterizeAndEdit';
|
|
13
12
|
import { Pricing } from './homepage/Pricing';
|
|
13
|
+
import { RealMP4Videos } from './homepage/RealMp4Videos';
|
|
14
14
|
import TrustedByBanner from './homepage/TrustedByBanner';
|
|
15
15
|
import { BuiltWithRemotionShowcase } from './homepage/VideoAppsShowcase';
|
|
16
16
|
import { SectionTitle } from './homepage/VideoAppsTitle';
|
|
17
17
|
import { WriteInReact } from './homepage/WriteInReact';
|
|
18
|
-
const makeVideosRowClassName = 'flex flex-col lg:flex-row gap-10';
|
|
19
18
|
export const NewLanding = ({ colorMode, setColorMode }) => {
|
|
20
|
-
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", {}),
|
|
21
|
-
{ label: 'API Docs', href: '/docs/api' },
|
|
22
|
-
{ label: 'Resources', href: '/docs/api' },
|
|
23
|
-
] })] }), _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: [
|
|
24
|
-
{
|
|
25
|
-
label: 'Server-side rendering',
|
|
26
|
-
href: '/docs/compare-ssr',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
label: 'Client-side rendering',
|
|
30
|
-
href: '/docs/client-side-rendering',
|
|
31
|
-
},
|
|
32
|
-
] }), _jsx(MakeVideosInteractively, { title: "Applications", description: "Publish a simple tool or a complex video editor.", showVideo: false, links: [
|
|
33
|
-
{ label: 'Player', href: '/docs/player' },
|
|
34
|
-
{ label: 'Editor Starter', href: '/editor-starter' },
|
|
35
|
-
] })] }), _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", {})] })] }) }) }));
|
|
19
|
+
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", {})] })] }) }) }));
|
|
36
20
|
};
|
|
@@ -23,14 +23,14 @@ export const InstallsPerMonth = () => {
|
|
|
23
23
|
display: 'flex',
|
|
24
24
|
alignItems: 'center',
|
|
25
25
|
justifyContent: 'center',
|
|
26
|
-
}, children: [_jsx(StatItemContent, { content: "
|
|
26
|
+
}, 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" })] }));
|
|
27
27
|
};
|
|
28
28
|
export const PagesOfDocs = () => {
|
|
29
29
|
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" })] }));
|
|
30
30
|
};
|
|
31
31
|
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" })] }));
|
|
32
32
|
export const GitHubStars = () => {
|
|
33
|
-
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: "
|
|
33
|
+
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" })] }));
|
|
34
34
|
};
|
|
35
35
|
export const DiscordMembers = () => {
|
|
36
36
|
return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {
|
|
@@ -6,7 +6,7 @@ export const DisplayedEmoji = ({ emoji }) => {
|
|
|
6
6
|
const [data, setData] = useState(null);
|
|
7
7
|
const { durationInFrames, fps } = useVideoConfig();
|
|
8
8
|
const [browser, setBrowser] = useState(typeof document !== 'undefined');
|
|
9
|
-
const { delayRender, continueRender } = useDelayRender();
|
|
9
|
+
const { delayRender, continueRender, cancelRender } = useDelayRender();
|
|
10
10
|
const src = useMemo(() => {
|
|
11
11
|
if (emoji === 'melting') {
|
|
12
12
|
return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
|
|
@@ -31,8 +31,10 @@ export const DisplayedEmoji = ({ emoji }) => {
|
|
|
31
31
|
});
|
|
32
32
|
continueRender(handle);
|
|
33
33
|
})
|
|
34
|
-
.catch(() =>
|
|
35
|
-
|
|
34
|
+
.catch((err) => {
|
|
35
|
+
cancelRender(err);
|
|
36
|
+
});
|
|
37
|
+
}, [handle, src, continueRender, cancelRender]);
|
|
36
38
|
useEffect(() => {
|
|
37
39
|
if (typeof document !== 'undefined') {
|
|
38
40
|
setBrowser(true);
|
|
@@ -7,4 +7,4 @@ export declare const cardHeight: number;
|
|
|
7
7
|
export declare const cardWidth: number;
|
|
8
8
|
export declare const getPositionForIndex: (index: number) => Position;
|
|
9
9
|
export declare const getInitialPositions: () => Position[];
|
|
10
|
-
export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 |
|
|
10
|
+
export declare const getIndexFromPosition: (clientX: number, clientY: number) => 0 | 2 | 3 | 1 | undefined;
|
|
@@ -3,5 +3,5 @@ const GithubIcon = () => {
|
|
|
3
3
|
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" }) }));
|
|
4
4
|
};
|
|
5
5
|
export const GithubButton = () => {
|
|
6
|
-
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: '
|
|
6
|
+
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' })] }));
|
|
7
7
|
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
3
|
import { MakeVideosLinks } from './MakeVideosLinks';
|
|
4
|
-
export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-
|
|
4
|
+
export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " agentically"] })), description = 'Turn your idea into a video using your coding agent.', showLinks = true, links = [
|
|
5
5
|
{ label: 'Agent Skills', href: '/docs/ai/skills' },
|
|
6
6
|
{ label: 'Prompts', href: '/prompts' },
|
|
7
|
-
], showVideo = true, videoSrc = '/img/render-progress.webm', }) => {
|
|
7
|
+
], showVideo = true, videoSrc = '/img/render-progress.webm', fallbackVideoSrc = '/img/render-progress.mp4', }) => {
|
|
8
8
|
const ref = useRef(null);
|
|
9
9
|
const videoRef = useRef(null);
|
|
10
|
-
// eslint-disable-next-line no-warning-comments
|
|
11
|
-
// TODO: Add an opaque fallback for browsers that do not support transparent WebM.
|
|
12
10
|
useEffect(() => {
|
|
13
11
|
const { current } = ref;
|
|
14
12
|
if (!current) {
|
|
@@ -27,11 +25,11 @@ export const MakeVideosAgentically = ({ title = (_jsxs(_Fragment, { children: [_
|
|
|
27
25
|
observer.observe(current);
|
|
28
26
|
return () => observer.unobserve(current);
|
|
29
27
|
}, []);
|
|
30
|
-
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 ? (
|
|
28
|
+
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 ? (_jsxs("video", { ref: videoRef, muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", style: {
|
|
31
29
|
width: 400,
|
|
32
30
|
maxWidth: '100%',
|
|
33
31
|
maxHeight: '100%',
|
|
34
32
|
borderRadius: 7,
|
|
35
33
|
overflow: 'hidden',
|
|
36
|
-
}, 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] })] }));
|
|
34
|
+
}, className: "cursor-default! relative object-contain", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : 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] })] }));
|
|
37
35
|
};
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef } from 'react';
|
|
3
3
|
import { MakeVideosLinks } from './MakeVideosLinks';
|
|
4
|
-
export const MakeVideosInteractively = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-
|
|
4
|
+
export const MakeVideosInteractively = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", 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, videoSrc = '/img/editing-vp9-chrome.webm', fallbackVideoSrc = '/img/editing-safari.mp4', }) => {
|
|
5
5
|
const ref = useRef(null);
|
|
6
|
-
|
|
7
|
-
// TODO: Add an opaque fallback for browsers that do not support transparent WebM.
|
|
8
|
-
const videoSrc = '/img/editing-vp9-chrome.webm';
|
|
9
|
-
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: {
|
|
6
|
+
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 ? (_jsxs("video", { autoPlay: true, muted: true, playsInline: true, loop: true, preload: "metadata", style: {
|
|
10
7
|
width: 500,
|
|
11
8
|
maxWidth: '100%',
|
|
12
9
|
maxHeight: '100%',
|
|
13
10
|
borderRadius: 7,
|
|
14
11
|
overflow: 'hidden',
|
|
15
|
-
}, 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] })] }));
|
|
12
|
+
}, className: "object-contain", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : 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] })] }));
|
|
16
13
|
};
|
|
@@ -5,7 +5,7 @@ const icon = {
|
|
|
5
5
|
marginLeft: 10,
|
|
6
6
|
};
|
|
7
7
|
export const MakeVideosLinkItem = ({ href, label }) => {
|
|
8
|
-
return (_jsxs("a", { className: "no-underline text-
|
|
8
|
+
return (_jsxs("a", { className: "no-underline text-[var(--subtitle)] 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" }) })] }));
|
|
9
9
|
};
|
|
10
10
|
export const MakeVideosLinks = ({ links }) => {
|
|
11
11
|
if (links.length === 0) {
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MakeVideosLinks } from './MakeVideosLinks';
|
|
3
|
-
export const MakeVideosProgrammatically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-
|
|
4
|
-
|
|
5
|
-
// TODO: Add an opaque fallback for browsers that do not support transparent WebM.
|
|
6
|
-
const videoSrc = '/img/what-is-remotion.webm';
|
|
7
|
-
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] })] }));
|
|
3
|
+
export const MakeVideosProgrammatically = ({ title = (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--subtitle)]", children: "Make videos" }), _jsx("br", {}), " programmatically"] })), description = 'Connect data and manage complexity with code.', showLinks = true, links = [], showVideo = true, videoSrc = '/img/what-is-remotion.webm', fallbackVideoSrc = '/img/what-is-remotion.mp4', }) => {
|
|
4
|
+
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 ? (_jsxs("video", { muted: true, autoPlay: true, playsInline: true, loop: true, preload: "metadata", className: "relative max-h-full max-w-full cursor-default! object-contain lg:mb-0 lg:mt-0", children: [_jsx("source", { src: fallbackVideoSrc, type: "video/mp4" }), _jsx("source", { src: videoSrc, type: "video/webm" })] })) : 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] })] }));
|
|
8
5
|
};
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
2
3
|
import { CompanyPricing, EnterpriseLicense, FreePricing } from './FreePricing';
|
|
3
|
-
export const Pricing = () => {
|
|
4
|
+
export const Pricing = ({ faqHref = '/pricing#faq' }) => {
|
|
5
|
+
const faqLinkTarget = useMemo(() => {
|
|
6
|
+
return faqHref.startsWith('http') ? '_blank' : undefined;
|
|
7
|
+
}, [faqHref]);
|
|
4
8
|
return (_jsxs("div", { style: {
|
|
5
9
|
display: 'flex',
|
|
6
10
|
flexDirection: 'column',
|
|
@@ -11,5 +15,5 @@ export const Pricing = () => {
|
|
|
11
15
|
display: 'flex',
|
|
12
16
|
}, children: _jsxs("div", { style: {
|
|
13
17
|
fontFamily: 'GTPlanar',
|
|
14
|
-
}, children: ["See our", ' ', _jsx("a", { target:
|
|
18
|
+
}, 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."] }) })] }));
|
|
15
19
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ChooseTemplate } from './ChooseTemplate';
|
|
2
3
|
import { GetStarted } from './GetStartedStrip';
|
|
3
4
|
export const WriteInReact = () => {
|
|
4
5
|
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: {
|
|
5
6
|
textShadow: '0 5px 30px var(--background)',
|
|
6
7
|
}, children: "Make videos programmatically." }), _jsxs("p", { style: {
|
|
7
8
|
textShadow: '0 5px 30px var(--background)',
|
|
8
|
-
}, className: "font-medium text-center text-lg", children: ["
|
|
9
|
+
}, 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, {})] }));
|
|
9
10
|
};
|
|
@@ -55,5 +55,5 @@ const StarIcon = () => {
|
|
|
55
55
|
}, 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" }) }));
|
|
56
56
|
};
|
|
57
57
|
export const TrustSection = () => {
|
|
58
|
-
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: "
|
|
58
|
+
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." })] })] })] }));
|
|
59
59
|
};
|