@remotion/studio-shared 4.0.478 → 4.0.479

package/dist/api-requests.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
 import type { ComponentProp } from './component-drag-data';
 import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
@@ -227,7 +227,7 @@ export type SaveSequencePropEdit = {
     key: string;
     value: string;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type SaveSequencePropsRequest = {
     edits: SaveSequencePropEdit[];
@@ -254,7 +254,7 @@ type SaveEffectPropsRequestBase = {
     effectIndex: number;
     key: string;
     defaultValue: string | null;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type SaveEffectPropsRequest = (SaveEffectPropsRequestBase & {
@@ -327,7 +327,7 @@ export type DeleteSequenceKeyframe = {
     nodePath: SequencePropsSubscriptionKey;
     key: string;
     frame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type MoveSequenceKeyframe = {
     fileName: string;
@@ -335,7 +335,7 @@ export type MoveSequenceKeyframe = {
     key: string;
     fromFrame: number;
     toFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type AddSequenceKeyframeRequest = {
     fileName: string;
@@ -343,7 +343,7 @@ export type AddSequenceKeyframeRequest = {
     key: string;
     frame: number;
     value: string;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type AddSequenceKeyframeResponse = SaveSequencePropsResponse;
@@ -354,7 +354,7 @@ export type DeleteEffectKeyframe = {
     effectIndex: number;
     key: string;
     frame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type MoveEffectKeyframe = {
     fileName: string;
@@ -363,7 +363,7 @@ export type MoveEffectKeyframe = {
     key: string;
     fromFrame: number;
     toFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type DeleteKeyframesRequest = {
     sequenceKeyframes: DeleteSequenceKeyframe[];
@@ -388,7 +388,7 @@ export type AddEffectKeyframeRequest = {
     key: string;
     frame: number;
     value: string;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type AddEffectKeyframeResponse = SaveEffectPropsResponse;
@@ -418,7 +418,7 @@ export type UpdateSequenceKeyframeSettingsRequest = {
     nodePath: SequencePropsSubscriptionKey;
     key: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type UpdateSequenceKeyframeSettingsResponse = SaveSequencePropsResponse;
@@ -428,7 +428,7 @@ export type UpdateEffectKeyframeSettingsRequest = {
     effectIndex: number;
     key: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     clientId: string;
 };
 export type UpdateEffectKeyframeSettingsResponse = SaveEffectPropsResponse;

package/dist/easing-clipboard-data.d.ts

@@ -0,0 +1,18 @@
+import type { KeyframeEasing } from './keyframe-easing-presets';
+export type EasingClipboardData = {
+    readonly type: 'easing';
+    readonly version: 1;
+    readonly remotionClipboard: 'easing';
+    readonly easing: KeyframeEasing;
+};
+export type EasingClipboardDataParseResult = {
+    readonly status: 'valid';
+    readonly data: EasingClipboardData;
+} | {
+    readonly status: 'unsupported-version';
+    readonly version: unknown;
+} | {
+    readonly status: 'invalid';
+};
+export declare const parseEasingClipboardDataResult: (value: string) => EasingClipboardDataParseResult;
+export declare const parseEasingClipboardData: (value: string) => EasingClipboardData | null;

package/dist/easing-clipboard-data.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseEasingClipboardData = exports.parseEasingClipboardDataResult = void 0;
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isFiniteNumber = (value) => {
+    return typeof value === 'number' && Number.isFinite(value);
+};
+const isEasing = (value) => {
+    return (isRecord(value) &&
+        (value.type === 'linear' ||
+            (value.type === 'bezier' &&
+                isFiniteNumber(value.x1) &&
+                isFiniteNumber(value.y1) &&
+                isFiniteNumber(value.x2) &&
+                isFiniteNumber(value.y2)) ||
+            (value.type === 'spring' &&
+                isFiniteNumber(value.damping) &&
+                isFiniteNumber(value.mass) &&
+                isFiniteNumber(value.stiffness) &&
+                typeof value.overshootClamping === 'boolean')));
+};
+const parseEasingClipboardDataResult = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return { status: 'invalid' };
+        }
+        if (parsed.remotionClipboard !== 'easing') {
+            return { status: 'invalid' };
+        }
+        if (parsed.version !== 1) {
+            return {
+                status: 'unsupported-version',
+                version: parsed.version,
+            };
+        }
+        if (parsed.type !== 'easing' || !isEasing(parsed.easing)) {
+            return { status: 'invalid' };
+        }
+        return {
+            status: 'valid',
+            data: {
+                type: 'easing',
+                version: 1,
+                remotionClipboard: 'easing',
+                easing: parsed.easing,
+            },
+        };
+    }
+    catch (_a) {
+        return { status: 'invalid' };
+    }
+};
+exports.parseEasingClipboardDataResult = parseEasingClipboardDataResult;
+const parseEasingClipboardData = (value) => {
+    const result = (0, exports.parseEasingClipboardDataResult)(value);
+    if (result.status !== 'valid') {
+        return null;
+    }
+    return result.data;
+};
+exports.parseEasingClipboardData = parseEasingClipboardData;

package/dist/effect-catalog.d.ts

@@ -0,0 +1,19 @@
+import type { EffectDragData } from './effect-drag-data';
+export type EffectCatalogItem = {
+    readonly id: string;
+    readonly category: string;
+    readonly label: string;
+    readonly description: string;
+    readonly effect: EffectDragData['effect'];
+};
+export type EffectCatalogCategory = {
+    readonly title: string;
+    readonly effects: readonly EffectCatalogItem[];
+};
+export declare const getEffectDocumentationPath: (item: EffectCatalogItem) => string;
+export declare const getEffectDocumentationLink: (item: EffectCatalogItem) => string;
+export declare const getEffectPreviewSource: (item: EffectCatalogItem) => string;
+export declare const getEffectPreviewAlt: (item: EffectCatalogItem) => string;
+export declare const makeEffectDragDataFromCatalogItem: (item: EffectCatalogItem) => EffectDragData;
+export declare const getEffectCatalogCategories: (items: readonly EffectCatalogItem[]) => readonly EffectCatalogCategory[];
+export declare const EFFECT_CATALOG: readonly EffectCatalogItem[];

package/dist/effect-catalog.js

@@ -0,0 +1,598 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EFFECT_CATALOG = exports.getEffectCatalogCategories = exports.makeEffectDragDataFromCatalogItem = exports.getEffectPreviewAlt = exports.getEffectPreviewSource = exports.getEffectDocumentationLink = exports.getEffectDocumentationPath = void 0;
+const getEffectDocumentationPath = (item) => {
+    if (item.id === 'effects-light-leak') {
+        return '/docs/light-leaks/light-leak-effect';
+    }
+    if (item.id === 'effects-starburst') {
+        return '/docs/starburst/starburst-effect';
+    }
+    return `/docs/effects/${item.id.slice('effects-'.length)}`;
+};
+exports.getEffectDocumentationPath = getEffectDocumentationPath;
+const getEffectDocumentationLink = (item) => {
+    return `https://www.remotion.dev${(0, exports.getEffectDocumentationPath)(item)}`;
+};
+exports.getEffectDocumentationLink = getEffectDocumentationLink;
+const getEffectPreviewSource = (item) => {
+    return `/img/${item.id}-preview.png`;
+};
+exports.getEffectPreviewSource = getEffectPreviewSource;
+const getEffectPreviewAlt = (item) => {
+    const effectName = item.id
+        .slice('effects-'.length)
+        .replaceAll('-', ' ')
+        .replace(/^uv /, 'UV ')
+        .replace(/^xy /, 'XY ')
+        .replace(/^tv /, 'TV ');
+    return `${effectName} effect preview`;
+};
+exports.getEffectPreviewAlt = getEffectPreviewAlt;
+const makeEffectDragDataFromCatalogItem = (item) => {
+    return {
+        type: 'remotion-effect',
+        version: 1,
+        effect: item.effect,
+    };
+};
+exports.makeEffectDragDataFromCatalogItem = makeEffectDragDataFromCatalogItem;
+const getEffectCatalogCategories = (items) => {
+    const categories = [];
+    for (const item of items) {
+        const last = categories[categories.length - 1];
+        if ((last === null || last === void 0 ? void 0 : last.title) === item.category) {
+            categories[categories.length - 1] = {
+                ...last,
+                effects: [...last.effects, item],
+            };
+            continue;
+        }
+        categories.push({
+            title: item.category,
+            effects: [item],
+        });
+    }
+    return categories;
+};
+exports.getEffectCatalogCategories = getEffectCatalogCategories;
+exports.EFFECT_CATALOG = [
+    {
+        id: 'effects-brightness',
+        category: 'Color',
+        label: 'brightness()',
+        description: 'Brightness adjustment effect',
+        effect: {
+            name: 'brightness',
+            importPath: '@remotion/effects/brightness',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-contrast',
+        category: 'Color',
+        label: 'contrast()',
+        description: 'Contrast adjustment effect',
+        effect: {
+            name: 'contrast',
+            importPath: '@remotion/effects/contrast',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-color-key',
+        category: 'Color',
+        label: 'colorKey()',
+        description: 'Remove a key color (greenscreen)',
+        effect: {
+            name: 'colorKey',
+            importPath: '@remotion/effects/color-key',
+            config: {
+                similarity: 0.45,
+            },
+        },
+    },
+    {
+        id: 'effects-duotone',
+        category: 'Color',
+        label: 'duotone()',
+        description: 'Two-color threshold effect',
+        effect: {
+            name: 'duotone',
+            importPath: '@remotion/effects/duotone',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-grayscale',
+        category: 'Color',
+        label: 'grayscale()',
+        description: 'Black-and-white effect',
+        effect: {
+            name: 'grayscale',
+            importPath: '@remotion/effects/grayscale',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-hue',
+        category: 'Color',
+        label: 'hue()',
+        description: 'Hue rotation effect',
+        effect: {
+            name: 'hue',
+            importPath: '@remotion/effects/hue',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-invert',
+        category: 'Color',
+        label: 'invert()',
+        description: 'Negative color effect',
+        effect: {
+            name: 'invert',
+            importPath: '@remotion/effects/invert',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-saturation',
+        category: 'Color',
+        label: 'saturation()',
+        description: 'Saturation adjustment effect',
+        effect: {
+            name: 'saturation',
+            importPath: '@remotion/effects/saturation',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-tint',
+        category: 'Color',
+        label: 'tint()',
+        description: 'Color tint effect',
+        effect: {
+            name: 'tint',
+            importPath: '@remotion/effects/tint',
+            config: {
+                color: '#1ec8ff',
+            },
+        },
+    },
+    {
+        id: 'effects-thermal-vision',
+        category: 'Color',
+        label: 'thermalVision()',
+        description: 'Thermal heat-map color effect',
+        effect: {
+            name: 'thermalVision',
+            importPath: '@remotion/effects/thermal-vision',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-blur',
+        category: 'Blur & Shadow',
+        label: 'blur()',
+        description: 'Gaussian blur effect',
+        effect: {
+            name: 'blur',
+            importPath: '@remotion/effects/blur',
+            config: {
+                radius: 40,
+            },
+        },
+    },
+    {
+        id: 'effects-linear-progressive-blur',
+        category: 'Blur & Shadow',
+        label: 'linearProgressiveBlur()',
+        description: 'Gradient-controlled blur effect',
+        effect: {
+            name: 'linearProgressiveBlur',
+            importPath: '@remotion/effects/linear-progressive-blur',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-drop-shadow',
+        category: 'Blur & Shadow',
+        label: 'dropShadow()',
+        description: 'Blurred alpha shadow effect',
+        effect: {
+            name: 'dropShadow',
+            importPath: '@remotion/effects/drop-shadow',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-glow',
+        category: 'Blur & Shadow',
+        label: 'glow()',
+        description: 'Soft halo effect',
+        effect: {
+            name: 'glow',
+            importPath: '@remotion/effects/glow',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-evolve',
+        category: 'Reveal',
+        label: 'evolve()',
+        description: 'Directional reveal effect',
+        effect: {
+            name: 'evolve',
+            importPath: '@remotion/effects/evolve',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-mirror',
+        category: 'Transform',
+        label: 'mirror()',
+        description: 'Mirror reflection effect',
+        effect: {
+            name: 'mirror',
+            importPath: '@remotion/effects/mirror',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-scale',
+        category: 'Transform',
+        label: 'scale()',
+        description: 'Scale transform effect',
+        effect: {
+            name: 'scale',
+            importPath: '@remotion/effects/scale',
+            config: {
+                scale: 1,
+            },
+        },
+    },
+    {
+        id: 'effects-uv-translate',
+        category: 'Transform',
+        label: 'uvTranslate()',
+        description: 'UV-based translate effect',
+        effect: {
+            name: 'uvTranslate',
+            importPath: '@remotion/effects/translate',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-xy-translate',
+        category: 'Transform',
+        label: 'xyTranslate()',
+        description: 'Pixel-based translate effect',
+        effect: {
+            name: 'xyTranslate',
+            importPath: '@remotion/effects/translate',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-barrel-distortion',
+        category: 'Distort',
+        label: 'barrelDistortion()',
+        description: 'Barrel distortion effect',
+        effect: {
+            name: 'barrelDistortion',
+            importPath: '@remotion/effects/barrel-distortion',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-chromatic-aberration',
+        category: 'Distort',
+        label: 'chromaticAberration()',
+        description: 'RGB channel split effect',
+        effect: {
+            name: 'chromaticAberration',
+            importPath: '@remotion/effects/chromatic-aberration',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-fisheye',
+        category: 'Distort',
+        label: 'fisheye()',
+        description: 'Ultra-wide-angle lens effect',
+        effect: {
+            name: 'fisheye',
+            importPath: '@remotion/effects/fisheye',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-wave',
+        category: 'Distort',
+        label: 'wave()',
+        description: 'Sine wave distortion',
+        effect: {
+            name: 'wave',
+            importPath: '@remotion/effects/wave',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-burlap',
+        category: 'Stylize',
+        label: 'burlap()',
+        description: 'Procedural woven texture effect',
+        effect: {
+            name: 'burlap',
+            importPath: '@remotion/effects/burlap',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-dot-grid',
+        category: 'Stylize',
+        label: 'dotGrid()',
+        description: 'Source-color dot mask effect',
+        effect: {
+            name: 'dotGrid',
+            importPath: '@remotion/effects/dot-grid',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-halftone',
+        category: 'Stylize',
+        label: 'halftone()',
+        description: 'Source-image halftone effect',
+        effect: {
+            name: 'halftone',
+            importPath: '@remotion/effects/halftone',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-noise',
+        category: 'Stylize',
+        label: 'noise()',
+        description: 'Procedural grain effect',
+        effect: {
+            name: 'noise',
+            importPath: '@remotion/effects/noise',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-noise-displacement',
+        category: 'Stylize',
+        label: 'noiseDisplacement()',
+        description: 'Localized noisy displacement',
+        effect: {
+            name: 'noiseDisplacement',
+            importPath: '@remotion/effects/noise-displacement',
+            config: {
+                center: [0.6124309308853857, 0.5010527449123625],
+                radius: 0.41,
+                strength: 15.5,
+                seed: 78,
+                grainSize: 0.9,
+                passes: 12,
+                blur: 0,
+                feather: 1,
+                biasDirection: 313,
+                biasAmount: 1,
+            },
+        },
+    },
+    {
+        id: 'effects-pattern',
+        category: 'Stylize',
+        label: 'pattern()',
+        description: 'Repeated source tile effect',
+        effect: {
+            name: 'pattern',
+            importPath: '@remotion/effects/pattern',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-pixel-dissolve',
+        category: 'Stylize',
+        label: 'pixelDissolve()',
+        description: 'Pixelated dissolve effect',
+        effect: {
+            name: 'pixelDissolve',
+            importPath: '@remotion/effects/pixel-dissolve',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-pixelate',
+        category: 'Stylize',
+        label: 'pixelate()',
+        description: 'Pixelation effect',
+        effect: {
+            name: 'pixelate',
+            importPath: '@remotion/effects/pixelate',
+            config: {
+                blockSize: 20,
+            },
+        },
+    },
+    {
+        id: 'effects-scanlines',
+        category: 'Stylize',
+        label: 'scanlines()',
+        description: 'Additive horizontal scanlines',
+        effect: {
+            name: 'scanlines',
+            importPath: '@remotion/effects/scanlines',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-speckle',
+        category: 'Stylize',
+        label: 'speckle()',
+        description: 'Random alpha-hole effect',
+        effect: {
+            name: 'speckle',
+            importPath: '@remotion/effects/speckle',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-shine',
+        category: 'Stylize',
+        label: 'shine()',
+        description: 'Glossy light sweep effect',
+        effect: {
+            name: 'shine',
+            importPath: '@remotion/effects/shine',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-shrinkwrap',
+        category: 'Stylize',
+        label: 'shrinkwrap()',
+        description: 'Procedural plastic wrap effect',
+        effect: {
+            name: 'shrinkwrap',
+            importPath: '@remotion/effects/shrinkwrap',
+            config: {
+                amount: 0.94,
+                displacement: 13.5,
+                highlightIntensity: 1.54,
+                wrinkleDensity: 0.87,
+                edgeTension: 0.58,
+                phase: 0,
+                seed: 12,
+            },
+        },
+    },
+    {
+        id: 'effects-vignette',
+        category: 'Stylize',
+        label: 'vignette()',
+        description: 'Edge darkening or transparency effect',
+        effect: {
+            name: 'vignette',
+            importPath: '@remotion/effects/vignette',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-contour-lines',
+        category: 'Generate',
+        label: 'contourLines()',
+        description: 'Topographic line overlay effect',
+        effect: {
+            name: 'contourLines',
+            importPath: '@remotion/effects/contour-lines',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-halftone-linear-gradient',
+        category: 'Generate',
+        label: 'halftoneLinearGradient()',
+        description: 'Procedural dot gradient effect',
+        effect: {
+            name: 'halftoneLinearGradient',
+            importPath: '@remotion/effects/halftone-linear-gradient',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-white-noise',
+        category: 'Generate',
+        label: 'whiteNoise()',
+        description: 'Random grayscale noise layer',
+        effect: {
+            name: 'whiteNoise',
+            importPath: '@remotion/effects/white-noise',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-tv-signal-off',
+        category: 'Generate',
+        label: 'tvSignalOff()',
+        description: 'TV color bars test pattern',
+        effect: {
+            name: 'tvSignalOff',
+            importPath: '@remotion/effects/tv-signal-off',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-lines',
+        category: 'Generate',
+        label: 'lines()',
+        description: 'Alternating line pattern effect',
+        effect: {
+            name: 'lines',
+            importPath: '@remotion/effects/lines',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-rings',
+        category: 'Generate',
+        label: 'rings()',
+        description: 'Concentric ring pattern effect',
+        effect: {
+            name: 'rings',
+            importPath: '@remotion/effects/rings',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-waves',
+        category: 'Generate',
+        label: 'waves()',
+        description: 'Wavy band pattern effect',
+        effect: {
+            name: 'waves',
+            importPath: '@remotion/effects/waves',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-zigzag',
+        category: 'Generate',
+        label: 'zigzag()',
+        description: 'Zig-zag band pattern effect',
+        effect: {
+            name: 'zigzag',
+            importPath: '@remotion/effects/zigzag',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-light-leak',
+        category: 'Generate',
+        label: 'lightLeak()',
+        description: 'Light leak overlay effect',
+        effect: {
+            name: 'lightLeak',
+            importPath: '@remotion/light-leaks',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-starburst',
+        category: 'Generate',
+        label: 'starburst()',
+        description: 'Starburst ray effect',
+        effect: {
+            name: 'starburst',
+            importPath: '@remotion/starburst',
+            config: {
+                rays: 16,
+                colors: ['#ff6600', '#ffff00'],
+            },
+        },
+    },
+];

package/dist/effect-clipboard-data.d.ts

@@ -1,3 +1,4 @@
+import type { KeyframeEasing } from './keyframe-easing-presets';
 import { type KeyframeInterpolationFunction } from './keyframe-interpolation-function';
 export type EffectClipboardPasteType = 'effects-additive' | 'effects-replacing';
 export type EffectClipboardStaticParam = {
@@ -9,7 +10,7 @@ export type EffectClipboardKeyframe = {
     readonly frame: number;
     readonly value: unknown;
 };
-export type EffectClipboardEasing = 'linear' | [number, number, number, number];
+export type EffectClipboardEasing = KeyframeEasing;
 export type EffectClipboardExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 export type EffectClipboardClamping = {
     readonly left: EffectClipboardExtrapolateType;

package/dist/effect-clipboard-data.js

@@ -10,10 +10,18 @@ const isFiniteNumber = (value) => {
     return typeof value === 'number' && Number.isFinite(value);
 };
 const isEasing = (value) => {
-    return (value === 'linear' ||
-        (Array.isArray(value) &&
-            value.length === 4 &&
-            value.every((item) => isFiniteNumber(item))));
+    return (isRecord(value) &&
+        (value.type === 'linear' ||
+            (value.type === 'bezier' &&
+                isFiniteNumber(value.x1) &&
+                isFiniteNumber(value.y1) &&
+                isFiniteNumber(value.x2) &&
+                isFiniteNumber(value.y2)) ||
+            (value.type === 'spring' &&
+                isFiniteNumber(value.damping) &&
+                isFiniteNumber(value.mass) &&
+                isFiniteNumber(value.stiffness) &&
+                typeof value.overshootClamping === 'boolean')));
 };
 const isKeyframe = (value) => {
     return isRecord(value) && isFiniteNumber(value.frame) && 'value' in value;

package/dist/get-all-keys.d.ts

@@ -1,2 +1,2 @@
-import type { SequenceSchema } from 'remotion';
-export declare const getAllSchemaKeys: (schema: SequenceSchema) => string[];
+import type { InteractivitySchema } from 'remotion';
+export declare const getAllSchemaKeys: (schema: InteractivitySchema) => string[];

package/dist/index.d.ts

@@ -4,10 +4,12 @@ export { ASSET_DRAG_MIME_TYPE, makeAssetDragData, parseAssetDragData, type Asset
 export type { ApplyVisualControlCodemod, RecastCodemod } from './codemods';
 export { COMPONENT_DRAG_MIME_TYPE, areComponentProps, isComponentIdentifier, isComponentImportPath, makeComponentDragData, parseComponentDragData, type ComponentDimensions, type ComponentDragData, type ComponentProp, } from './component-drag-data';
 export { DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS } from './default-buffer-state-delay-in-milliseconds';
-export { KEYFRAME_EASING_PRESETS, type KeyframeEasingPreset, } from './keyframe-easing-presets';
+export { KEYFRAME_EASING_PRESETS, LINEAR_KEYFRAME_EASING, type KeyframeEasing, type KeyframeEasingPreset, } from './keyframe-easing-presets';
 export { detectFileType, isImageFileType, type FileDimensions, type FileType, type ImageFileType, } from './detect-file-type';
+export { parseEasingClipboardData, parseEasingClipboardDataResult, type EasingClipboardData, type EasingClipboardDataParseResult, } from './easing-clipboard-data';
 export { parseEffectClipboardData, parseEffectClipboardDataResult, parseEffectPropClipboardData, parseEffectPropClipboardDataResult, type EffectClipboardClamping, type EffectClipboardData, type EffectClipboardDataParseResult, type EffectClipboardEasing, type EffectClipboardExtrapolateType, type EffectClipboardInterpolationFunction, type EffectClipboardKeyframe, type EffectClipboardKeyframedParam, type EffectClipboardParam, type EffectClipboardPasteType, type EffectClipboardSnapshot, type EffectClipboardStaticParam, type EffectPropClipboardData, type EffectPropClipboardDataParseResult, } from './effect-clipboard-data';
 export { EFFECT_DRAG_MIME_TYPE, parseEffectDragData, type EffectDragData, } from './effect-drag-data';
+export { EFFECT_CATALOG, getEffectCatalogCategories, getEffectDocumentationLink, getEffectDocumentationPath, getEffectPreviewAlt, getEffectPreviewSource, makeEffectDragDataFromCatalogItem, type EffectCatalogCategory, type EffectCatalogItem, } from './effect-catalog';
 export { EventSourceEvent } from './event-source-event';
 export { formatBytes } from './format-bytes';
 export { getAllSchemaKeys } from './get-all-keys';
@@ -16,7 +18,8 @@ export { ErrorLocation, getLocationFromBuildError, } from './get-location-from-b
 export { getProjectName } from './get-project-name';
 export type { GitSource } from './git-source';
 export { HotMiddlewareMessage, HotMiddlewareOptions, ModuleMap, hotMiddlewareOptions, } from './hot-middleware';
-export { getKeyframeInterpolationFunction, getKeyframeInterpolationFunctionForSchemaField, isKeyframeInterpolationFunction, isSchemaFieldKeyframable, isSequenceFieldSchemaKeyframable, keyframeInterpolationFunctions, type KeyframeInterpolationFunction, } from './keyframe-interpolation-function';
+export { getKeyframeInterpolationFunction, getKeyframeInterpolationFunctionForSchemaField, isKeyframeInterpolationFunction, isSchemaFieldKeyframable, isInteractivitySchemaFieldKeyframable, keyframeInterpolationFunctions, type KeyframeInterpolationFunction, } from './keyframe-interpolation-function';
+export { DEFAULT_SPRING_EASING, parseSpringEasingConfig, type SpringKeyframeEasing, } from './parse-spring-easing-config';
 export { DEFAULT_TIMELINE_TRACKS } from './max-timeline-tracks';
 export { Pkgs, apiDocs, descriptions, extraPackages, installableMap, packages, type ExtraPackage, } from './package-info';
 export { PackageManager } from './package-manager';
@@ -26,7 +29,7 @@ export { AggregateRenderProgress, ArtifactProgress, BrowserDownloadState, Browse
 export type { CompletedClientRender } from './render-job';
 export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableElement, } from './required-package';
 export { SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, } from './schema-field-info';
-export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, } from './schema-field-info';
+export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldInfo, SequenceControls, InteractivitySchemaFieldInfo, } from './schema-field-info';
 export { SFX_DRAG_MIME_TYPE, parseSfxDragData, type SfxDragData, } from './sfx-drag-data';
 export { ScriptLine, SomeStackFrame, StackFrame, SymbolicatedStackFrame, } from './stack-types';
 export { EnumPath, stringifyDefaultProps } from './stringify-default-props';

package/dist/index.js

@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.keyframeInterpolationFunctions = exports.isSequenceFieldSchemaKeyframable = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.isImageFileType = exports.detectFileType = exports.KEYFRAME_EASING_PRESETS = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = exports.stripAnsi = exports.splitAnsi = void 0;
-exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = void 0;
+exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = exports.keyframeInterpolationFunctions = exports.isInteractivitySchemaFieldKeyframable = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.makeEffectDragDataFromCatalogItem = exports.getEffectPreviewSource = exports.getEffectPreviewAlt = exports.getEffectDocumentationPath = exports.getEffectDocumentationLink = exports.getEffectCatalogCategories = exports.EFFECT_CATALOG = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.parseEasingClipboardDataResult = exports.parseEasingClipboardData = exports.isImageFileType = exports.detectFileType = exports.LINEAR_KEYFRAME_EASING = exports.KEYFRAME_EASING_PRESETS = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = exports.stripAnsi = exports.splitAnsi = void 0;
+exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.packages = void 0;
 const ansi_1 = require("./ansi");
 Object.defineProperty(exports, "splitAnsi", { enumerable: true, get: function () { return ansi_1.splitAnsi; } });
 Object.defineProperty(exports, "stripAnsi", { enumerable: true, get: function () { return ansi_1.stripAnsi; } });
@@ -35,9 +35,13 @@ const default_buffer_state_delay_in_milliseconds_1 = require("./default-buffer-s
 Object.defineProperty(exports, "DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS", { enumerable: true, get: function () { return default_buffer_state_delay_in_milliseconds_1.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS; } });
 const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
 Object.defineProperty(exports, "KEYFRAME_EASING_PRESETS", { enumerable: true, get: function () { return keyframe_easing_presets_1.KEYFRAME_EASING_PRESETS; } });
+Object.defineProperty(exports, "LINEAR_KEYFRAME_EASING", { enumerable: true, get: function () { return keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING; } });
 const detect_file_type_1 = require("./detect-file-type");
 Object.defineProperty(exports, "detectFileType", { enumerable: true, get: function () { return detect_file_type_1.detectFileType; } });
 Object.defineProperty(exports, "isImageFileType", { enumerable: true, get: function () { return detect_file_type_1.isImageFileType; } });
+const easing_clipboard_data_1 = require("./easing-clipboard-data");
+Object.defineProperty(exports, "parseEasingClipboardData", { enumerable: true, get: function () { return easing_clipboard_data_1.parseEasingClipboardData; } });
+Object.defineProperty(exports, "parseEasingClipboardDataResult", { enumerable: true, get: function () { return easing_clipboard_data_1.parseEasingClipboardDataResult; } });
 const effect_clipboard_data_1 = require("./effect-clipboard-data");
 Object.defineProperty(exports, "parseEffectClipboardData", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardData; } });
 Object.defineProperty(exports, "parseEffectClipboardDataResult", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardDataResult; } });
@@ -46,6 +50,14 @@ Object.defineProperty(exports, "parseEffectPropClipboardDataResult", { enumerabl
 const effect_drag_data_1 = require("./effect-drag-data");
 Object.defineProperty(exports, "EFFECT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return effect_drag_data_1.EFFECT_DRAG_MIME_TYPE; } });
 Object.defineProperty(exports, "parseEffectDragData", { enumerable: true, get: function () { return effect_drag_data_1.parseEffectDragData; } });
+const effect_catalog_1 = require("./effect-catalog");
+Object.defineProperty(exports, "EFFECT_CATALOG", { enumerable: true, get: function () { return effect_catalog_1.EFFECT_CATALOG; } });
+Object.defineProperty(exports, "getEffectCatalogCategories", { enumerable: true, get: function () { return effect_catalog_1.getEffectCatalogCategories; } });
+Object.defineProperty(exports, "getEffectDocumentationLink", { enumerable: true, get: function () { return effect_catalog_1.getEffectDocumentationLink; } });
+Object.defineProperty(exports, "getEffectDocumentationPath", { enumerable: true, get: function () { return effect_catalog_1.getEffectDocumentationPath; } });
+Object.defineProperty(exports, "getEffectPreviewAlt", { enumerable: true, get: function () { return effect_catalog_1.getEffectPreviewAlt; } });
+Object.defineProperty(exports, "getEffectPreviewSource", { enumerable: true, get: function () { return effect_catalog_1.getEffectPreviewSource; } });
+Object.defineProperty(exports, "makeEffectDragDataFromCatalogItem", { enumerable: true, get: function () { return effect_catalog_1.makeEffectDragDataFromCatalogItem; } });
 const format_bytes_1 = require("./format-bytes");
 Object.defineProperty(exports, "formatBytes", { enumerable: true, get: function () { return format_bytes_1.formatBytes; } });
 const get_all_keys_1 = require("./get-all-keys");
@@ -63,8 +75,11 @@ Object.defineProperty(exports, "getKeyframeInterpolationFunction", { enumerable:
 Object.defineProperty(exports, "getKeyframeInterpolationFunctionForSchemaField", { enumerable: true, get: function () { return keyframe_interpolation_function_1.getKeyframeInterpolationFunctionForSchemaField; } });
 Object.defineProperty(exports, "isKeyframeInterpolationFunction", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isKeyframeInterpolationFunction; } });
 Object.defineProperty(exports, "isSchemaFieldKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isSchemaFieldKeyframable; } });
-Object.defineProperty(exports, "isSequenceFieldSchemaKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isSequenceFieldSchemaKeyframable; } });
+Object.defineProperty(exports, "isInteractivitySchemaFieldKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isInteractivitySchemaFieldKeyframable; } });
 Object.defineProperty(exports, "keyframeInterpolationFunctions", { enumerable: true, get: function () { return keyframe_interpolation_function_1.keyframeInterpolationFunctions; } });
+const parse_spring_easing_config_1 = require("./parse-spring-easing-config");
+Object.defineProperty(exports, "DEFAULT_SPRING_EASING", { enumerable: true, get: function () { return parse_spring_easing_config_1.DEFAULT_SPRING_EASING; } });
+Object.defineProperty(exports, "parseSpringEasingConfig", { enumerable: true, get: function () { return parse_spring_easing_config_1.parseSpringEasingConfig; } });
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
 Object.defineProperty(exports, "DEFAULT_TIMELINE_TRACKS", { enumerable: true, get: function () { return max_timeline_tracks_1.DEFAULT_TIMELINE_TRACKS; } });
 const package_info_1 = require("./package-info");

package/dist/keyframe-easing-presets.d.ts

@@ -1,7 +1,9 @@
-export type KeyframeEasing = 'linear' | [number, number, number, number];
+import type { CanUpdateSequencePropStatusEasing } from 'remotion';
+export type KeyframeEasing = CanUpdateSequencePropStatusEasing;
 export type KeyframeEasingPreset = {
-    readonly id: 'ease-in' | 'ease-out' | 'ease-in-out';
+    readonly id: 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bouncy-spring';
     readonly label: string;
     readonly easing: KeyframeEasing;
 };
+export declare const LINEAR_KEYFRAME_EASING: KeyframeEasing;
 export declare const KEYFRAME_EASING_PRESETS: KeyframeEasingPreset[];

package/dist/keyframe-easing-presets.js

@@ -1,8 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KEYFRAME_EASING_PRESETS = void 0;
+exports.KEYFRAME_EASING_PRESETS = exports.LINEAR_KEYFRAME_EASING = void 0;
+exports.LINEAR_KEYFRAME_EASING = { type: 'linear' };
 exports.KEYFRAME_EASING_PRESETS = [
-    { id: 'ease-in', label: 'Ease in', easing: [0.42, 0, 1, 1] },
-    { id: 'ease-out', label: 'Ease out', easing: [0, 0, 0.58, 1] },
-    { id: 'ease-in-out', label: 'Ease in-out', easing: [0.42, 0, 0.58, 1] },
+    {
+        id: 'ease-in',
+        label: 'Ease in',
+        easing: { type: 'bezier', x1: 0.42, y1: 0, x2: 1, y2: 1 },
+    },
+    {
+        id: 'ease-out',
+        label: 'Ease out',
+        easing: { type: 'bezier', x1: 0, y1: 0, x2: 0.58, y2: 1 },
+    },
+    {
+        id: 'ease-in-out',
+        label: 'Ease in-out',
+        easing: { type: 'bezier', x1: 0.42, y1: 0, x2: 0.58, y2: 1 },
+    },
+    {
+        id: 'spring',
+        label: 'Spring',
+        easing: {
+            type: 'spring',
+            damping: 10,
+            mass: 1,
+            overshootClamping: false,
+            stiffness: 100,
+        },
+    },
+    {
+        id: 'bouncy-spring',
+        label: 'Bouncy spring',
+        easing: {
+            type: 'spring',
+            damping: 5,
+            mass: 1,
+            overshootClamping: false,
+            stiffness: 120,
+        },
+    },
 ];

package/dist/keyframe-interpolation-function.d.ts

@@ -1,18 +1,18 @@
-import type { SequenceFieldSchema, SequenceSchema } from 'remotion';
+import type { InteractivitySchemaField, InteractivitySchema } from 'remotion';
 export declare const keyframeInterpolationFunctions: readonly ["interpolate", "interpolateColors"];
 export type KeyframeInterpolationFunction = (typeof keyframeInterpolationFunctions)[number];
 export declare const isKeyframeInterpolationFunction: (name: string) => name is "interpolate" | "interpolateColors";
-export declare const isSequenceFieldSchemaKeyframable: (field: SequenceFieldSchema | undefined) => boolean;
+export declare const isInteractivitySchemaFieldKeyframable: (field: InteractivitySchemaField | undefined) => boolean;
 export declare const isSchemaFieldKeyframable: ({ schema, key, }: {
-    schema: SequenceSchema | null;
+    schema: InteractivitySchema | null;
     key: string;
 }) => boolean;
 export declare const getKeyframeInterpolationFunctionForSchemaField: ({ schema, key, }: {
-    schema: SequenceSchema | null;
+    schema: InteractivitySchema | null;
     key: string;
 }) => "interpolate" | "interpolateColors" | null;
 export declare const getKeyframeInterpolationFunction: ({ schema, key, staticValue, newValue, }: {
-    schema: SequenceSchema | null;
+    schema: InteractivitySchema | null;
     key: string;
     staticValue: unknown;
     newValue: unknown;

package/dist/keyframe-interpolation-function.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.isSchemaFieldKeyframable = exports.isSequenceFieldSchemaKeyframable = exports.isKeyframeInterpolationFunction = exports.keyframeInterpolationFunctions = void 0;
+exports.getKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.isSchemaFieldKeyframable = exports.isInteractivitySchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.keyframeInterpolationFunctions = void 0;
 exports.keyframeInterpolationFunctions = [
     'interpolate',
     'interpolateColors',
@@ -9,7 +9,7 @@ const isKeyframeInterpolationFunction = (name) => {
     return exports.keyframeInterpolationFunctions.includes(name);
 };
 exports.isKeyframeInterpolationFunction = isKeyframeInterpolationFunction;
-const isSequenceFieldSchemaKeyframable = (field) => {
+const isInteractivitySchemaFieldKeyframable = (field) => {
     if (!field) {
         return true;
     }
@@ -18,7 +18,7 @@ const isSequenceFieldSchemaKeyframable = (field) => {
     }
     return field.keyframable !== false;
 };
-exports.isSequenceFieldSchemaKeyframable = isSequenceFieldSchemaKeyframable;
+exports.isInteractivitySchemaFieldKeyframable = isInteractivitySchemaFieldKeyframable;
 const findFieldInSchema = (schema, key) => {
     if (key in schema) {
         return schema[key];
@@ -38,7 +38,7 @@ const findFieldInSchema = (schema, key) => {
 };
 const isSchemaFieldKeyframable = ({ schema, key, }) => {
     const field = schema ? findFieldInSchema(schema, key) : undefined;
-    return (0, exports.isSequenceFieldSchemaKeyframable)(field);
+    return (0, exports.isInteractivitySchemaFieldKeyframable)(field);
 };
 exports.isSchemaFieldKeyframable = isSchemaFieldKeyframable;
 const getKeyframeInterpolationFunctionForSchemaField = ({ schema, key, }) => {

package/dist/optimistic-add-keyframe.d.ts

@@ -1,10 +1,10 @@
-import { type CanUpdateSequencePropsResponse, type SequenceSchema } from 'remotion';
+import { type CanUpdateSequencePropsResponse, type InteractivitySchema } from 'remotion';
 export declare const optimisticAddSequenceKeyframe: ({ previous, fieldKey, frame, value, schema, }: {
     previous: CanUpdateSequencePropsResponse;
     fieldKey: string;
     frame: number;
     value: unknown;
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
 }) => CanUpdateSequencePropsResponse;
 export declare const optimisticAddEffectKeyframe: ({ previous, effectIndex, fieldKey, frame, value, schema, }: {
     previous: CanUpdateSequencePropsResponse;
@@ -12,5 +12,5 @@ export declare const optimisticAddEffectKeyframe: ({ previous, effectIndex, fiel
     fieldKey: string;
     frame: number;
     value: unknown;
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
 }) => CanUpdateSequencePropsResponse;

package/dist/optimistic-add-keyframe.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticAddEffectKeyframe = exports.optimisticAddSequenceKeyframe = void 0;
+const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
 const keyframe_interpolation_function_1 = require("./keyframe-interpolation-function");
 const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) => {
     var _a;
@@ -16,7 +17,7 @@ const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) =>
         const keyframes = [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame);
         const easing = [...status.easing];
         while (easing.length < keyframes.length - 1) {
-            easing.push('linear');
+            easing.push(keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING);
         }
         return {
             ...status,

package/dist/optimistic-update-for-effect-prop-statuses.d.ts

@@ -1,8 +1,8 @@
-import { type CanUpdateSequencePropsResponse, type SequenceSchema } from 'remotion';
+import { type CanUpdateSequencePropsResponse, type InteractivitySchema } from 'remotion';
 export declare const optimisticUpdateForEffectPropStatuses: ({ previous, effectIndex, fieldKey, value, schema, }: {
     previous: CanUpdateSequencePropsResponse;
     effectIndex: number;
     fieldKey: string;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 }) => CanUpdateSequencePropsResponse;

package/dist/optimistic-update-for-prop-statuses.d.ts

@@ -1,7 +1,7 @@
-import { type CanUpdateSequencePropsResponse, type SequenceSchema } from 'remotion';
+import { type CanUpdateSequencePropsResponse, type InteractivitySchema } from 'remotion';
 export declare const optimisticUpdateForPropStatuses: ({ previous, fieldKey, value, schema, }: {
     previous: CanUpdateSequencePropsResponse;
     fieldKey: string;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 }) => CanUpdateSequencePropsResponse;

package/dist/optimistic-update-keyframe-settings.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateSequenceKeyframeSettings = void 0;
+const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
 const updateEasing = ({ easing, segmentCount, segmentIndex, value, }) => {
     if (!Number.isInteger(segmentIndex) ||
         segmentIndex < 0 ||
@@ -9,7 +10,7 @@ const updateEasing = ({ easing, segmentCount, segmentIndex, value, }) => {
     }
     const nextEasing = Array.from({ length: segmentCount }, (_, index) => {
         var _a;
-        return (_a = easing[index]) !== null && _a !== void 0 ? _a : 'linear';
+        return (_a = easing[index]) !== null && _a !== void 0 ? _a : keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING;
     });
     nextEasing[segmentIndex] = value;
     return nextEasing;

package/dist/parse-spring-easing-config.d.ts

@@ -0,0 +1,9 @@
+export type SpringKeyframeEasing = {
+    readonly type: 'spring';
+    damping: number;
+    mass: number;
+    overshootClamping: boolean;
+    stiffness: number;
+};
+export declare const DEFAULT_SPRING_EASING: SpringKeyframeEasing;
+export declare const parseSpringEasingConfig: (node: unknown) => SpringKeyframeEasing | null;

package/dist/parse-spring-easing-config.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = void 0;
+exports.DEFAULT_SPRING_EASING = {
+    type: 'spring',
+    damping: 10,
+    mass: 1,
+    overshootClamping: false,
+    stiffness: 100,
+};
+const isAstNode = (value) => {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value.type === 'string');
+};
+const getNumericValue = (node) => {
+    if (node.type === 'NumericLiteral') {
+        return typeof node.value === 'number' ? node.value : null;
+    }
+    if (node.type === 'UnaryExpression' &&
+        (node.operator === '-' || node.operator === '+') &&
+        isAstNode(node.argument) &&
+        node.argument.type === 'NumericLiteral' &&
+        typeof node.argument.value === 'number') {
+        return node.operator === '-' ? -node.argument.value : node.argument.value;
+    }
+    if (node.type === 'TSAsExpression' && isAstNode(node.expression)) {
+        return getNumericValue(node.expression);
+    }
+    return null;
+};
+const getBooleanValue = (node) => {
+    if (node.type === 'BooleanLiteral') {
+        return typeof node.value === 'boolean' ? node.value : null;
+    }
+    if (node.type === 'TSAsExpression' && isAstNode(node.expression)) {
+        return getBooleanValue(node.expression);
+    }
+    return null;
+};
+const getObjectPropertyName = (prop) => {
+    if (prop.computed === true || !isAstNode(prop.key)) {
+        return null;
+    }
+    if (prop.key.type === 'Identifier') {
+        return typeof prop.key.name === 'string' ? prop.key.name : null;
+    }
+    if (prop.key.type === 'StringLiteral') {
+        return typeof prop.key.value === 'string' ? prop.key.value : null;
+    }
+    return null;
+};
+const parseSpringEasingConfig = (node) => {
+    if (node === undefined) {
+        return { ...exports.DEFAULT_SPRING_EASING };
+    }
+    if (!isAstNode(node)) {
+        return null;
+    }
+    if (node.type === 'TSAsExpression') {
+        return (0, exports.parseSpringEasingConfig)(node.expression);
+    }
+    if (node.type !== 'ObjectExpression' || !Array.isArray(node.properties)) {
+        return null;
+    }
+    const spring = { ...exports.DEFAULT_SPRING_EASING };
+    for (const prop of node.properties) {
+        if (!isAstNode(prop) || prop.type !== 'ObjectProperty') {
+            return null;
+        }
+        const key = getObjectPropertyName(prop);
+        if (!key || !isAstNode(prop.value)) {
+            return null;
+        }
+        if (key === 'damping' || key === 'mass' || key === 'stiffness') {
+            const numericValue = getNumericValue(prop.value);
+            if (numericValue === null ||
+                !Number.isFinite(numericValue) ||
+                numericValue <= 0) {
+                return null;
+            }
+            spring[key] = numericValue;
+            continue;
+        }
+        if (key === 'overshootClamping') {
+            const booleanValue = getBooleanValue(prop.value);
+            if (booleanValue === null) {
+                return null;
+            }
+            spring.overshootClamping = booleanValue;
+            continue;
+        }
+        return null;
+    }
+    return spring;
+};
+exports.parseSpringEasingConfig = parseSpringEasingConfig;

package/dist/schema-field-info.d.ts

@@ -1,4 +1,4 @@
-import type { DragOverrides, EffectDefinition, GetDragOverrides, GetEffectDragOverrides, PropStatuses, SequenceControls, SequencePropsSubscriptionKey, SequenceSchema, VisibleFieldSchema } from 'remotion';
+import type { DragOverrides, EffectDefinition, GetDragOverrides, GetEffectDragOverrides, PropStatuses, SequenceControls, SequencePropsSubscriptionKey, InteractivitySchema, VisibleFieldSchema } from 'remotion';
 export type { DragOverrides, PropStatuses, SequenceControls };
 export type SchemaFieldInfo = {
     key: string;
@@ -7,25 +7,25 @@ export type SchemaFieldInfo = {
     rowHeight: number;
     fieldSchema: VisibleFieldSchema;
 };
-export type SequenceSchemaFieldInfo = SchemaFieldInfo & {
+export type InteractivitySchemaFieldInfo = SchemaFieldInfo & {
     readonly kind: 'sequence-field';
 };
 export type EffectSchemaFieldInfo = SchemaFieldInfo & {
     readonly kind: 'effect-field';
     readonly effectIndex: number;
-    readonly effectSchema: SequenceSchema;
+    readonly effectSchema: InteractivitySchema;
 };
-export type AnySchemaFieldInfo = SequenceSchemaFieldInfo | EffectSchemaFieldInfo;
+export type AnySchemaFieldInfo = InteractivitySchemaFieldInfo | EffectSchemaFieldInfo;
 export declare const SCHEMA_FIELD_ROW_HEIGHT = 22;
 declare const SUPPORTED_SCHEMA_TYPES: readonly ["number", "boolean", "rotation-css", "rotation-degrees", "translate", "transform-origin", "scale", "uv-coordinate", "color", "array", "enum", "hidden"];
 type SupportedSchemaType = (typeof SUPPORTED_SCHEMA_TYPES)[number];
 export declare const getFieldsToShow: ({ getDragOverrides, propStatuses, nodePath, schema, currentRuntimeValueDotNotation, }: {
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     currentRuntimeValueDotNotation: Record<string, unknown>;
     getDragOverrides: GetDragOverrides;
     propStatuses: PropStatuses;
     nodePath: SequencePropsSubscriptionKey;
-}) => SequenceSchemaFieldInfo[] | null;
+}) => InteractivitySchemaFieldInfo[] | null;
 export declare const getEffectFieldsToShow: ({ effect, effectIndex, nodePath, propStatuses, getEffectDragOverrides, }: {
     effect: EffectDefinition<unknown>;
     effectIndex: number;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
 	},
 	"name": "@remotion/studio-shared",
-	"version": "4.0.478",
+	"version": "4.0.479",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"scripts": {
@@ -20,11 +20,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.478"
+		"remotion": "4.0.479"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.478",
-		"@remotion/eslint-config-internal": "4.0.478",
+		"@remotion/renderer": "4.0.479",
+		"@remotion/eslint-config-internal": "4.0.479",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},