Chapter 645: Custom presentations

Core Idea

This page describes how to create your own custom effect for <TransitionSeries>.

Key Concepts

• Concept
• Boilerplate
• Example
• References
• See also

Code Examples

const StarPresentation: React.FC<
  TransitionPresentationComponentProps<CustomPresentationProps>
> = ({children, presentationDirection, presentationProgress, passedProps}) =>
  null;


type CustomPresentationProps = {
  width: number;
  height: number;
};

export const customPresentation = (
  props: CustomPresentationProps,
): TransitionPresentation<CustomPresentationProps> => {
  return {component: StarPresentation, props};
};

• What it demonstrates: Usage pattern for Custom presentations from the official docs.

Key Takeaways

1. Understand concept when working with Custom presentations.
2. Understand boilerplate when working with Custom presentations.
3. Understand example when working with Custom presentations.
4. Understand references when working with Custom presentations.
5. Understand see also when working with Custom presentations.

Connects To

• Audio Transitions: related page in the Transitions (@remotion/transitions) section.
• Make Html in Canvas Presentation: related page in the Transitions (@remotion/transitions) section.
• Presentations: related page in the Transitions (@remotion/transitions) section.