Composition Patterns

import { TransitionSeries, springTiming } from '@remotion/transitions';
import { fadeBlur, scaleFade, clipCircle } from '@oanim/core';

export const MyVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={120}>
          <Scene1 />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={fadeBlur()}
          timing={springTiming({ config: { damping: 200 }, durationInFrames: 30 })}
        />

        <TransitionSeries.Sequence durationInFrames={120}>
          <Scene2 />
        </TransitionSeries.Sequence>
      </TransitionSeries>
    </AbsoluteFill>
  );
};

<AbsoluteFill>
  <Background gradient="linear-gradient(135deg, #0a0a0a, #1a1a2e)" />
  <GlowOrb color="rgba(99, 102, 241, 0.2)" x={30} y={40} />

  <TransitionSeries>
    {/* Scenes transition on top of persistent background */}
  </TransitionSeries>
</AbsoluteFill>

<AbsoluteFill>
  {/* 1. Background */}
  <Background gradient="..." />

  {/* 2. Ambient elements */}
  <GlowOrb ... />
  <Grid ... />

  {/* 3. Overlays */}
  <Vignette intensity={0.4} />

  {/* 4. Content */}
  <SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
    {/* Animated content here */}
  </SafeArea>
</AbsoluteFill>

import { OffthreadVideo, Img, staticFile } from 'remotion';

// Video background
<OffthreadVideo
  src={staticFile('clip.mp4')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// Or image background
<Img
  src={staticFile('bg.png')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// Always add dark overlay for text readability
<AbsoluteFill style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />

import { Audio, staticFile } from 'remotion';

<AbsoluteFill>
  <Audio src={staticFile('bg-music.mp3')} volume={0.25} />
  <TransitionSeries>
    {/* Scenes — music plays across all of them */}
  </TransitionSeries>
</AbsoluteFill>