# Video Generator with Remotion

A flexible video generation framework built with Remotion that supports multiple scene templates and dynamic content.

## Getting Started

### Installation

```console
npm install
```

### Project Structure

- `/public` - Place your media files (images, audio) and props JSON here
- `/src` - Scene templates and core components
- `/out` - Generated videos will be saved here

### Creating Videos

1. Create a `props.json` file in the `/public` directory with your video configuration:

```json
{
  "scenes": [
    {
      "type": "image-with-text",
      "backgroundImage": "https://example.com/image.jpg",
      "text": "Your Text Here",
      "duration": 4.0
    }
  ],
  "totalDuration": 4.0
}
```

2. Generate the video:

```console
npx remotion render --props=./public/instagram_props.json VideoComposition out/video.mp4
```

## Available Scene Templates

### 1. Image with Text (`image-with-text`)

Basic scene with background image and centered text overlay.

```json
{
  "type": "image-with-text",
  "backgroundImage": "url",
  "text": "Your text",
  "duration": 4.0
}
```

### 2. Rolling Text (`image-with-rolling-text`)

Text that rolls across the screen over a background image.

```json
{
  "type": "image-with-rolling-text",
  "backgroundImage": "url",
  "text": "Rolling text",
  "duration": 4.0
}
```

### 3. Image with Aura (`image-with-aura`)

Background image with a pulsing aura effect.

```json
{
  "type": "image-with-aura",
  "backgroundImage": "url",
  "text": "Optional text",
  "duration": 4.0
}
```

### 4. Instagram Comment (`instagram-comment`)

Simulates an Instagram comment appearance.

```json
{
  "type": "instagram-comment",
  "backgroundImage": "url",
  "words": [{ "delay": 0, "text": "Your comment text" }],
  "duration": 4.0
}
```

## Adding New Templates

1. Create a new component in `/src`:

```typescript
import { AbsoluteFill } from "remotion";

export const NewTemplate: React.FC<{
  // Define your props here
}> = ({ /* your props */ }) => {
  return (
    <AbsoluteFill>
      {/* Your template content */}
    </AbsoluteFill>
  );
};
```

2. Register the template in `Composition.tsx` by adding it to the scene type switch:

```typescript
case "your-template-type":
  return NewTemplate;
```

## Development

```console
npm run dev
```

This will start the Remotion preview interface where you can test your compositions.

## License

Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).