remotion

import React from 'react'; import type { SequenceControls } from './CompositionManager.js'; import { type InteractivitySchema } from './interactivity-schema.js'; import type { AbsoluteFillLayout, SequenceProps } from './Sequence.js'; type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul'; type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text'; type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag; type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element; export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>; export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>; export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>; type InteractiveSequenceProps = InteractiveBaseProps & { /** * @deprecated For internal use only */ readonly stack?: string; }; type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps; type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>; /** * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited. */ export declare const Interactive: { baseSchema: { readonly durationInFrames: { readonly type: "number"; readonly default: undefined; readonly min: 1; readonly step: 1; readonly hiddenFromList: true; }; readonly from: { readonly type: "number"; readonly default: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly trimBefore: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly freeze: { readonly type: "number"; readonly default: null; readonly step: 1; readonly hiddenFromList: true; }; readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema; readonly name: import("./interactivity-schema.js").HiddenFieldSchema; readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema; }; transformSchema: { readonly 'style.transformOrigin': { readonly type: "transform-origin"; readonly step: 1; readonly default: "50% 50%"; readonly description: "Transform origin"; }; readonly 'style.translate': { readonly type: "translate"; readonly step: 1; readonly default: "0px 0px"; readonly description: "Offset"; }; readonly 'style.scale': { readonly type: "scale"; readonly max: 100; readonly step: 0.01; readonly default: 1; readonly description: "Scale"; }; readonly 'style.rotate': { readonly type: "rotation-css"; readonly step: 1; readonly default: "0deg"; readonly description: "Rotation"; }; readonly 'style.opacity': { readonly type: "number"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly default: 1; readonly description: "Opacity"; readonly hiddenFromList: false; }; }; textSchema: { readonly 'style.color': { readonly type: "color"; readonly default: undefined; readonly description: "Color"; }; readonly 'style.fontSize': { readonly type: "number"; readonly default: undefined; readonly min: 0; readonly step: 1; readonly description: "Font size"; readonly hiddenFromList: false; }; readonly 'style.lineHeight': { readonly type: "number"; readonly default: undefined; readonly min: 0; readonly step: 0.05; readonly description: "Line height"; readonly hiddenFromList: false; }; readonly 'style.fontWeight': { readonly type: "enum"; readonly default: "400"; readonly description: "Font weight"; readonly variants: { readonly '100': {}; readonly '200': {}; readonly '300': {}; readonly '400': {}; readonly '500': {}; readonly '600': {}; readonly '700': {}; readonly '800': {}; readonly '900': {}; readonly normal: {}; readonly bold: {}; }; }; readonly 'style.fontStyle': { readonly type: "enum"; readonly default: "normal"; readonly description: "Font style"; readonly variants: { readonly normal: {}; readonly italic: {}; readonly oblique: {}; }; }; readonly 'style.textAlign': { readonly type: "enum"; readonly default: "left"; readonly description: "Text align"; readonly variants: { readonly left: {}; readonly center: {}; readonly right: {}; readonly justify: {}; readonly start: {}; readonly end: {}; }; }; readonly 'style.letterSpacing': { readonly type: "number"; readonly default: undefined; readonly step: 0.1; readonly description: "Letter spacing"; readonly hiddenFromList: false; }; }; premountSchema: { readonly premountFor: { readonly type: "number"; readonly default: 0; readonly description: "Premount For"; readonly min: 0; readonly step: 1; readonly hiddenFromList: false; }; readonly postmountFor: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly styleWhilePremounted: { readonly type: "hidden"; }; readonly styleWhilePostmounted: { readonly type: "hidden"; }; }; sequenceSchema: { readonly durationInFrames: { readonly type: "number"; readonly default: undefined; readonly min: 1; readonly step: 1; readonly hiddenFromList: true; }; readonly from: { readonly type: "number"; readonly default: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly trimBefore: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly freeze: { readonly type: "number"; readonly default: null; readonly step: 1; readonly hiddenFromList: true; }; readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema; readonly name: import("./interactivity-schema.js").HiddenFieldSchema; readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema; readonly layout: { readonly type: "enum"; readonly default: "absolute-fill"; readonly description: "Layout"; readonly variants: { readonly 'absolute-fill': { readonly 'style.transformOrigin': { readonly type: "transform-origin"; readonly step: 1; readonly default: "50% 50%"; readonly description: "Transform origin"; }; readonly 'style.translate': { readonly type: "translate"; readonly step: 1; readonly default: "0px 0px"; readonly description: "Offset"; }; readonly 'style.scale': { readonly type: "scale"; readonly max: 100; readonly step: 0.01; readonly default: 1; readonly description: "Scale"; }; readonly 'style.rotate': { readonly type: "rotation-css"; readonly step: 1; readonly default: "0deg"; readonly description: "Rotation"; }; readonly 'style.opacity': { readonly type: "number"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly default: 1; readonly description: "Opacity"; readonly hiddenFromList: false; }; readonly premountFor: { readonly type: "number"; readonly default: 0; readonly description: "Premount For"; readonly min: 0; readonly step: 1; readonly hiddenFromList: false; }; readonly postmountFor: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly styleWhilePremounted: { readonly type: "hidden"; }; readonly styleWhilePostmounted: { readonly type: "hidden"; }; }; readonly none: {}; }; }; }; withSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentName, componentIdentity, schema, supportsEffects, }: { Component: React.ComponentType<Props & { readonly controls: SequenceControls | undefined; }>; componentName: string; componentIdentity: string | null; schema: S; supportsEffects: boolean; }) => React.ComponentType<Props>; A: InteractiveElementComponent<"a">; Article: InteractiveElementComponent<"article">; Aside: InteractiveElementComponent<"aside">; Button: InteractiveElementComponent<"button">; Circle: InteractiveElementComponent<"circle">; Code: InteractiveElementComponent<"code">; Div: InteractiveElementComponent<"div">; Ellipse: InteractiveElementComponent<"ellipse">; Em: InteractiveElementComponent<"em">; Footer: InteractiveElementComponent<"footer">; G: InteractiveElementComponent<"g">; H1: InteractiveElementComponent<"h1">; H2: InteractiveElementComponent<"h2">; H3: InteractiveElementComponent<"h3">; H4: InteractiveElementComponent<"h4">; H5: InteractiveElementComponent<"h5">; H6: InteractiveElementComponent<"h6">; Header: InteractiveElementComponent<"header">; Label: InteractiveElementComponent<"label">; Li: InteractiveElementComponent<"li">; Line: InteractiveElementComponent<"line">; Main: InteractiveElementComponent<"main">; Nav: InteractiveElementComponent<"nav">; Ol: InteractiveElementComponent<"ol">; P: InteractiveElementComponent<"p">; Path: InteractiveElementComponent<"path">; Pre: InteractiveElementComponent<"pre">; Rect: InteractiveElementComponent<"rect">; Section: InteractiveElementComponent<"section">; Small: InteractiveElementComponent<"small">; Span: InteractiveElementComponent<"span">; Strong: InteractiveElementComponent<"strong">; Svg: InteractiveElementComponent<"svg">; Text: InteractiveElementComponent<"text">; Ul: InteractiveElementComponent<"ul">; }; export type InteractiveProps<Tag extends InteractiveTag> = InteractiveElementProps<Tag>; export {};