> ## Documentation Index
> Fetch the complete documentation index at: https://docs.open-animate.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Composition Patterns
> Multi-scene architecture, layering, and duration guidelines
## Multi-scene architecture
### TransitionSeries (recommended)
Use `TransitionSeries` from `@remotion/transitions` for videos with multiple scenes:
```tsx theme={null}
import { TransitionSeries, springTiming } from '@remotion/transitions';
import { fadeBlur, scaleFade, clipCircle } from '@oanim/core';
export const MyVideo: React.FC = () => {
return (
);
};
```
### When to use Sequence vs TransitionSeries
| Pattern | Use case |
| ------------------ | --------------------------------------------- |
| `TransitionSeries` | Multiple scenes with transitions between them |
| `` | Sequencing elements within a single scene |
| Delay parameter | Staggering elements that appear together |
### Persistent background layer
For a background that stays consistent across transitions, wrap it outside the TransitionSeries:
```tsx theme={null}
{/* Scenes transition on top of persistent background */}
```
## Scene structure pattern
Each scene should follow this layering:
```tsx theme={null}
{/* 1. Background */}
{/* 2. Ambient elements */}
{/* 3. Overlays */}
{/* 4. Content */}
{/* Animated content here */}
```
## Duration guidelines
| Video type | Total duration | Scenes | Per scene |
| -------------- | -------------- | ------ | --------- |
| Social clip | 5-10s | 2-3 | 2-4s |
| Product launch | 15-30s | 4-6 | 3-5s |
| Explainer | 30-60s | 6-10 | 4-6s |
| Demo | 30-90s | 5-12 | 5-8s |
## Transition timing
* **Fast transitions** (15-20 frames): energetic, snappy feel
* **Medium transitions** (25-35 frames): professional, smooth
* **Slow transitions** (40-60 frames): cinematic, dramatic
Use `springTiming` with high damping (200) for smooth transitions. Use `linearTiming` for constant-speed transitions.
## Media layers
When using AI-generated media (images, video, audio), layer them into the scene structure. See the full [Working with Media](/guides/media) guide for generation commands and detailed examples.
### Video or image background
```tsx theme={null}
import { OffthreadVideo, Img, staticFile } from 'remotion';
// Video background
// Or image background
// Always add dark overlay for text readability
```
### Global audio track
Place `
})
// Always add dark overlay for text readability