[pull] main from remotion-dev:main

package.json

@@ -108,11 +108,12 @@
 			"@types/node": "20.12.14",
 			"@types/web": "0.0.166",
 			"@types/bun": "1.3.3",
-			"mediabunny": "1.42.0",
-			"@mediabunny/mp3-encoder": "1.42.0",
-			"@mediabunny/aac-encoder": "1.42.0",
-			"@mediabunny/flac-encoder": "1.42.0",
-			"@mediabunny/ac3": "1.42.0",
+			"mediabunny": "1.45.0",
+			"@mediabunny/server": "1.45.0",
+			"@mediabunny/mp3-encoder": "1.45.0",
+			"@mediabunny/aac-encoder": "1.45.0",
+			"@mediabunny/flac-encoder": "1.45.0",
+			"@mediabunny/ac3": "1.45.0",
 			"next": "16.2.6",
 			"three": "0.178.0",
 			"sharp": "0.34.5",

packages/animated-emoji/package.json

@@ -4,7 +4,6 @@
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
 	"module": "dist/esm/index.mjs",
-	"sideEffects": false,
 	"scripts": {
 		"formatting": "oxfmt src --check",
 		"format": "oxfmt src",

packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx

@@ -1,5 +1,11 @@
-import type {ExtrapolateType, InterpolateOptions} from 'remotion';
-import {interpolate, interpolateColors} from 'remotion';
+import {
+	assertValidInterpolateEasingOption,
+	interpolate,
+	interpolateColors,
+	type EasingFunction,
+	type ExtrapolateType,
+	type InterpolateOptions,
+} from 'remotion';
 import type {
 	CSSPropertiesKey,
 	CSSPropertiesValue,
@@ -8,6 +14,12 @@ import type {
 } from '../../type';
 import {breakDownValueIntoUnitNumberAndFunctions} from './utils';
 
+type InterpolateStylesResolvedOptions = {
+	easing: EasingFunction;
+	extrapolateLeft: ExtrapolateType;
+	extrapolateRight: ExtrapolateType;
+};
+
 const interpolatedPropertyPart = ({
 	inputValue,
 	inputRange,
@@ -23,7 +35,7 @@ const interpolatedPropertyPart = ({
 	finalStylePropertyPart: UnitNumberAndFunction;
 	initialStyleProperty: CSSPropertiesValue;
 	finalStyleProperty: CSSPropertiesValue;
-	options: Required<InterpolateOptions>;
+	options: InterpolateStylesResolvedOptions;
 }): string | number => {
 	if (finalStylePropertyPart === undefined) {
 		throw new TypeError(
@@ -129,7 +141,7 @@ const interpolateProperty = ({
 	inputRange: number[];
 	initialStyleProperty: CSSPropertiesValue;
 	finalStyleProperty: CSSPropertiesValue;
-	options: Required<InterpolateOptions>;
+	options: InterpolateStylesResolvedOptions;
 }) => {
 	if (
 		typeof initialStyleProperty !== typeof finalStyleProperty &&
@@ -180,7 +192,7 @@ const interpolateStylesFunction = ({
 	inputRange: number[];
 	initialStyle: Style;
 	finalStyle: Style;
-	options: Required<InterpolateOptions>;
+	options: InterpolateStylesResolvedOptions;
 }): Style => {
 	const [startingValue, endingValue] = inputRange;
 	return Object.keys(initialStyle).reduce((acc, key) => {
@@ -305,7 +317,15 @@ export const interpolateStyles = (
 	const initialStyle = outputStylesRange[startIndex];
 	const finalStyle = outputStylesRange[endIndex];
 
-	const easing = options?.easing ?? ((num: number): number => num);
+	assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+
+	const easingOption = options?.easing;
+	const segmentEasing: EasingFunction =
+		easingOption === undefined
+			? (num: number): number => num
+			: typeof easingOption === 'function'
+				? easingOption
+				: easingOption[startIndex];
 
 	const extrapolateLeft: ExtrapolateType = options?.extrapolateLeft ?? 'extend';
 	const extrapolateRight: ExtrapolateType =
@@ -317,7 +337,7 @@ export const interpolateStyles = (
 		initialStyle,
 		finalStyle,
 		options: {
-			easing,
+			easing: segmentEasing,
 			extrapolateLeft,
 			extrapolateRight,
 		},

packages/astro-example/package.json

@@ -23,7 +23,7 @@
 		"@remotion/three": "workspace:*",
 		"@remotion/transitions": "workspace:*",
 		"lottie-web": "5.13.0",
-		"astro": "6.1.6",
+		"astro": "6.1.10",
 		"react": "catalog:",
 		"react-dom": "catalog:",
 		"remotion": "workspace:*"

packages/bundler/package.json

@@ -6,7 +6,6 @@
 	"version": "4.0.461",
 	"description": "Bundle Remotion compositions using Webpack",
 	"main": "dist/index.js",
-	"sideEffects": false,
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},

packages/captions/package.json

@@ -6,7 +6,6 @@
 	"version": "4.0.461",
 	"description": "Primitives for dealing with captions",
 	"main": "dist/index.js",
-	"sideEffects": false,
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},

packages/cli/package.json

@@ -6,7 +6,6 @@
 	"version": "4.0.461",
 	"description": "Control Remotion features using the `npx remotion` command",
 	"main": "dist/index.js",
-	"sideEffects": false,
 	"bin": {
 		"remotion": "remotion-cli.js",
 		"remotionb": "remotionb-cli.js",

packages/cli/src/extra-packages.ts

@@ -1,9 +1,9 @@
 export const EXTRA_PACKAGES: Record<string, string> = {
-	mediabunny: '1.42.0',
-	'@mediabunny/ac3': '1.42.0',
-	'@mediabunny/mp3-encoder': '1.42.0',
-	'@mediabunny/aac-encoder': '1.42.0',
-	'@mediabunny/flac-encoder': '1.42.0',
+	mediabunny: '1.45.0',
+	'@mediabunny/ac3': '1.45.0',
+	'@mediabunny/mp3-encoder': '1.45.0',
+	'@mediabunny/aac-encoder': '1.45.0',
+	'@mediabunny/flac-encoder': '1.45.0',
 	zod: '4.3.6',
 };
 

packages/cloudrun/package.json

@@ -6,7 +6,6 @@
 	"version": "4.0.461",
 	"description": "Render Remotion videos on Google Cloud Run",
 	"main": "dist/index.js",
-	"sideEffects": false,
 	"scripts": {
 		"make": "tsgo -d && cp src/shared/sa-permissions.json dist/shared/sa-permissions.json",
 		"makeruntime": "bun build.ts",

packages/compositor/package.json

@@ -5,7 +5,6 @@
 	"name": "@remotion/compositor",
 	"version": "4.0.461",
 	"description": "Rust binary for Remotion",
-	"sideEffects": false,
 	"scripts": {
 		"build-all": "bun build.ts --all"
 	},

packages/convert/package.json

@@ -2,7 +2,6 @@
 	"name": "@remotion/convert",
 	"version": "4.0.461",
 	"private": true,
-	"sideEffects": false,
 	"type": "module",
 	"author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
 	"scripts": {

packages/core/src/effects/Solid.tsx

@@ -100,7 +100,6 @@ export const Solid: React.FC<SolidProps> = ({
 	}, [
 		frame,
 		color,
-		experimentalEffects,
 		outputCanvas,
 		sourceCanvas,
 		chainState,

packages/core/src/effects/create-effect.ts

@@ -0,0 +1,29 @@
+import type {EffectDefinition, EffectDescriptor} from './effect-types.js';
+
+type EffectFactory<P> = {} extends P
+	? (params?: P) => EffectDescriptor<unknown>
+	: (params: P) => EffectDescriptor<unknown>;
+
+// Defines an effect and returns a factory that produces per-frame descriptors.
+// The returned function is the public API effect authors expose to users:
+//
+//   export const blur = createEffect<BlurParams, BlurState>({ ... });
+//   // usage: blur({ radius: 4 })
+//
+// The descriptor erases `P` and `S` to `unknown` so descriptors of different
+// effects can be freely composed inside `EffectsProp` arrays. Without that
+// erasure the descriptor would be contravariant in `P` (via `apply`'s
+// argument) and concrete descriptors could not flow into `unknown` slots.
+export const createEffect = <P, S>(
+	definition: EffectDefinition<P, S>,
+): EffectFactory<P> => {
+	const widened = definition as unknown as EffectDefinition<unknown, unknown>;
+	const factory = (params: P = {} as P): EffectDescriptor<unknown> => ({
+		definition: widened,
+		params,
+		stack: new Error().stack!,
+		effectKey: widened.calculateKey(params),
+		memoized: false,
+	});
+	return factory as EffectFactory<P>;
+};

packages/core/src/effects/index.ts

@@ -1,4 +1,4 @@
-// Types needed outside core for `_experimentalEffects` / `@remotion/effects` typing.
+// Types needed outside core for `_experimentalEffects` / `@remotion/effects/*` typing.
 export type {
 	EffectDefinitionAndStack,
 	EffectDescriptor,

packages/core/src/index.ts

@@ -178,6 +178,7 @@ export {interpolateColors} from './interpolate-colors.js';
 export {LogLevel} from './log.js';
 export {Loop} from './loop/index.js';
 export {
+	assertValidInterpolateEasingOption,
 	EasingFunction,
 	ExtrapolateType,
 	interpolate,

packages/core/src/internals.ts

@@ -45,7 +45,7 @@ import {
 	EditorPropsProvider,
 	timeValueRef,
 } from './EditorProps.js';
-import {createDescriptor, defineEffect} from './effects/define-effect.js';
+import {createEffect} from './effects/create-effect.js';
 import {flattenEffects} from './effects/effect-internals.js';
 import {runEffectChain} from './effects/run-effect-chain.js';
 import {useEffectChainState} from './effects/use-effect-chain-state.js';
@@ -327,8 +327,7 @@ export const Internals = {
 	useEffectChainState,
 	runEffectChain,
 	useMemoizedEffects,
-	defineEffect,
-	createDescriptor,
+	createEffect,
 	computeEffectiveSchemaValuesDotNotation,
 	OverrideIdsToNodePathsGettersContext,
 	OverrideIdsToNodePathsSettersContext,

packages/core/src/interpolate.ts

@@ -10,16 +10,22 @@ export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 export type EasingFunction = (input: number) => number;
 
 export type InterpolateOptions = Partial<{
-	easing: EasingFunction;
+	easing: EasingFunction | readonly EasingFunction[];
 	extrapolateLeft: ExtrapolateType;
 	extrapolateRight: ExtrapolateType;
 }>;
 
+type InterpolateSegmentResolvedOptions = {
+	easing: EasingFunction;
+	extrapolateLeft: ExtrapolateType;
+	extrapolateRight: ExtrapolateType;
+};
+
 function interpolateFunction(
 	input: number,
 	inputRange: [number, number],
 	outputRange: [number, number],
-	options: Required<InterpolateOptions>,
+	options: InterpolateSegmentResolvedOptions,
 ): number {
 	const {extrapolateLeft, extrapolateRight, easing} = options;
 
@@ -114,6 +120,32 @@ function checkInfiniteRange(name: string, arr: readonly number[]) {
 	}
 }
 
+export function assertValidInterpolateEasingOption(
+	easing: EasingFunction | readonly EasingFunction[] | undefined,
+	inputRangeLength: number,
+) {
+	if (easing === undefined) {
+		return;
+	}
+
+	if (typeof easing === 'function') {
+		return;
+	}
+
+	const expectedLength = inputRangeLength - 1;
+	if (easing.length !== expectedLength) {
+		throw new Error(
+			`When easing is an array, it must have one entry per segment between keyframes (length inputRange.length - 1 = ${expectedLength}), but got length ${easing.length}`,
+		);
+	}
+
+	for (let i = 0; i < easing.length; i++) {
+		if (typeof easing[i] !== 'function') {
+			throw new Error(`easing[${i}] must be a function`);
+		}
+	}
+}
+
 /*
  * @description Allows you to map a range of values to another using a concise syntax.
  * @see [Documentation](https://remotion.dev/docs/interpolate)
@@ -151,7 +183,22 @@ export function interpolate(
 
 	checkValidInputRange(inputRange);
 
-	const easing = options?.easing ?? ((num: number): number => num);
+	assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+
+	const easingOption = options?.easing;
+	const defaultEasing = (num: number): number => num;
+	const resolveEasingForSegment = (segmentIndex: number): EasingFunction => {
+		if (easingOption === undefined) {
+			return defaultEasing;
+		}
+
+		if (typeof easingOption === 'function') {
+			return easingOption;
+		}
+
+		// `segmentIndex` is in [0, inputRange.length - 2]; array length was validated above.
+		return easingOption[segmentIndex] as EasingFunction;
+	};
 
 	let extrapolateLeft: ExtrapolateType = 'extend';
 	if (options?.extrapolateLeft !== undefined) {
@@ -173,7 +220,7 @@ export function interpolate(
 		[inputRange[range], inputRange[range + 1]],
 		[outputRange[range], outputRange[range + 1]],
 		{
-			easing,
+			easing: resolveEasingForSegment(range),
 			extrapolateLeft,
 			extrapolateRight,
 		},

packages/core/src/no-react.ts

@@ -6,6 +6,7 @@ export type {
 } from './CompositionManager';
 export {DownloadBehavior} from './download-behavior';
 export {
+	assertValidInterpolateEasingOption,
 	EasingFunction,
 	ExtrapolateType,
 	interpolate,