@remotion/promo-pages 4.0.260 → 5.0.0-canary.3

package/dist/Homepage.js

@@ -834,7 +834,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     setNonce(context.getNonce);
   }, [context]);
   return nonce;
-}, exports_timeline_position_state, CompositionManager, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
+}, exports_timeline_position_state, CompositionManager, EditorPropsContext, editorPropsProviderRef, EditorPropsProvider = ({ children }) => {
   const [props, setProps] = React42.useState({});
   const updateProps = useCallback22(({
     defaultProps,
@@ -5509,7 +5509,6 @@ var init_esm = __esm(() => {
     }
   });
   editorPropsProviderRef = React42.createRef();
-  timeValueRef = React42.createRef();
   validCodecs = [
     "h264",
     "h265",
@@ -5820,8 +5819,7 @@ var init_esm = __esm(() => {
     Log,
     LogLevelContext,
     useLogLevel,
-    playbackLogging,
-    timeValueRef
+    playbackLogging
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);

package/package.json

@@ -1,49 +1,53 @@
 {
-  "name": "@remotion/promo-pages",
-  "version": "4.0.260",
-  "publishConfig": {
-    "access": "public"
-  },
-  "type": "module",
-  "dependencies": {
-    "hls.js": "1.5.19",
-    "polished": "4.3.1",
-    "vite": "^5.4.12",
-    "zod": "3.22.3",
-    "@remotion/animated-emoji": "4.0.260",
-    "@remotion/lambda": "4.0.260",
-    "@remotion/lottie": "4.0.260",
-    "@remotion/paths": "4.0.260",
-    "@remotion/player": "4.0.260",
-    "@remotion/shapes": "4.0.260",
-    "create-video": "4.0.260",
-    "remotion": "4.0.260"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@types/react": "19.0.0",
-    "@types/react-dom": "19.0.0",
-    "eslint": "9.19.0",
-    "eslint-config-next": "15.0.4",
-    "plyr": "^3.7.3",
-    "postcss": "8.4.47",
-    "tailwindcss": "4.0.0",
-    "@tailwindcss/cli": "4.0.0",
-    "@tailwindcss/vite": "4.0.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "tailwind-merge": "2.5.2",
-    "bun-plugin-tailwind": "0.0.13",
-    "clsx": "2.1.1",
-    "@remotion/eslint-config-internal": "4.0.260"
-  },
-  "repository": {
-    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"
-  },
-  "scripts": {
-    "make": "bun --env-file=../.env.bundle bundle.ts",
-    "lint": "tsc && eslint src",
-    "dev": "vite"
-  }
-}
+	"name": "@remotion/promo-pages",
+	"version": "5.0.0-canary.3",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"make": "bun --env-file=../.env.bundle bundle.ts",
+		"lint": "tsc && eslint src",
+		"dev": "vite"
+	},
+	"files": [
+		"dist"
+	],
+	"type": "module",
+	"dependencies": {
+		"@remotion/animated-emoji": "4.0.259",
+		"@remotion/lambda": "4.0.259",
+		"@remotion/lottie": "4.0.259",
+		"@remotion/paths": "4.0.259",
+		"@remotion/player": "4.0.259",
+		"@remotion/shapes": "4.0.259",
+		"create-video": "4.0.259",
+		"hls.js": "1.5.19",
+		"polished": "4.3.1",
+		"remotion": "4.0.259",
+		"vite": "^5.4.12",
+		"zod": "3.22.3"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "4.0.259",
+		"@eslint/eslintrc": "3.1.0",
+		"@types/react": "19.0.0",
+		"@types/react-dom": "19.0.0",
+		"eslint": "9.14.0",
+		"eslint-config-next": "15.0.4",
+		"plyr": "^3.7.3",
+		"postcss": "8.4.47",
+		"tailwindcss": "4.0.0",
+		"@tailwindcss/cli": "4.0.0",
+		"@tailwindcss/vite": "4.0.0",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
+		"tailwindcss-scoped-preflight": "3.4.10",
+		"@vitejs/plugin-react-swc": "^3.5.0",
+		"tailwind-merge": "2.5.2",
+		"bun-plugin-tailwind": "0.0.13",
+		"clsx": "2.1.1"
+	},
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/promo-pages"
+	}
+}

package/.turbo/turbo-lint.log

@@ -1,5 +0,0 @@
-
-
-> @remotion/promo-pages@4.0.259 lint /Users/jonathanburger/remotion/packages/promo-pages
-> tsc && eslint src
-

package/.turbo/turbo-make.log

@@ -1,8 +0,0 @@
-
-
-> @remotion/promo-pages@4.0.259 make /Users/jonathanburger/remotion/packages/promo-pages
-> bun --env-file=../.env.bundle bundle.ts
-
-≈ tailwindcss v4.0.0
-
-Done in 65ms

package/LICENSE.md

@@ -1,49 +0,0 @@
-# Remotion License
-
-In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
-
----
-
-Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
-
-- [Free license](#free-license)
-- [Company license](#company-license)
-
-## Free license
-
-Copyright © 2025 [Remotion](https://www.remotion.dev)
-
-### Eligibility
-
-You are eligible to use Remotion for free if you are:
-
-- an individual
-- a for-profit organization with up to 3 employees
-- a non-profit or not-for-profit organization
-- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
-
-### Allowed use cases
-
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
-
-### Disallowed use cases
-
-It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
-
-### Warranty notice
-
-The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
-
-### Support
-
-Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
-
-## Company license
-
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
-
-Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
-
-### FAQs
-
-Are you not sure whether you need a company license because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

package/bundle.ts

@@ -1,46 +0,0 @@
-import {$} from 'bun';
-import {NoReactInternals} from 'remotion/no-react';
-
-if (process.env.NODE_ENV !== 'production') {
-	throw new Error('This script must be run using NODE_ENV=production');
-}
-
-const nodeVersion =
-	await $`node -e "console.log(typeof structuredClone)"`.text();
-if (nodeVersion.trim() === 'undefined') {
-	if (NoReactInternals.ENABLE_V5_BREAKING_CHANGES) {
-		throw new Error(
-			'Error: You are using Node.js without structuredClone. Please upgrade to Node.js 17 or newer.',
-		);
-	} else {
-		console.log(
-			'Node does not have structuredClone. Passing because we are not building the site.',
-		);
-		process.exit(0);
-	}
-}
-
-await $`bunx tailwindcss -i src/index.css -o dist/tailwind.css`;
-
-const result = await Bun.build({
-	entrypoints: [
-		'./src/components/Homepage.tsx',
-		'./src/components/homepage/Pricing.tsx',
-	],
-	format: 'esm',
-	external: [
-		'react',
-		'react/jsx-runtime',
-		'react-dom',
-		'lottie-web',
-		'hls.js',
-		'plyr',
-		'zod',
-	],
-});
-
-for (const output of result.outputs) {
-	await Bun.write('dist/' + output.path, await output.text());
-}
-
-export {};

package/eslint.config.mjs

@@ -1,7 +0,0 @@
-import {remotionFlatConfig} from '@remotion/eslint-config-internal';
-
-const config = remotionFlatConfig({react: true});
-
-export default {
-	...config,
-};

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Vite + React + TS</title>
-	</head>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="/src/main.tsx"></script>
-	</body>
-</html>

package/src/cn.ts

@@ -1,6 +0,0 @@
-import {clsx, type ClassValue} from 'clsx';
-import {twMerge} from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}

package/src/components/Homepage.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import React from 'react';
-import {BackgroundAnimation} from './homepage/BackgroundAnimation';
-import CommunityStats from './homepage/CommunityStats';
-import './homepage/custom.css';
-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 {NewsletterButton} from './homepage/NewsletterButton';
-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 {WriteInReact} from './homepage/WriteInReact';
-
-export const NewLanding: React.FC<{
-	readonly colorMode: ColorMode;
-	readonly setColorMode: (colorMode: ColorMode) => void;
-}> = ({colorMode, setColorMode}) => {
-	return (
-		<ColorModeProvider colorMode={colorMode} setColorMode={setColorMode}>
-			<div className="bg-[var(--background)] relative">
-				<div>
-					<div>
-						<BackgroundAnimation />
-					</div>
-					<br />
-					<br />
-					<br />
-					<br />
-					<div className="max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 relative">
-						<WriteInReact />
-						<br />
-						<IfYouKnowReact />
-						<br />
-						<br />
-						<br />
-						<br />
-						<br />
-						<br />
-						<RealMP4Videos />
-						<br />
-						<br />
-						<br />
-						<br />
-						<LightningFastEditor />
-						<br />
-						<br />
-						<br />
-						<VideoAppsTitle />
-						<VideoApps active="remotion" />
-						<br />
-						<br />
-						<VideoAppsShowcase />
-						<br />
-						<br />
-						<Demo />
-						<br />
-						<br />
-						<br />
-						<SectionTitle>Pricing</SectionTitle>
-						<Pricing />
-						<TrustedByBanner />
-						<br />
-						<EvaluateRemotionSection />
-						<br />
-						<br />
-						<br />
-						<CommunityStats />
-						<br />
-						<br />
-						<br />
-						<NewsletterButton />
-						<br />
-						<br />
-						<br />
-					</div>
-				</div>
-			</div>
-		</ColorModeProvider>
-	);
-};

package/src/components/homepage/BackgroundAnimation.tsx

@@ -1,108 +0,0 @@
-'use client';
-
-import {getLength} from '@remotion/paths';
-import React, {useEffect} from 'react';
-
-const rx = 0.2;
-const ry = 0.45;
-
-function ellipseToPath(cx: number, cy: number): string {
-	let output = 'M' + (cx - rx).toString() + ',' + cy.toString();
-	output +=
-		'a' +
-		rx.toString() +
-		',' +
-		ry.toString() +
-		' 0 1,0 ' +
-		(2 * rx).toString() +
-		',0';
-	output +=
-		'a' +
-		rx.toString() +
-		',' +
-		ry.toString() +
-		' 0 1,0 ' +
-		(-2 * rx).toString() +
-		',0';
-	return output;
-}
-
-const strokeWidth = 0.035;
-
-export const BackgroundAnimation: React.FC = () => {
-	const d = ellipseToPath(0.5, 0.5);
-	const length = getLength(d);
-
-	const css = `
-    @keyframes bganimation {
-      from {
-        stroke-dashoffset: 0
-      }
-    
-      to {
-        stroke-dashoffset: ${length};
-      }
-    }  
-  `;
-
-	useEffect(() => {
-		const _style = document.createElement('style');
-		_style.innerHTML = css;
-		document.head.appendChild(_style);
-	}, [css]);
-
-	return (
-		<div className=" w-full h-full left-[50%] ml-[-50%] min-w-0 lg:m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none">
-			<svg
-				className="translate-y-[-30%] lg:translate-y-[-50%]"
-				viewBox="0 0 1 1"
-				style={{
-					width: '100%',
-					position: 'absolute',
-				}}
-			>
-				<path
-					d={d}
-					fill="none"
-					stroke="var(--ifm-color-primary)"
-					strokeLinecap="round"
-					className="stroke-[0.04] lg:stroke-[0.035]"
-					style={{
-						transformOrigin: 'center center',
-						transform: `rotate(120deg)`,
-						animation: `bganimation 20s linear infinite`,
-						strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-					}}
-				/>
-				<path
-					d={d}
-					fill="none"
-					stroke="var(--ifm-color-primary)"
-					strokeLinecap="round"
-					strokeWidth={strokeWidth}
-					className="stroke-[0.04] lg:stroke-[0.035]"
-					style={{
-						transformOrigin: 'center center',
-						transform: `rotate(0deg)`,
-						animation: `bganimation 20s linear infinite`,
-						strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-					}}
-				/>
-				<path
-					d={d}
-					fill="none"
-					stroke="var(--ifm-color-primary)"
-					strokeLinecap="round"
-					strokeWidth={strokeWidth}
-					className="stroke-[0.04] lg:stroke-[0.035]"
-					style={{
-						transformOrigin: 'center center',
-						transform: `rotate(240deg)`,
-						animation: `bganimation 20s linear infinite`,
-						strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-					}}
-				/>
-			</svg>
-		</div>
-	);
-};

package/src/components/homepage/ChooseTemplate.tsx

@@ -1,57 +0,0 @@
-import {CreateVideoInternals} from 'create-video';
-import React from 'react';
-
-import {IconForTemplate} from './IconForTemplate';
-import {MoreTemplatesButton} from './MoreTemplatesButton';
-import {TemplateIcon} from './TemplateIcon';
-
-export const ChooseTemplate: React.FC = () => {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			<div
-				style={{
-					position: 'relative',
-					textAlign: 'center',
-				}}
-			>
-				<div
-					className="no-scroll-bar"
-					style={{
-						backgroundColor: 'var(--background)',
-						display: 'inline-flex',
-						flexDirection: 'row',
-						justifyContent: 'space-around',
-						boxShadow: '0 0 4px 0px var(--ifm-color-emphasis-200)',
-						borderRadius: 50,
-						alignItems: 'center',
-						padding: 8,
-						width: '100%',
-						maxWidth: '550px',
-					}}
-				>
-					{CreateVideoInternals.FEATURED_TEMPLATES.filter(
-						(f) => f.featuredOnHomePage,
-					).map((template) => {
-						return (
-							<a
-								key={template.cliId}
-								className="text-inherit no-underline"
-								href={`/templates/${template.cliId}`}
-							>
-								<TemplateIcon label={template.featuredOnHomePage!}>
-									<IconForTemplate scale={0.7} template={template} />
-								</TemplateIcon>
-							</a>
-						);
-					})}
-					<MoreTemplatesButton />
-				</div>
-			</div>
-		</div>
-	);
-};