@remotion/promo-pages 4.0.315 → 4.0.318

package/src/components/Homepage.tsx

@@ -4,19 +4,18 @@ import React from 'react';
 import {BackgroundAnimation} from './homepage/BackgroundAnimation';
 import CommunityStats from './homepage/CommunityStats';
 import {Demo} from './homepage/Demo';
-import {LightningFastEditor} from './homepage/Editor';
 import EvaluateRemotionSection from './homepage/EvaluateRemotion';
 import {IfYouKnowReact} from './homepage/IfYouKnowReact';
 import type {ColorMode} from './homepage/layout/use-color-mode';
 import {ColorModeProvider} from './homepage/layout/use-color-mode';
 import {MoreVideoPowerSection} from './homepage/MoreVideoPowerSection';
 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 {VideoApps} from './homepage/VideoApps';
 import VideoAppsShowcase from './homepage/VideoAppsShowcase';
-import {SectionTitle, VideoAppsTitle} from './homepage/VideoAppsTitle';
+import {SectionTitle} from './homepage/VideoAppsTitle';
 import {WriteInReact} from './homepage/WriteInReact';
 
 export const NewLanding: React.FC<{
@@ -38,19 +37,11 @@ export const NewLanding: React.FC<{
 						<WriteInReact />
 						<br />
 						<IfYouKnowReact />
+						<ParameterizeAndEdit />
 						<RealMP4Videos />
 						<br />
 						<br />
 						<br />
-						<br />
-						<LightningFastEditor />
-						<br />
-						<br />
-						<br />
-						<VideoAppsTitle />
-						<VideoApps active="remotion" />
-						<br />
-						<br />
 						<VideoAppsShowcase />
 						<br />
 						<br />
@@ -70,7 +61,10 @@ export const NewLanding: React.FC<{
 						<br />
 						<br />
 						<br />
-						<SectionTitle>Even more video power to developers</SectionTitle>
+						<SectionTitle>Even more power to developers</SectionTitle>
+						<div className={'fontbrand text-center mb-10 -mt-4'}>
+							Innovative video products that you might enjoy.
+						</div>
 						<MoreVideoPowerSection />
 						<br />
 						<br />

package/src/components/homepage/CommunityStats.tsx

@@ -25,7 +25,7 @@ const SectionLink: React.FC<{
 const CommunityStats: React.FC = () => (
 	<div className={'m-auto max-w-[700px] text-center'}>
 		<SectionTitle>Never build alone</SectionTitle>
-		<div className={'fontbrand text-center mb-10'}>
+		<div className={'fontbrand text-center mb-10 -mt-4'}>
 			Join a thriving community of developers.
 		</div>
 		<div className={'flex flex-wrap justify-between gap-4 w-full items-center'}>

package/src/components/homepage/Counter.tsx

@@ -47,40 +47,50 @@ interface CounterProps {
 	readonly count: number;
 	readonly setCount: (count: number) => void;
 	readonly minCount?: number;
+	readonly step?: number;
 }
 
 export const Counter: React.FC<CounterProps> = ({
 	count,
 	setCount,
 	minCount = 0,
+	step = 1,
 }) => {
 	const decrement = () => {
 		if (count > minCount) {
-			setCount(count - 1);
+			setCount(Math.max(minCount, count - step));
 		}
 	};
 
 	const increment = () => {
-		setCount(count + 1);
+		setCount(count + step);
 	};
 
 	return (
-		<div style={container} className={cn('border-effect w-[110px] text-text')}>
+		<div style={container} className={cn('border-effect w-[140px] text-text')}>
 			<input
 				className={
-					'fontbrand text-2xl font-medium min-w-[60px] border-0 text-end bg-transparent outline-0 text-text'
+					'fontbrand text-2xl font-medium min-w-[80px] border-0 text-end bg-transparent outline-0 text-text'
 				}
 				type="number"
 				onClick={(e) => e.currentTarget.select()}
 				value={count}
 				onChange={(e: ChangeEvent<HTMLInputElement>) => {
 					if (e.target.value.trim() === '') {
-						setCount(1);
+						setCount(step === 1 ? 1 : minCount);
 						return;
 					}
 
-					const max = Math.max(parseInt(e.target.value, 10), 1);
-					setCount(max);
+					const inputValue = parseInt(e.target.value, 10);
+					const validValue = Math.max(inputValue, minCount);
+					
+					// For steps > 1, round to the nearest valid step
+					if (step > 1) {
+						const roundedValue = Math.round(validValue / step) * step;
+						setCount(Math.max(roundedValue, minCount));
+					} else {
+						setCount(validValue);
+					}
 				}}
 			/>
 			<div className="flex flex-col ml-3 h-full">

package/src/components/homepage/Demo/DisplayedEmoji.tsx

@@ -1,6 +1,5 @@
 import type {EmojiName} from '@remotion/animated-emoji';
-import type {LottieAnimationData} from '@remotion/lottie';
-import {Lottie, getLottieMetadata} from '@remotion/lottie';
+import type {Lottie, LottieAnimationData} from '@remotion/lottie';
 import React, {useEffect, useMemo, useState} from 'react';
 import {
 	cancelRender,
@@ -20,6 +19,9 @@ export const DisplayedEmoji: React.FC<{
 }> = ({emoji}) => {
 	const [data, setData] = useState<Data | null>(null);
 	const {durationInFrames, fps} = useVideoConfig();
+	const [browser, setBrowser] = useState<boolean>(
+		typeof document !== 'undefined',
+	);
 
 	const src = useMemo(() => {
 		if (emoji === 'melting') {
@@ -40,8 +42,14 @@ export const DisplayedEmoji: React.FC<{
 	const [handle] = useState(() => delayRender());
 
 	useEffect(() => {
-		Promise.all([fetch(src).then((res) => res.json())])
-			.then(([json]) => {
+		Promise.all([
+			fetch(src).then((res) => res.json()),
+			import('@remotion/lottie').then(({Lottie, getLottieMetadata}) => ({
+				Lottie,
+				getLottieMetadata,
+			})),
+		])
+			.then(([json, {Lottie, getLottieMetadata}]) => {
 				setData({
 					Lottie,
 					duration: getLottieMetadata(json)?.durationInSeconds as number,
@@ -54,6 +62,16 @@ export const DisplayedEmoji: React.FC<{
 			});
 	}, [handle, src]);
 
+	useEffect(() => {
+		if (typeof document !== 'undefined') {
+			setBrowser(true);
+		}
+	}, []);
+
+	if (!browser) {
+		return null;
+	}
+
 	if (!data) {
 		return null;
 	}

package/src/components/homepage/FreePricing.tsx

@@ -65,7 +65,7 @@ const SmallPriceTag: React.FC<{
 	return (
 		<div
 			className={
-				'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0 ml-4'
+				'fontbrand text-2xl font-medium  w-auto min-w-[80px] text-right shrink-0'
 			}
 		>
 			{children}
@@ -137,10 +137,15 @@ const SEAT_PRICE = 25;
 const RENDER_UNIT_PRICE = 10;
 const WEBCODECS_UNIT_PRICE = 10;
 
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 4,
+};
+
 export const CompanyPricing: React.FC = () => {
 	const [devSeatCount, setDevSeatCount] = React.useState(1);
-	const [cloudUnitCount, setCloudUnitCount] = React.useState(1);
-	const [webcodecsUnits, setWebcodecsUnits] = React.useState(1);
+	const [cloudRenders, setCloudRenders] = React.useState(1000);
+	const [creations, setCreations] = React.useState(1000);
 
 	const formatPrice = useCallback((price: number) => {
 		const formatter = new Intl.NumberFormat('en-US', {
@@ -155,29 +160,15 @@ export const CompanyPricing: React.FC = () => {
 		return Math.max(
 			100,
 			devSeatCount * SEAT_PRICE +
-				cloudUnitCount * RENDER_UNIT_PRICE +
-				webcodecsUnits * WEBCODECS_UNIT_PRICE,
+				(cloudRenders / 1000) * RENDER_UNIT_PRICE +
+				(creations / 1000) * WEBCODECS_UNIT_PRICE,
 		);
-	}, [cloudUnitCount, devSeatCount, webcodecsUnits]);
+	}, [cloudRenders, devSeatCount, creations]);
 
 	const totalPriceString = useMemo(() => {
 		return formatPrice(totalPrice);
 	}, [formatPrice, totalPrice]);
 
-	const rendersPerMonth = useMemo(() => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(cloudUnitCount * 1000);
-	}, [cloudUnitCount]);
-
-	const conversionsPerMonth = useMemo(() => {
-		const formatter = new Intl.NumberFormat('en-US', {
-			maximumFractionDigits: 0,
-		});
-		return formatter.format(webcodecsUnits * 1000);
-	}, [webcodecsUnits]);
-
 	return (
 		<Container>
 			<Audience>For collaborations and companies of 4+ people</Audience>
@@ -189,80 +180,87 @@ export const CompanyPricing: React.FC = () => {
 				<InfoTooltip text="Credits for Mux.com. Applies only to new Mux customers." />
 			</PricingBulletPoint>
 			<div style={{height: 30}} />
-			<div className={'flex flex-row items-center'}>
+			<div className={'flex flex-col md:flex-row md:items-center'}>
 				<div style={textUnitWrapper}>
 					<div className={'fontbrand font-bold text-lg'}>Developer Seats</div>
 					<div className={'text-muted fontbrand text-sm'}>
 						Number of developers working with Remotion
 					</div>
 				</div>
-				<div style={{flex: 3}} />
-				<Counter count={devSeatCount} setCount={setDevSeatCount} minCount={1} />
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(SEAT_PRICE * devSeatCount)}
-				</SmallPriceTag>
+				<div style={{flex: 3}} className="hidden md:block" />
+				<div className="flex flex-row items-center justify-between mt-3 md:mt-0">
+					<Counter
+						count={devSeatCount}
+						setCount={setDevSeatCount}
+						minCount={1}
+					/>
+					<SmallPriceTag>
+						$
+						{new Intl.NumberFormat('en-US', {
+							maximumFractionDigits: 0,
+						}).format(SEAT_PRICE * devSeatCount)}
+					</SmallPriceTag>
+				</div>
 			</div>
 			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
+			<div className={'flex flex-col md:flex-row md:items-center'}>
 				<div style={textUnitWrapper}>
-					<div className={'fontbrand font-bold text-lg'}>
-						Cloud Rendering Units
-					</div>
+					<div className={'fontbrand font-bold text-lg'}>Server renders</div>
 					<div className={'text-muted fontbrand text-sm'}>
-						Allows for {rendersPerMonth}{' '}
 						<a
 							href="https://www.remotion.dev/docs/compare-ssr"
 							className="underline underline-offset-4 text-inherit"
 						>
-							self-hosted renders per month
-						</a>{' '}
-						each
+							Renders per month (self-hosted)
+						</a>
 					</div>
 				</div>
-				<div style={{flex: 3}} />
-				<Counter
-					count={cloudUnitCount}
-					setCount={setCloudUnitCount}
-					minCount={0}
-				/>
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(RENDER_UNIT_PRICE * cloudUnitCount)}
-				</SmallPriceTag>
+				<div style={{flex: 3}} className="hidden md:block" />
+				<div className="flex flex-row items-center justify-between mt-3 md:mt-0">
+					<Counter
+						count={cloudRenders}
+						setCount={setCloudRenders}
+						minCount={0}
+						step={1000}
+					/>
+					<SmallPriceTag>
+						$
+						{new Intl.NumberFormat('en-US', {
+							maximumFractionDigits: 0,
+						}).format((cloudRenders / 1000) * RENDER_UNIT_PRICE)}
+					</SmallPriceTag>
+				</div>
 			</div>
 			<div style={{height: 14}} />
-			<div className={'flex flex-row items-center'}>
+			<div className={'flex flex-col md:flex-row md:items-center'}>
 				<div style={textUnitWrapper}>
 					<div className={'fontbrand font-bold text-lg'}>
-						WebCodecs Creation Units
+						WebCodecs video creations
 					</div>
 					<div className={'text-muted fontbrand text-sm'}>
-						Allows for{' '}
 						<a
 							className="underline underline-offset-4 text-inherit"
 							href="https://remotion.dev/webcodecs"
 						>
-							{conversionsPerMonth} client-side video creations{' '}
+							Client-side video creations per month
 						</a>
 					</div>
 				</div>
-				<div style={{flex: 3}} />
-				<Counter
-					count={webcodecsUnits}
-					setCount={setWebcodecsUnits}
-					minCount={0}
-				/>
-				<SmallPriceTag>
-					$
-					{new Intl.NumberFormat('en-US', {
-						maximumFractionDigits: 0,
-					}).format(RENDER_UNIT_PRICE * webcodecsUnits)}
-				</SmallPriceTag>
+				<div style={{flex: 3}} className="hidden md:block" />
+				<div className="flex flex-row items-center justify-between mt-3 md:mt-0">
+					<Counter
+						count={creations}
+						setCount={setCreations}
+						minCount={0}
+						step={1000}
+					/>
+					<SmallPriceTag>
+						$
+						{new Intl.NumberFormat('en-US', {
+							maximumFractionDigits: 0,
+						}).format((creations / 1000) * WEBCODECS_UNIT_PRICE)}
+					</SmallPriceTag>
+				</div>
 			</div>
 			<div style={{height: 20}} />
 			<div className={'flex flex-row justify-end'}>
@@ -276,6 +274,31 @@ export const CompanyPricing: React.FC = () => {
 					</BottomInfo>
 				</div>
 			</div>
+			<div className={'flex flex-row justify-end mt-4'}>
+				<div
+					style={{
+						...textUnitWrapper,
+						alignItems: 'flex-end',
+					}}
+				>
+					<a
+						href="https://remotion.pro/dashboard"
+						className="font-brand text-brand flex flex-row items-center gap-1 no-underline"
+					>
+						Buy now{' '}
+						<svg
+							style={icon}
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+						>
+							<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"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
 		</Container>
 	);
 };

package/src/components/homepage/IconForTemplate.tsx

@@ -7,6 +7,7 @@ import {JSIcon} from '../icons/js';
 import {MusicIcon} from '../icons/music';
 import {NextIcon} from '../icons/next';
 import {OverlayIcon} from '../icons/overlay';
+import {Recorder} from '../icons/recorder';
 import {ReactRouterIcon} from '../icons/remix';
 import {SkiaIcon} from '../icons/skia';
 import {Stargazer} from '../icons/stargazer';
@@ -135,6 +136,10 @@ export const IconForTemplate: React.FC<{
 		return <OverlayIcon style={{height: scale * 42}} />;
 	}
 
+	if (template.cliId === 'recorder') {
+		return <Recorder style={{height: scale * 36}} />;
+	}
+
 	if (
 		template.cliId === 'next' ||
 		template.cliId === 'next-tailwind' ||

package/src/components/homepage/IfYouKnowReact.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {BlueButton} from './layout/Button';
 
 export const isWebkit = () => {
 	if (typeof window === 'undefined') {
@@ -14,6 +13,11 @@ export const isWebkit = () => {
 	return isSafariUserAgent || isChrome;
 };
 
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 10,
+};
+
 export const IfYouKnowReact: React.FC = () => {
 	const [vid, setVid] = useState('/img/compose.webm');
 
@@ -24,31 +28,39 @@ export const IfYouKnowReact: React.FC = () => {
 	}, []);
 
 	return (
-		<div className="flex flex-col lg:flex-row text-left lg:text-right justify-start lg:justify-end items-start lg:mb-0">
+		<div className="flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8">
 			<video
 				src={vid}
 				muted
 				autoPlay
 				playsInline
 				loop
-				className="w-[600px] h-[600px] cursor-default! relative lg:-translate-x-8 -mb-50 -mt-10 lg:mt-0 lg:mb-0"
+				className="w-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0"
 			/>
-			<div className="h-10 lg:flex-1" />
-			<div className="lg:text-right">
+			<div>
 				<h2 className="text-4xl fontbrand pt-20">
-					<span className="text-brand">Compose</span> your
-					<br />
-					video with code.
+					<span className="text-brand">Compose</span> with code
 				</h2>
-				<p className="leading-relaxed">
+				<p className="leading-relaxed font-brand">
 					Use React, a powerful frontend technology, to create sophisticated
 					videos with code.
 				</p>
-				<div className="h-7" />
-				<a className="no-underline inline-block" href="/docs/the-fundamentals">
-					<BlueButton size="sm" loading={false}>
-						Learn Remotion
-					</BlueButton>
+				<div className="h-4" />
+				<a
+					className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
+					href="/docs/the-fundamentals"
+				>
+					Learn Remotion{' '}
+					<svg
+						style={icon}
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 448 512"
+					>
+						<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"
+						/>
+					</svg>
 				</a>
 			</div>
 		</div>

package/src/components/homepage/NewsletterButton.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import {BlueButton} from './layout/Button';
 import {Spacer} from './Spacer';
+import {SectionTitle} from './VideoAppsTitle';
 
 export const NewsletterButton: React.FC<{}> = () => {
 	const [email, setEmail] = useState('');
@@ -45,17 +46,17 @@ export const NewsletterButton: React.FC<{}> = () => {
 			<div className="flex flex-col">
 				<div className={'w-full'}>
 					<div className={'flex flex-col flex-1'}>
-						<div className={'text-2xl font-bold fontbrand'}>Newsletter</div>
+						<SectionTitle>Newsletter</SectionTitle>
 						<form
 							onSubmit={handleSubmit}
 							style={{
 								width: '100%',
 							}}
 						>
-							<p className="leading-snug mt-1 text-muted fontbrand">
+							<div className={'fontbrand text-center mb-10 -mt-4'}>
 								Read about new features and noteworthy updates we have made on
-								Remotion once in a while.
-							</p>
+								Remotion once in a while.{' '}
+							</div>
 
 							<input
 								className="w-full dark:bg-[#121212] rounded-lg border-effect border-black outline-none px-3 py-3 fontbrand text-lg box-border focus:border-brand"

package/src/components/homepage/ParameterizeAndEdit.tsx

@@ -0,0 +1,89 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {isWebkit} from './IfYouKnowReact';
+
+const icon: React.CSSProperties = {
+	height: 16,
+	marginLeft: 10,
+};
+
+export const ParameterizeAndEdit: React.FC = () => {
+	const ref = useRef<HTMLDivElement>(null);
+	const [vid, setVid] = useState('/img/editing-vp9-chrome.webm');
+
+	useEffect(() => {
+		if (isWebkit()) {
+			setVid('/img/editing-safari.mp4');
+		}
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			className={
+				'flex flex-col lg:flex-row justify-start lg:justify-end items-start gap-6 mt-20 lg:mt-0'
+			}
+		>
+			<div>
+				<video
+					src={vid}
+					autoPlay
+					muted
+					playsInline
+					loop
+					style={{
+						width: 500,
+						maxWidth: '100%',
+						borderRadius: 7,
+						overflow: 'hidden',
+					}}
+				/>
+			</div>
+			<div style={{flex: 1}} className="font-brand pt-4">
+				<h2 className={'fontbrand text-4xl'}>
+					Edit <span className="text-brand">dynamically</span>
+				</h2>
+				<p className="leading-relaxed">
+					Parameterize your video by passing data.
+					<br />
+					Or embed it into your app and build an interface around it.
+				</p>
+				<div className="h-4" />
+				<div className="leading-6">
+					<a
+						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
+						href="/docs/studio"
+					>
+						Remotion Studio{' '}
+						<svg
+							style={icon}
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+						>
+							<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"
+							/>
+						</svg>
+					</a>
+					<br />
+					<a
+						className="no-underline text-brand font-brand font-bold inline-flex flex-row items-center"
+						href="/player"
+					>
+						Remotion Player{' '}
+						<svg
+							style={icon}
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 448 512"
+						>
+							<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"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
+		</div>
+	);
+};