Chapter 648: dreamyZoom()

Core Idea

A presentation that zooms and rotates through a white flash between scenes.

Key Concepts

• Example
• API
• rotation?
• scale?
• Compatibility
• Credits
• See also

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 = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={dreamyZoom({rotation: 6, scale: 1.2})}
        timing={linearTiming({durationInFrames: 30})}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

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

Key Takeaways

1. Understand example when working with dreamyZoom().
2. Understand api when working with dreamyZoom().
3. Understand rotation? when working with dreamyZoom().
4. Understand scale? when working with dreamyZoom().
5. Understand compatibility when working with dreamyZoom().

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.