# Scene Types Documentation

This document describes all available scene types for creating videos with this Remotion project. Each scene type has specific properties and visual effects.

## Audio Configuration

You can specify custom audio for your video by adding these properties at the root level of your JSON:

- `audioUrl` (string, optional): URL of the audio file to use. Supports MP3 format.
  - Can be a remote URL (e.g., `https://cdn1.suno.ai/a5e2198a-f352-4abb-9a24-7f81b143ded3.mp3`)
  - If not specified, defaults to the local `music.mp3` file
- `audioVolume` (number, optional): Volume level from 0 to 1 (default: 0.5)

**Example**:

```json
{
  "audioUrl": "https://cdn1.suno.ai/a5e2198a-f352-4abb-9a24-7f81b143ded3.mp3",
  "audioVolume": 0.5,
  "scenes": [...]
}
```

## 1. image-with-text

**Description**: Displays static text over a background image with a fade-in effect.

**Props**:

- `backgroundImage` (string, required): URL of the background image
- `text` (string, required): The text to display
- `duration` (number, required): Duration of the scene in seconds
- `effect` (object, optional): Object with properties:
  - `type` (string): Effect type (currently unused)
  - `sparkles` (boolean): Whether to show sparkles (currently unused)

**Visual Behavior**:

- Text appears in the center of the screen
- White text with shadow for readability
- Background image fades in over the first 20% of the scene duration
- Font size: 80px

**Example**:

```json
{
  "type": "image-with-text",
  "backgroundImage": "https://example.com/image.jpg",
  "text": "Hello World",
  "duration": 3
}
```

## 2. image-with-rolling-text

**Description**: Displays text that scrolls vertically from bottom to top over a background image.

**Props**:

- `backgroundImage` (string, required): URL of the background image
- `text` (string, required): The text to display
- `duration` (number, required): Duration of the scene in seconds

**Visual Behavior**:

- Text starts below the screen and scrolls up
- Continuous vertical movement throughout the scene
- White text with shadow
- Font size: 60px

**Example**:

```json
{
  "type": "image-with-rolling-text",
  "backgroundImage": "https://example.com/image.jpg",
  "text": "This text rolls upward",
  "duration": 4
}
```

## 3. image-with-aura

**Description**: Displays text with a pulsating aura effect over a background image.

**Props**:

- `backgroundImage` (string, required): URL of the background image
- `text` (string, optional): The text to display
- `duration` (number, required): Duration of the scene in seconds

**Visual Behavior**:

- Blue glowing aura that pulses every 0.5 seconds
- Aura scales from 1x to 1.2x size
- Text appears with a spring animation
- White text with shadow
- Font size: 64px

**Example**:

```json
{
  "type": "image-with-aura",
  "backgroundImage": "https://example.com/image.jpg",
  "text": "Glowing Text",
  "duration": 3
}
```

## 4. image-with-marquee-text

**Description**: Displays text that scrolls horizontally from right to left like a news ticker.

**Props**:

- `backgroundImage` (string, required): URL of the background image
- `text` (string, required): The text to display
- `duration` (number, required): Duration of the scene in seconds
- `speed` (number, optional): Scroll speed multiplier (default: 1)
  - Values > 1 = faster
  - Values < 1 = slower
- `fontSize` (number, optional): Font size in pixels (default: 60)

**Visual Behavior**:

- Text enters from the right edge and exits on the left
- Continuous horizontal movement
- White text with shadow
- Bold font weight

**Example**:

```json
{
  "type": "image-with-marquee-text",
  "backgroundImage": "https://example.com/image.jpg",
  "text": "Breaking News: This scrolls horizontally",
  "duration": 5,
  "speed": 1.5,
  "fontSize": 70
}
```

## 5. image-with-rainbow-text

**Description**: Displays words with colorful rainbow effects and various layout patterns.

**Props**:

- `backgroundImage` (string, optional): URL of the background image
- `words` (array, required): Array of word objects, each containing:
  - `text` (string): The word to display
  - `delay` (number): Delay in seconds before the word appears
- `duration` (number, required): Duration of the scene in seconds
- `layout` (string, optional): Layout pattern for words. Options:
  - `"left-diagonal"`: Words arranged diagonally from top-left to bottom-right
  - `"right-diagonal"`: Words arranged diagonally from top-right to bottom-left
  - `"vertical"`: Words stacked vertically
  - `"horizontal"`: Words arranged horizontally
  - `"swirl"`: Words arranged in a circular/spiral pattern
- `imageAnimation` (string, optional): Background image animation. Options:
  - `"zoomIn"`: Image slowly zooms in
  - `"zoomOut"`: Image slowly zooms out
  - `"rolling"`: Image scrolls vertically
  - `"pulse"`: Image pulses in size
  - `"fade"`: Image fades in
  - `"pan"`: Image pans horizontally
  - `"kenBurns"`: Ken Burns effect (zoom and pan)
  - `null`: No animation

**Visual Behavior**:

- Each word appears with its assigned color from the rainbow palette
- Words fade in based on their delay values
- Font size: 48px
- Bold, italic text with shadow
- Words are positioned to avoid screen edges

**Example**:

