remotion 4.0.484 → 4.0.486

package/LICENSE.md

@@ -0,0 +1,49 @@
+# 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 © 2026 [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/README.md

@@ -12,31 +12,21 @@
 [![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/remotion?minimal=true)
 <a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&color=black" alt="Twitter"></a>
 
-Remotion is a framework for **creating videos programmatically using React.**
-
-## Why create videos in React?
-
-- **Leverage web technologies**: Use all of CSS, Canvas, SVG, WebGL, etc.
-- **Leverage programming**: Use variables, functions, APIs, math and algorithms to create new effects
-- **Leverage React**: Reusable components, Powerful composition, Fast Refresh, Package ecosystem
-
-## Created with Remotion
-
-<table>
-<tr>
-<td align="center">
-<img style="width: 290px" src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/fireship-quick.gif" />
-<p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p>
-</td>
-<td align="center">
-<img style="width: 240px" src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/unwrapped-2023.gif" />
-<p>GitHub Unwrapped - Personalized Year in Review <a href="https://www.githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped">Source</a></p>
-</td>
-<td align="center">
-<em>View more in the <a href="https://remotion.dev/showcase">Remotion Showcase</a>!</em>
-</td>
-</tr>
-</table>
+Video tools for the agent era.
+
+## Video Creation
+
+- **Make videos agentically**: Turn your idea into a video using your coding agent.
+- **Make videos interactively**: Edit and animate using drag and drop.
+- **Make videos programmatically**: Connect to data, and manage complexity with code.
+
+React Code is the source of truth. Switch your workflow at any point.
+
+## Video Automation
+
+- **Design systems**: Create a library of animated assets for your organization.
+- **Batch rendering**: Render millions of videos on your own infrastructure.
+- **Applications**: Publish a simple tool or a complex video editor.
 
 ## Get started
 
@@ -48,6 +38,50 @@ npx create-video@latest
 
 to get started. Otherwise, read the [installation page](https://www.remotion.dev/docs/) in the documentation.
 
+## Discover Remotion
+
+Remotion is extensively documented over more than 1000 pages.
+
+- Get Started
+  - [Installation](https://remotion.dev/docs)
+  - [Agent Skills](https://www.remotion.dev/docs/ai/skills)
+  - [Prompts](https://www.remotion.dev/prompts)
+  - [Templates](https://remotion.dev/templates)
+- Components
+  - [Effects](https://remotion.dev/effects)
+  - [Shapes](https://remotion.dev/docs/shapes)
+  - [Transitions](https://remotion.dev/transitions)
+  - [Sound Effects](https://remotion.dev/docs/sfx)
+  - [Captions](https://remotion.dev/docs/captions)
+  - [Fonts](https://remotion.dev/docs/fonts)
+- Rendering
+  - [Node.js APIs](https://www.remotion.dev/docs/ssr)
+  - [Lambda](https://www.remotion.dev/docs/lambda)
+  - [Vercel](https://www.remotion.dev/docs/vercel-sandbox)
+  - [Client-side rendering](https://www.remotion.dev/docs/client-side-rendering/)
+  - [Comparison of options](https://remotion.dev/docs/compare-ssr)
+- Making apps
+  - [Player](https://remotion.dev/docs/player)
+  - [Editor Starter](https://remotion.dev/editor-starter)
+  - [Mediabunny](https://remotion.dev/docs/mediabunny)
+- Community
+  - [Discord](https://remotion.dev/discord)
+  - [Experts](https://remotion.dev/experts)
+  - [Resources](https://remotion.dev/resources)
+  - [Contributing](https://remotion.dev/contributing)
+  - Follow us on [X](https://x.com/remotion), [YouTube](https://youtube.com/@remotion_dev), [Instagram](https://instagram.com/remotion), [LinkedIn](https://linkedin.com/company/remotion)
+- Commercial
+  - [License](https://remotion.dev/license)
+  - [Store](https://remotion.pro/store)
+  - [About Remotion](https://remotion.dev/about)
+  - [Showcase](https://remotion.dev/showcase)
+- Help
+  - [Support](https://remotion.dev/support)
+  - [Discord](https://remotion.dev/discord)
+  - [Search](https://remotion.dev/search)
+  - [Ask AI](https://remotion.dev/ai)
+  - [GitHub Issues](https://remotion.dev/issues)
+
 ## Documentation
 
 Documentation: [**remotion.dev/docs**](https://www.remotion.dev/docs)  

package/dist/cjs/Folder.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { NonceHistory } from './nonce.js';
 export type TFolder = {
     name: string;
@@ -13,6 +13,6 @@ type FolderContextType = {
 export declare const FolderContext: import("react").Context<FolderContextType>;
 export declare const Folder: FC<{
     readonly name: string;
-    readonly children: React.ReactNode;
+    readonly children?: ReactNode;
 }>;
 export {};

package/dist/cjs/Interactive.d.ts

@@ -94,6 +94,12 @@ export declare const Interactive: {
             readonly default: undefined;
             readonly description: "Color";
         };
+        readonly 'style.fontFamily': {
+            readonly type: "font-family";
+            readonly default: undefined;
+            readonly description: "Font family";
+            readonly keyframable: false;
+        };
         readonly 'style.fontSize': {
             readonly type: "number";
             readonly default: undefined;

package/dist/cjs/Interactive.js

@@ -44,6 +44,7 @@ const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.textSchema,
+    ...interactivity_schema_js_1.textContentSchema,
 };
 const setRef = (ref, value) => {
     if (typeof ref === 'function') {

package/dist/cjs/ResolveCompositionConfig.d.ts

@@ -5,6 +5,7 @@ export declare const ResolveCompositionContext: import("react").Context<ResolveC
 export declare const resolveCompositionsRef: import("react").RefObject<{
     setCurrentRenderModalComposition: (compositionId: string | null) => void;
     reloadCurrentlySelectedComposition: () => void;
+    resolveComposition: (compositionId: string) => Promise<VideoConfig>;
 } | null>;
 type VideoConfigState = {
     type: 'loading';

package/dist/cjs/canvas-image/CanvasImage.js

@@ -86,6 +86,14 @@ const loadImage = ({ src, signal, }) => {
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
+const waitForNextFrame = ({ onFrame, }) => {
+    if (typeof requestAnimationFrame === 'undefined') {
+        onFrame();
+        return () => undefined;
+    }
+    const frame = requestAnimationFrame(onFrame);
+    return () => cancelAnimationFrame(frame);
+};
 const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
     var _a;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
@@ -99,6 +107,17 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
     });
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const pendingLoadDelayRef = (0, react_1.useRef)(null);
+    const continuePendingLoadDelay = (0, react_1.useCallback)(() => {
+        const pending = pendingLoadDelayRef.current;
+        if (!pending || pending.continued) {
+            return;
+        }
+        pending.continued = true;
+        pending.unblock();
+        continueRender(pending.handle);
+        pendingLoadDelayRef.current = null;
+    }, [continueRender]);
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
             return null;
@@ -117,7 +136,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             ref.current = canvas;
         }
     }, [ref, refForOutline]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
         const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
@@ -129,17 +148,13 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             : () => undefined;
         const controller = new AbortController();
         let cancelled = false;
-        let continued = false;
         let errorCount = 0;
         let timeoutId = null;
         setLoadedImage(null);
-        const continueRenderOnce = () => {
-            if (continued) {
-                return;
-            }
-            continued = true;
-            unblock();
-            continueRender(handle);
+        pendingLoadDelayRef.current = {
+            handle,
+            unblock,
+            continued: false,
         };
         const attemptLoad = () => {
             loadImage({ src: actualSrc, signal: controller.signal })
@@ -148,15 +163,10 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                     return;
                 }
                 setLoadedImage(image);
-            })
-                .then(() => {
-                if (!cancelled) {
-                    continueRenderOnce();
-                }
             })
                 .catch((err) => {
                 if (err.name === 'AbortError') {
-                    continueRenderOnce();
+                    continuePendingLoadDelay();
                     return;
                 }
                 errorCount++;
@@ -172,7 +182,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 }
                 else if (onError) {
                     onError(err);
-                    continueRenderOnce();
+                    continuePendingLoadDelay();
                 }
                 else {
                     cancelRender(err);
@@ -186,12 +196,12 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 clearTimeout(timeoutId);
             }
             controller.abort();
-            continueRenderOnce();
+            continuePendingLoadDelay();
         };
     }, [
         actualSrc,
         cancelRender,
-        continueRender,
+        continuePendingLoadDelay,
         delayPlayback,
         delayRender,
         delayRenderRetries,
@@ -202,13 +212,14 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!loadedImage || !outputCanvas || !sourceCanvas) {
             return;
         }
         const handle = delayRender(`Applying effects to <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`);
         let cancelled = false;
         let continued = false;
+        let cancelWaitForNextFrame = () => undefined;
         const continueRenderOnce = () => {
             if (continued) {
                 return;
@@ -244,7 +255,15 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         })
             .then((completed) => {
             if (completed && !cancelled) {
-                continueRenderOnce();
+                cancelWaitForNextFrame = waitForNextFrame({
+                    onFrame: () => {
+                        if (cancelled) {
+                            return;
+                        }
+                        continueRenderOnce();
+                        continuePendingLoadDelay();
+                    },
+                });
             }
         })
             .catch((err) => {
@@ -254,6 +273,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             if (onError) {
                 onError(err);
                 continueRenderOnce();
+                continuePendingLoadDelay();
             }
             else {
                 cancelRender(err);
@@ -261,6 +281,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         });
         return () => {
             cancelled = true;
+            cancelWaitForNextFrame();
             continueRenderOnce();
         };
     }, [
@@ -268,6 +289,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         cancelRender,
         chainState,
         continueRender,
+        continuePendingLoadDelay,
         delayRender,
         fit,
         height,

package/dist/cjs/get-timeline-duration.js

@@ -13,7 +13,7 @@ const getTimelineDuration = ({ compositionDurationInFrames, playbackRate, trimBe
         trimAfter,
     });
     if (parentSequenceDurationInFrames !== null) {
-        const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+        const cappedDuration = Math.min(parentSequenceDurationInFrames, mediaDuration);
         return Number(cappedDuration.toFixed(10));
     }
     return mediaDuration;

package/dist/cjs/interactivity-schema.d.ts

@@ -82,6 +82,18 @@ export type ColorFieldSchema = {
     description?: string;
     keyframable?: boolean;
 };
+export type TextContentFieldSchema = {
+    type: 'text-content';
+    default: string;
+    description?: string;
+    keyframable?: false;
+};
+export type FontFamilyFieldSchema = {
+    type: 'font-family';
+    default: string | undefined;
+    description?: string;
+    keyframable?: false;
+};
 export type EnumFieldSchema = {
     type: 'enum';
     default: string;
@@ -111,7 +123,7 @@ export type ArrayFieldSchema = {
     description?: string;
     keyframable?: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | ArrayFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;
@@ -195,6 +207,12 @@ export declare const textSchema: {
         readonly default: undefined;
         readonly description: "Color";
     };
+    readonly 'style.fontFamily': {
+        readonly type: "font-family";
+        readonly default: undefined;
+        readonly description: "Font family";
+        readonly keyframable: false;
+    };
     readonly 'style.fontSize': {
         readonly type: "number";
         readonly default: undefined;
@@ -260,6 +278,14 @@ export declare const textSchema: {
         readonly hiddenFromList: false;
     };
 };
+export declare const textContentSchema: {
+    readonly children: {
+        readonly type: "text-content";
+        readonly default: "";
+        readonly description: "Text";
+        readonly keyframable: false;
+    };
+};
 export declare const premountSchema: {
     readonly premountFor: {
         readonly type: "number";

package/dist/cjs/interactivity-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
 exports.transformSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -44,6 +44,12 @@ exports.textSchema = {
         default: undefined,
         description: 'Color',
     },
+    'style.fontFamily': {
+        type: 'font-family',
+        default: undefined,
+        description: 'Font family',
+        keyframable: false,
+    },
     'style.fontSize': {
         type: 'number',
         default: undefined,
@@ -109,6 +115,14 @@ exports.textSchema = {
         hiddenFromList: false,
     },
 };
+exports.textContentSchema = {
+    children: {
+        type: 'text-content',
+        default: '',
+        description: 'Text',
+        keyframable: false,
+    },
+};
 exports.premountSchema = {
     premountFor: {
         type: 'number',

package/dist/cjs/internals.d.ts

@@ -327,6 +327,12 @@ export declare const Internals: {
             readonly default: undefined;
             readonly description: "Color";
         };
+        readonly 'style.fontFamily': {
+            readonly type: "font-family";
+            readonly default: undefined;
+            readonly description: "Font family";
+            readonly keyframable: false;
+        };
         readonly 'style.fontSize': {
             readonly type: "number";
             readonly default: undefined;
@@ -659,6 +665,7 @@ export declare const Internals: {
     readonly resolveCompositionsRef: import("react").RefObject<{
         setCurrentRenderModalComposition: (compositionId: string | null) => void;
         reloadCurrentlySelectedComposition: () => void;
+        resolveComposition: (compositionId: string) => Promise<import("./video-config.js").VideoConfig>;
     } | null>;
     readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
     readonly RenderAssetManager: import("react").Context<import("./RenderAssetManager.js").RenderAssetManagerContext>;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.484";
+export declare const VERSION = "4.0.486";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.484';
+exports.VERSION = '4.0.486';

package/dist/cjs/with-interactivity-schema.d.ts

@@ -2,9 +2,15 @@ import React from 'react';
 import type { SequenceControls } from './CompositionManager.js';
 import { type InteractivitySchema } from './interactivity-schema.js';
 export declare const getNestedValue: (obj: Record<string, unknown>, key: string) => unknown;
-export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
+export declare const getRuntimeValueForSchemaKey: ({ flatSchema, key, props, }: {
+    flatSchema: InteractivitySchema;
+    key: string;
+    props: Record<string, unknown>;
+}) => unknown;
+export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[], flatSchema?: InteractivitySchema | undefined) => Record<string, unknown>;
 export declare const selectActiveKeys: (schema: InteractivitySchema, values: Record<string, unknown>) => string[];
-export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, propsToDelete, }: {
+export declare const mergeValues: ({ flatSchema, props, valuesDotNotation, schemaKeys, propsToDelete, }: {
+    flatSchema: InteractivitySchema;
     props: Record<string, unknown>;
     valuesDotNotation: Record<string, unknown>;
     schemaKeys: string[];

package/dist/cjs/with-interactivity-schema.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withInteractivitySchema = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getNestedValue = void 0;
+exports.withInteractivitySchema = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getRuntimeValueForSchemaKey = exports.getNestedValue = void 0;
 const react_1 = __importStar(require("react"));
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
@@ -57,10 +57,21 @@ const getNestedValue = (obj, key) => {
     return current;
 };
 exports.getNestedValue = getNestedValue;
-const readValuesFromProps = (props, keys) => {
+const getRuntimeValueForSchemaKey = ({ flatSchema, key, props, }) => {
+    var _a;
+    const value = (0, exports.getNestedValue)(props, key);
+    if (((_a = flatSchema[key]) === null || _a === void 0 ? void 0 : _a.type) === 'text-content' && typeof value !== 'string') {
+        return undefined;
+    }
+    return value;
+};
+exports.getRuntimeValueForSchemaKey = getRuntimeValueForSchemaKey;
+const readValuesFromProps = (props, keys, flatSchema) => {
     const out = {};
     for (const key of keys) {
-        out[key] = (0, exports.getNestedValue)(props, key);
+        out[key] = flatSchema
+            ? (0, exports.getRuntimeValueForSchemaKey)({ flatSchema, key, props })
+            : (0, exports.getNestedValue)(props, key);
     }
     return out;
 };
@@ -69,10 +80,14 @@ const selectActiveKeys = (schema, values) => {
     return Object.keys((0, flatten_schema_js_1.flattenActiveSchema)(schema, (key) => values[key]));
 };
 exports.selectActiveKeys = selectActiveKeys;
-const mergeValues = ({ props, valuesDotNotation, schemaKeys, propsToDelete, }) => {
+const mergeValues = ({ flatSchema, props, valuesDotNotation, schemaKeys, propsToDelete, }) => {
+    var _a;
     const merged = { ...props };
     for (const key of schemaKeys) {
         const value = valuesDotNotation[key];
+        if (((_a = flatSchema[key]) === null || _a === void 0 ? void 0 : _a.type) === 'text-content' && value === undefined) {
+            continue;
+        }
         const parts = key.split('.');
         if (parts.length === 1) {
             merged[key] = value;
@@ -93,7 +108,12 @@ const mergeValues = ({ props, valuesDotNotation, schemaKeys, propsToDelete, }) =
         }
         current[parts[parts.length - 1]] = value;
     }
-    (0, delete_nested_key_js_1.deleteNestedKey)(merged, propsToDelete);
+    const propsToDeleteWithoutTextContent = new Set([...propsToDelete].filter((key) => {
+        var _a;
+        return !(((_a = flatSchema[key]) === null || _a === void 0 ? void 0 : _a.type) === 'text-content' &&
+            valuesDotNotation[key] === undefined);
+    }));
+    (0, delete_nested_key_js_1.deleteNestedKey)(merged, propsToDeleteWithoutTextContent);
     return merged;
 };
 exports.mergeValues = mergeValues;
@@ -148,9 +168,13 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         // memoized on the leaf values so the object reference is stable
         // when nothing changed — otherwise downstream `useMemo`s churn and
         // effects (e.g. Sequence registration) re-fire every render.
-        const runtimeValues = flatKeys.map((k) => (0, exports.getNestedValue)(props, k));
+        const runtimeValues = flatKeys.map((key) => (0, exports.getRuntimeValueForSchemaKey)({
+            flatSchema,
+            key,
+            props: props,
+        }));
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const currentRuntimeValueDotNotation = (0, react_1.useMemo)(() => (0, exports.readValuesFromProps)(props, flatKeys), 
+        const currentRuntimeValueDotNotation = (0, react_1.useMemo)(() => (0, exports.readValuesFromProps)(props, flatKeys, flatSchema), 
         // eslint-disable-next-line react-hooks/exhaustive-deps
         runtimeValues);
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -187,6 +211,7 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const activeKeys = (0, exports.selectActiveKeys)(schemaWithSequenceName, valuesDotNotation);
         // 5. Apply the active values back onto the props.
         const mergedProps = (0, exports.mergeValues)({
+            flatSchema,
             props: props,
             valuesDotNotation,
             schemaKeys: activeKeys,

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.484";
+var VERSION = "4.0.486";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1756,6 +1756,12 @@ var textSchema = {
     default: undefined,
     description: "Color"
   },
+  "style.fontFamily": {
+    type: "font-family",
+    default: undefined,
+    description: "Font family",
+    keyframable: false
+  },
   "style.fontSize": {
     type: "number",
     default: undefined,
@@ -1821,6 +1827,14 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -4246,10 +4260,21 @@ var getNestedValue = (obj, key) => {
   }
   return current;
 };
-var readValuesFromProps = (props, keys) => {
+var getRuntimeValueForSchemaKey = ({
+  flatSchema,
+  key,
+  props
+}) => {
+  const value = getNestedValue(props, key);
+  if (flatSchema[key]?.type === "text-content" && typeof value !== "string") {
+    return;
+  }
+  return value;
+};
+var readValuesFromProps = (props, keys, flatSchema) => {
   const out = {};
   for (const key of keys) {
-    out[key] = getNestedValue(props, key);
+    out[key] = flatSchema ? getRuntimeValueForSchemaKey({ flatSchema, key, props }) : getNestedValue(props, key);
   }
   return out;
 };
@@ -4257,6 +4282,7 @@ var selectActiveKeys = (schema, values) => {
   return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
 };
 var mergeValues = ({
+  flatSchema,
   props,
   valuesDotNotation,
   schemaKeys,
@@ -4265,6 +4291,9 @@ var mergeValues = ({
   const merged = { ...props };
   for (const key of schemaKeys) {
     const value = valuesDotNotation[key];
+    if (flatSchema[key]?.type === "text-content" && value === undefined) {
+      continue;
+    }
     const parts = key.split(".");
     if (parts.length === 1) {
       merged[key] = value;
@@ -4282,7 +4311,8 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
-  deleteNestedKey(merged, propsToDelete);
+  const propsToDeleteWithoutTextContent = new Set([...propsToDelete].filter((key) => !(flatSchema[key]?.type === "text-content" && valuesDotNotation[key] === undefined)));
+  deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
 var stackToOverrideMap = {};
@@ -4329,8 +4359,12 @@ var withInteractivitySchema = ({
       return newOverrideId;
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
-    const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
+      flatSchema,
+      key,
+      props
+    }));
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
     const controls = useMemo13(() => {
       return {
         schema: schemaWithSequenceName,
@@ -4358,6 +4392,7 @@ var withInteractivitySchema = ({
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
+      flatSchema,
       props,
       valuesDotNotation,
       schemaKeys: activeKeys,
@@ -7130,7 +7165,7 @@ var getTimelineDuration = ({
     trimAfter
   });
   if (parentSequenceDurationInFrames !== null) {
-    const cappedDuration = Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration);
+    const cappedDuration = Math.min(parentSequenceDurationInFrames, mediaDuration);
     return Number(cappedDuration.toFixed(10));
   }
   return mediaDuration;
@@ -9291,8 +9326,8 @@ import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
   useContext as useContext32,
-  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo31,
   useRef as useRef23,
   useState as useState16
@@ -9380,6 +9415,18 @@ var loadImage = ({
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
+var waitForNextFrame = ({
+  onFrame
+}) => {
+  if (typeof requestAnimationFrame === "undefined") {
+    onFrame();
+    return () => {
+      return;
+    };
+  }
+  const frame = requestAnimationFrame(onFrame);
+  return () => cancelAnimationFrame(frame);
+};
 var CanvasImageContent = forwardRef10(({
   src,
   width,
@@ -9409,6 +9456,17 @@ var CanvasImageContent = forwardRef10(({
     overrideId: controls?.overrideId ?? null
   });
   const sequenceContext = useContext32(SequenceContext);
+  const pendingLoadDelayRef = useRef23(null);
+  const continuePendingLoadDelay = useCallback17(() => {
+    const pending = pendingLoadDelayRef.current;
+    if (!pending || pending.continued) {
+      return;
+    }
+    pending.continued = true;
+    pending.unblock();
+    continueRender2(pending.handle);
+    pendingLoadDelayRef.current = null;
+  }, [continueRender2]);
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
@@ -9426,7 +9484,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -9438,17 +9496,13 @@ var CanvasImageContent = forwardRef10(({
     };
     const controller = new AbortController;
     let cancelled = false;
-    let continued = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
-    const continueRenderOnce = () => {
-      if (continued) {
-        return;
-      }
-      continued = true;
-      unblock();
-      continueRender2(handle);
+    pendingLoadDelayRef.current = {
+      handle,
+      unblock,
+      continued: false
     };
     const attemptLoad = () => {
       loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
@@ -9456,13 +9510,9 @@ var CanvasImageContent = forwardRef10(({
           return;
         }
         setLoadedImage(image);
-      }).then(() => {
-        if (!cancelled) {
-          continueRenderOnce();
-        }
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continueRenderOnce();
+          continuePendingLoadDelay();
           return;
         }
         errorCount++;
@@ -9476,7 +9526,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continueRenderOnce();
+          continuePendingLoadDelay();
         } else {
           cancelRender2(err);
         }
@@ -9489,12 +9539,12 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continueRenderOnce();
+      continuePendingLoadDelay();
     };
   }, [
     actualSrc,
     cancelRender2,
-    continueRender2,
+    continuePendingLoadDelay,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
@@ -9505,13 +9555,16 @@ var CanvasImageContent = forwardRef10(({
     sequenceContext?.postmounting,
     sequenceContext?.premounting
   ]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
     const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
     let cancelled = false;
     let continued = false;
+    let cancelWaitForNextFrame = () => {
+      return;
+    };
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -9546,7 +9599,15 @@ var CanvasImageContent = forwardRef10(({
       height: canvasHeight
     }).then((completed) => {
       if (completed && !cancelled) {
-        continueRenderOnce();
+        cancelWaitForNextFrame = waitForNextFrame({
+          onFrame: () => {
+            if (cancelled) {
+              return;
+            }
+            continueRenderOnce();
+            continuePendingLoadDelay();
+          }
+        });
       }
     }).catch((err) => {
       if (cancelled) {
@@ -9555,12 +9616,14 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
+        continuePendingLoadDelay();
       } else {
         cancelRender2(err);
       }
     });
     return () => {
       cancelled = true;
+      cancelWaitForNextFrame();
       continueRenderOnce();
     };
   }, [
@@ -9568,6 +9631,7 @@ var CanvasImageContent = forwardRef10(({
     cancelRender2,
     chainState,
     continueRender2,
+    continuePendingLoadDelay,
     delayRender2,
     fit,
     height,
@@ -9737,7 +9801,7 @@ var IFrameRefForwarding = ({
 };
 var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
-import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
@@ -9814,7 +9878,7 @@ var ImgContent = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -10084,7 +10148,8 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
-  ...textSchema
+  ...textSchema,
+  ...textContentSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -10783,8 +10848,8 @@ import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
   useContext as useContext36,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect11,
+  useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
@@ -10846,7 +10911,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -10903,7 +10968,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -11009,7 +11074,7 @@ import React37, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
@@ -11017,12 +11082,12 @@ import React37, {
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -11201,7 +11266,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11244,7 +11309,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11261,7 +11326,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -11951,9 +12016,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo39,
   useRef as useRef28
 } from "react";
@@ -12128,7 +12193,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -12172,7 +12237,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -12262,7 +12327,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect12(() => {
+    useLayoutEffect13(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.484";
+var VERSION = "4.0.486";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.484",
+	"version": "4.0.486",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -11,7 +11,7 @@
 	"scripts": {
 		"formatting": "oxfmt src --check",
 		"format": "oxfmt src",
-		"prepublishOnly": "bun ensure-correct-version.ts && cp ../../README.md .",
+		"prepublishOnly": "bun ensure-correct-version.ts && cp ../../README.md . && cp ../../LICENSE.md .",
 		"lint": "eslint src",
 		"test": "bun test src/test",
 		"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.484",
+		"@remotion/eslint-config-internal": "4.0.486",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},