remotion 4.0.484 → 4.0.485

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/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/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,12 @@ export type ColorFieldSchema = {
     description?: string;
     keyframable?: boolean;
 };
+export type TextContentFieldSchema = {
+    type: 'text-content';
+    default: string;
+    description?: string;
+    keyframable?: false;
+};
 export type EnumFieldSchema = {
     type: 'enum';
     default: string;
@@ -111,7 +117,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 | ArrayFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;
@@ -260,6 +266,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',
@@ -109,6 +109,14 @@ exports.textSchema = {
         hiddenFromList: false,
     },
 };
+exports.textContentSchema = {
+    children: {
+        type: 'text-content',
+        default: '',
+        description: 'Text',
+        keyframable: false,
+    },
+};
 exports.premountSchema = {
     premountFor: {
         type: 'number',

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.485";

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.485';

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.485";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1821,6 +1821,14 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
 var premountSchema = {
   premountFor: {
     type: "number",
@@ -4246,10 +4254,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 +4276,7 @@ var selectActiveKeys = (schema, values) => {
   return Object.keys(flattenActiveSchema(schema, (key) => values[key]));
 };
 var mergeValues = ({
+  flatSchema,
   props,
   valuesDotNotation,
   schemaKeys,
@@ -4265,6 +4285,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 +4305,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 +4353,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 +4386,7 @@ var withInteractivitySchema = ({
     ]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
+      flatSchema,
       props,
       valuesDotNotation,
       schemaKeys: activeKeys,
@@ -7130,7 +7159,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;
@@ -10084,7 +10113,8 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
-  ...textSchema
+  ...textSchema,
+  ...textContentSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.484";
+var VERSION = "4.0.485";
 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.485",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.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.485",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},