```json
{
  "type": "image-with-rainbow-text",
  "backgroundImage": "https://example.com/image.jpg",
  "words": [
    { "text": "Rainbow", "delay": 0 },
    { "text": "colored", "delay": 0.5 },
    { "text": "words", "delay": 1 }
  ],
  "duration": 4,
  "layout": "swirl",
  "imageAnimation": "zoomIn"
}
```

## 6. instagram-comment

**Description**: Simulates Instagram-style comments with profile pictures and animated text.

**Props**:

- `backgroundImage` (string, required): URL of the background image
- `words` (array, required): Array of word objects, each containing:
  - `text` (string): The comment text
  - `delay` (number): Delay in seconds before the comment appears
  - `style` (object, optional): CSS styles for the comment
- `imageAnimation` (string, optional): Background animation. Options:
  - `"zoomIn"`: Image zooms in
  - `"rolling"`: Image scrolls vertically
  - `null`: No animation
- `textAnimation` (string, optional): Text animation. Options:
  - `"typewriter"`: Text appears character by character
  - `"bounceIn"`: Comments bounce in
  - `null`: Fade in

**Visual Behavior**:

- Each comment appears as a chat bubble with a profile picture
- Profile pictures are randomly selected emojis
- Comments slide up from bottom
- White background bubbles with black text
- Staggered appearance based on delays

**Example**:

```json
{
  "type": "instagram-comment",
  "backgroundImage": "https://example.com/image.jpg",
  "words": [
    { "text": "Amazing!", "delay": 0 },
    { "text": "Love this ❤️", "delay": 1 },
    { "text": "So cool!", "delay": 2 }
  ],
  "duration": 5,
  "textAnimation": "bounceIn"
}
```

## 7. polaroid-with-texts

**Description**: Creates a polaroid photo effect with animated text labels.

**Props**:

- `title` (string, required): Title text displayed below the image
- `backgroundImage` (string, required): URL of the image inside the polaroid
- `words` (array, required): Array of word objects for labels, each containing:
  - `text` (string): The label text
  - `delay` (number): Delay in seconds before the label appears
- `duration` (number, required): Duration of the scene in seconds
- `animationStyle` (string, optional): Polaroid entrance animation. Options:
  - `"drop"`: Drops and rotates into place
  - `"fade"`: Fades in
  - `"slide"`: Slides in from the side
  - `"zoom"`: Zooms in from small to full size
  - `null`: Spring animation
- `backgroundColor` (string, optional): Background color (default: "#f3f3f3")

**Visual Behavior**:

- White polaroid frame with shadow
- Image displayed in the main area
- Title text below the image in handwritten style
- Word labels appear around the polaroid with connecting lines
- Labels positioned to avoid overlapping

**Example**:

```json
{
  "type": "polaroid-with-texts",
  "title": "Summer Memories",
  "backgroundImage": "https://example.com/photo.jpg",
  "words": [
    { "text": "Beach day", "delay": 0.5 },
    { "text": "Best friends", "delay": 1 },
    { "text": "2024", "delay": 1.5 }
  ],
  "duration": 5,
  "animationStyle": "drop",
  "backgroundColor": "#f0f0f0"
}
```

## 8. suno-ending

**Description**: A simple ending screen with "MADE ON SUNO" text and username.

**Props**:

- `username` (string, required): Username to display (without @)
- `duration` (number, required): Duration of the scene in seconds

**Visual Behavior**:

- Black background
- "MADE ON SUNO" in large white text (80px)
- Username displayed below with @ prefix (36px)
- Subtle fade-in over 0.5 seconds
- Centered layout

**Example**:

```json
{
  "type": "suno-ending",
  "username": "johndoe",
  "duration": 3
}
```

## General Scene Properties

All scenes share these common requirements:

- `type` (string): The scene type identifier
- `duration` (number): How long the scene displays in seconds

## Usage Tips

1. **Timing**: Consider the duration needed for text readability. Longer text needs more time.

2. **Transitions**: Scenes play sequentially without built-in transitions. Plan your scene order accordingly.

3. **Image URLs**: Use high-resolution images (1920x1080 recommended) for best quality.

4. **Text Length**: Keep text concise for better visual impact. Long text may not fit well on screen.

5. **Performance**: Complex animations (like rainbow text with many words) may impact rendering performance.

6. **Audio Sync**: The project includes background music. Time your scenes to match musical beats or phrases.

## Example Video Composition

```json
{
  "scenes": [
    {
      "type": "image-with-text",
      "backgroundImage": "https://example.com/intro.jpg",
      "text": "Welcome",
      "duration": 2
    },
    {
      "type": "image-with-marquee-text",
      "backgroundImage": "https://example.com/bg.jpg",
      "text": "Breaking News: Amazing things ahead!",
      "duration": 4,
      "speed": 1.2
    },
    {
      "type": "polaroid-with-texts",
      "title": "Our Journey",
      "backgroundImage": "https://example.com/photo.jpg",
      "words": [
        { "text": "Adventure", "delay": 0.5 },
        { "text": "Discovery", "delay": 1 }
      ],
      "duration": 5,
      "animationStyle": "drop"
    },
    {
      "type": "suno-ending",
      "username": "creator",
      "duration": 3
    }
  ],
  "totalDuration": 14
}
```