# MainComp.tsx Documentation

## Overview

`MainComp.tsx` is a comprehensive Remotion composition component that supports three scene types with dynamic frame-based sequencing and the Ken Burns effect for images.

### Video Configuration
- **Resolution**: 1920×1080 (Full HD)
- **Frame Rate**: 60 fps
- **Frame Duration Calculation**: `ceil(seconds × 60)`

## Scene Types

### 1. Kinetic Scenes (`type: 'kinetic'`)
Text-based animations with fade-in and scale effects.

**Properties:**
```typescript
{
  id: string;              // Unique identifier
  type: 'kinetic';
  text: string;            // Text content
  duration: number;        // Duration in seconds
  fontSize?: number;       // Default: 64
  fontFamily?: string;     // Default: Arial
  color?: string;          // Text color (hex/rgb/named)
  backgroundColor?: string; // Background color
}
```

**Animation:**
- Opacity: 0 → 1 over first 10% of duration
- Scale: 0.8 → 1.0 over first 15% of duration

**Example:**
```typescript
{
  id: 'intro',
  type: 'kinetic',
  text: 'Welcome to Video Magic',
  duration: 3,
  fontSize: 72,
  color: '#ffffff',
  backgroundColor: '#1e1e2e',
}
```

### 2. Screenshot Scenes (`type: 'screenshot'`)
Images with Ken Burns pan-and-zoom effect applied.

**Properties:**
```typescript
{
  id: string;              // Unique identifier
  type: 'screenshot';
  imagePath: string;       // Path or URL to image
  duration: number;        // Duration in seconds
  alt?: string;            // Alt text for accessibility
}
```

**Ken Burns Animation:**
- **Scale**: 1.0 → 1.05 (5% zoom over duration)
- **Pan**: Vertical movement up to 8% of height
- **Transform Origin**: Center center for smooth effect

**Example:**
```typescript
{
  id: 'feature-image',
  type: 'screenshot',
  imagePath: staticFile('product.jpg'),
  duration: 5,
  alt: 'Product Feature',
}
```

### 3. Caption Scenes (`type: 'caption'`)
Text overlays with fade-in/fade-out effects, can be positioned at top, middle, or bottom.

**Properties:**
```typescript
{
  id: string;              // Unique identifier
  type: 'caption';
  text: string;            // Caption text
  duration: number;        // Duration in seconds
  fontSize?: number;       // Default: 36
  fontFamily?: string;     // Default: Arial
  color?: string;          // Text color
  backgroundColor?: string; // Background color (e.g., 'rgba(0,0,0,0.6)')
  position?: string;       // 'top' | 'middle' | 'bottom' (default: 'bottom')
}
```

**Animation:**
- Fade in: 0 → 1 over first 20% of duration
- Fade out: 1 → 0 over last 20% of duration
- Stays visible in middle 60% of duration

**Example:**
```typescript
{
  id: 'caption-1',
  type: 'caption',
  text: 'Amazing Ken Burns Effect Applied',
  duration: 5,
  fontSize: 48,
  color: '#ffffff',
  position: 'bottom',
}
```

## Component API

### MainComp
Main composition component that orchestrates all scenes.

```typescript
<MainComp scenes={sceneArray} />
```

### Helper Functions

#### `secondsToFrames(seconds, fps)`
Converts duration in seconds to frame count.
```typescript
const frames = secondsToFrames(3, 60); // Returns 180
```

#### `getTotalDurationFrames(scenes)`
Calculates total video duration in frames from all scenes.
```typescript
const totalFrames = getTotalDurationFrames(exampleScenes);
```

#### `useMainCompConfig(scenes)`
Hook to generate Remotion composition configuration.
```typescript
const config = useMainCompConfig(myScenes);
// Returns: { id, component, durationInFrames, fps, width, height }
```

## Usage Examples

### Basic Usage
```typescript
import MainComp from './components/MainComp';
import { Scene } from './types/Scene';

const myScenes: Scene[] = [
  {
    id: 'intro',
    type: 'kinetic',
    text: 'My Video',
    duration: 3,
  },
  {
    id: 'image',
    type: 'screenshot',
    imagePath: 'path/to/image.jpg',
    duration: 5,
  },
];

export default () => <MainComp scenes={myScenes} />;
```

### With Express/Node Server
```typescript
import { render } from '@remotion/renderer';
import { mainCompositionConfig } from './components/MainComp';

app.post('/render', async (req, res) => {
  const { scenes } = req.body;
  
  const config = useMainCompConfig(scenes);
  
  await render({
    composition: config,
    serveUrl: 'http://localhost:3000',
    codec: 'h264',
    outputLocation: 'output.mp4',
  });
  
  res.json({ success: true });
});
```

## Notes on Ken Burns Effect

The Ken Burns effect creates a **cinematic pan and zoom** by:

1. **Starting** with the full image at normal scale (1.0)
2. **Gradually zooming in** to 1.05× (5% magnification)
3. **Panning vertically** upward to create movement across static images
4. **Smooth interpolation** ensures fluid motion

This effect is particularly useful for:
- Slideshow presentations
- Photo galleries
- Documentary-style videos
- Marketing content
- Video essays

## Performance Considerations

- **Frame calculations** are memoized for efficiency
- Each scene's duration is converted to frames at composition time
- Ken Burns effects use GPU-accelerated transforms
- For videos > 30 minutes, consider splitting into multiple compositions

## Customization

Modify these constants in `MainComp.tsx` to change output:
```typescript
export const VIDEO_WIDTH = 1920;    // Change to 3840 for 4K
export const VIDEO_HEIGHT = 1080;   // Change to 2160 for 4K
export const VIDEO_FPS = 60;        // Change to 24 or 30 for different frame rates
```