remotion
Version:
Make videos programmatically
602 lines (601 loc) • 24.2 kB
TypeScript
import React from 'react';
import { type InteractivitySchema } from './interactivity-schema.js';
import type { AbsoluteFillLayout, SequenceProps } from './Sequence.js';
import { type WithInteractivitySchemaOptions } from './with-interactivity-schema.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 InteractiveCropProps = Pick<SequenceProps, 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom'>;
export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps;
type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveManagedProps> & InteractiveManagedProps;
type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
/**
* @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;
};
captionsSchema: {
readonly captions: {
readonly type: "remotion-captions";
readonly default: undefined;
readonly description: "Captions";
readonly keyframable: false;
};
};
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 defaultKeyframeOutput: "perceptual-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.fontFamily': {
readonly type: "font-family";
readonly default: undefined;
readonly description: "Font family";
readonly keyframable: false;
};
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: "font-weight";
readonly default: 400;
readonly description: "Font weight";
readonly keyframable: false;
};
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;
};
};
backgroundSchema: {
readonly 'style.backgroundColor': {
readonly type: "color";
readonly default: "transparent";
readonly description: "Color";
};
};
borderSchema: {
readonly 'style.borderWidth': {
readonly type: "number";
readonly default: undefined;
readonly min: 0;
readonly step: 1;
readonly description: "Border width";
readonly hiddenFromList: false;
};
readonly 'style.borderStyle': {
readonly type: "enum";
readonly default: "none";
readonly description: "Border style";
readonly variants: {
readonly none: {};
readonly hidden: {};
readonly solid: {};
readonly dashed: {};
readonly dotted: {};
readonly double: {};
readonly groove: {};
readonly ridge: {};
readonly inset: {};
readonly outset: {};
};
};
readonly 'style.borderColor': {
readonly type: "color";
readonly default: undefined;
readonly description: "Border color";
};
};
borderRadiusSchema: {
readonly 'style.borderRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Border radius";
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly 'style.borderTopLeftRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Top left radius";
readonly hiddenFromList: false;
};
readonly 'style.borderTopRightRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Top right radius";
readonly hiddenFromList: false;
};
readonly 'style.borderBottomRightRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Bottom right radius";
readonly hiddenFromList: false;
};
readonly 'style.borderBottomLeftRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Bottom left radius";
readonly hiddenFromList: false;
};
};
cropSchema: {
readonly cropLeft: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop left";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly cropRight: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop right";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly cropTop: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop top";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly cropBottom: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop bottom";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
};
svgPaintSchema: {
readonly color: {
readonly type: "color";
readonly default: undefined;
readonly description: "Current color";
};
readonly stroke: {
readonly type: "color";
readonly default: "none";
readonly description: "Stroke";
};
readonly strokeWidth: {
readonly type: "number";
readonly default: 1;
readonly description: "Stroke width";
readonly min: 0;
readonly step: 1;
readonly hiddenFromList: false;
};
readonly fill: {
readonly type: "color";
readonly default: undefined;
readonly description: "Fill";
};
};
svgStrokeSchema: {
readonly color: {
readonly type: "color";
readonly default: undefined;
readonly description: "Current color";
};
readonly stroke: {
readonly type: "color";
readonly default: "none";
readonly description: "Stroke";
};
readonly strokeWidth: {
readonly type: "number";
readonly default: 1;
readonly description: "Stroke width";
readonly min: 0;
readonly step: 1;
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 keyframable: false;
};
readonly postmountFor: {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly hiddenFromList: true;
readonly keyframable: false;
};
};
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 defaultKeyframeOutput: "perceptual-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 'style.borderWidth': {
readonly type: "number";
readonly default: undefined;
readonly min: 0;
readonly step: 1;
readonly description: "Border width";
readonly hiddenFromList: false;
};
readonly 'style.borderStyle': {
readonly type: "enum";
readonly default: "none";
readonly description: "Border style";
readonly variants: {
readonly none: {};
readonly hidden: {};
readonly solid: {};
readonly dashed: {};
readonly dotted: {};
readonly double: {};
readonly groove: {};
readonly ridge: {};
readonly inset: {};
readonly outset: {};
};
};
readonly 'style.borderColor': {
readonly type: "color";
readonly default: undefined;
readonly description: "Border color";
};
readonly 'style.borderRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Border radius";
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly 'style.borderTopLeftRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Top left radius";
readonly hiddenFromList: false;
};
readonly 'style.borderTopRightRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Top right radius";
readonly hiddenFromList: false;
};
readonly 'style.borderBottomRightRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Bottom right radius";
readonly hiddenFromList: false;
};
readonly 'style.borderBottomLeftRadius': {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly description: "Bottom left radius";
readonly hiddenFromList: false;
};
readonly 'style.backgroundColor': {
readonly type: "color";
readonly default: "transparent";
readonly description: "Color";
};
readonly premountFor: {
readonly type: "number";
readonly default: 0;
readonly description: "Premount For";
readonly min: 0;
readonly step: 1;
readonly hiddenFromList: false;
readonly keyframable: false;
};
readonly postmountFor: {
readonly type: "number";
readonly default: 0;
readonly min: 0;
readonly step: 1;
readonly hiddenFromList: true;
readonly keyframable: false;
};
readonly cropLeft: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop left";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly cropRight: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop right";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly cropTop: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop top";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
readonly cropBottom: {
readonly type: "number";
readonly default: 0;
readonly description: "Crop bottom";
readonly min: 0;
readonly max: 1;
readonly step: 0.01;
readonly hiddenFromList: false;
readonly keyframable: true;
};
};
readonly none: {};
};
};
};
withSchema: <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props>) => React.ComponentType<Props>;
_internalMakeRemotionComponentIdentity: ({ packageName, componentName, }: {
readonly packageName: RemotionComponentIdentityPackage;
readonly componentName: string;
}) => string;
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 {};