Chapter 647: dissolve()

Core Idea

A presentation that burns through the outgoing scene with a glowing edge, revealing the incoming scene where the burn has progressed past each pixel's luminance threshold.

Key Concepts

• Example
• API
• lineWidth?
• spreadColor?
• hotColor?
• pow?
• intensity?
• Compatibility

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={dissolve({})}
        timing={linearTiming({durationInFrames: 30})}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

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

Key Takeaways

1. Understand example when working with dissolve().
2. Understand api when working with dissolve().
3. Understand linewidth? when working with dissolve().
4. Understand spreadcolor? when working with dissolve().
5. Understand hotcolor? when working with dissolve().

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.