Chapter 652: iris()

Core Idea

A presentation where the next scene is revealed through a circular mask that expands from the center outward, similar to a camera iris opening.

Key Concepts

• Example
• API
• width
• height
• outerEnterStyle?
• outerExitStyle?
• innerEnterStyle?
• innerExitStyle?

Code Examples

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({children, color}) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 200,
        color: 'white',
      }}
    >
      {children}
    </AbsoluteFill>
  );
};

const BasicTransition = () => {
  const {width, height} = useVideoConfig();

  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition presentation={iris({width, height})} timing={linearTiming({durationInFrames: 30})} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

• What it demonstrates: Usage pattern for iris() from the official docs.

Key Takeaways

1. Understand example when working with iris().
2. Understand api when working with iris().
3. Understand width when working with iris().
4. Understand height when working with iris().
5. Understand outerenterstyle? when working with iris().

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.