🎬 Vidosy - Professional Video Generation Tool

Create stunning videos programmatically with Remotion-powered automation

Vidosy is a powerful, configuration-driven video generation tool that leverages Remotion to create professional-quality videos with minimal effort. Define your video structure in JSON, add your media assets, and let Vidosy handle the rest.

✨ Features

🎥 Multi-Media Backgrounds

• Video: MP4, MOV, AVI, MKV, WebM with automatic scaling
• Image: JPG, PNG, GIF, WebP with smart positioning
• Color: Solid color backgrounds with hex codes
• Smart Scaling: Automatic object-fit: cover for perfect framing

🎵 Advanced Audio System

• Background Music: Continuous playback with fade in/out effects
• Scene Narration: Individual audio tracks for each scene
• Audio Layering: Simultaneous playback of multiple audio sources
• Volume Control: Independent volume control per audio source
• Timing Control: Precise start time control for scene audio

🎨 Dynamic Scene Management

• Smooth Transitions: Fade in/out animations with scale effects
• Flexible Timing: Configurable scene duration and sequencing
• Text Overlays: Customizable text with positioning and styling
• Scene Composition: Mix and match different background types

⚙️ Configuration-Driven

• JSON Configuration: Simple, human-readable video definitions
• Schema Validation: Type-safe configuration with Zod
• Quality Presets: Low, medium, and high quality options
• Multiple Formats: MP4, MOV, AVI output support

🚀 Quick Start

1. Installation

# Clone the repository
git clone <repository-url>
cd vidosy

# Install dependencies
npm install

# Build the project
npm run build

2. Create Your First Video

Create a vidosy.json configuration file:

{
  "video": {
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 15
  },
  "audio": {
    "background": "background-music.mp3",
    "volume": 0.3,
    "fadeIn": 2,
    "fadeOut": 3
  },
  "scenes": [
    {
      "id": "intro",
      "duration": 5,
      "background": {
        "type": "image",
        "value": "intro-background.png"
      },
      "text": {
        "content": "Welcome to Vidosy",
        "fontSize": 72,
        "color": "#ffffff",
        "position": "center"
      },
      "audio": {
        "file": "intro-narration.mp3",
        "volume": 0.9
      }
    }
  ]
}

3. Add Your Assets

Place your media files in the public/ directory:

public/
├── background-music.mp3
├── intro-background.png
└── intro-narration.mp3

4. Generate Your Video

# Using npm script
npm run render

# Using CLI directly
npx vidosy render

# With custom config file
npx vidosy render my-video.json

# With custom output and quality
npx vidosy render -o my-video.mp4 -q high

📖 Configuration Reference

Video Settings

| Property | Type | Description | Default | |----------|------|-------------|---------| | width | number | Video width in pixels | Required | | height | number | Video height in pixels | Required | | fps | number | Frames per second | Required | | duration | number | Total duration in seconds | Required |

Scene Configuration

Background Types

Color Background

{
  "background": {
    "type": "color",
    "value": "#000000"
  }
}

Image Background

{
  "background": {
    "type": "image",
    "value": "path/to/image.png"
  }
}

Video Background

{
  "background": {
    "type": "video",
    "value": "path/to/video.mp4"
  }
}

Text Overlays

{
  "text": {
    "content": "Your text here",
    "fontSize": 64,
    "color": "#ffffff",
    "position": "center"
  }
}

Position Options: top, center, bottom, left, right

Scene Audio

{
  "audio": {
    "file": "narration.mp3",
    "volume": 0.8,
    "startTime": 0
  }
}

Audio Configuration

Background Music

{
  "audio": {
    "background": "music.mp3",
    "volume": 0.4,
    "fadeIn": 2,
    "fadeOut": 3
  }
}

Properties:

• background: Path to background music file
• volume: Volume level (0.0 to 1.0)
• fadeIn: Fade in duration in seconds
• fadeOut: Fade out duration in seconds

Output Settings

{
  "output": {
    "format": "mp4",
    "quality": "high",
    "filename": "my-video.mp4"
  }
}

Quality Presets:

• low: 1280x720, 24fps
• medium: 1920x1080, 30fps
• high: 1920x1080, 60fps

🛠️ CLI Commands

Render Command

vidosy render [config] [options]

Arguments:

• config: Path to configuration file (default: vidosy.json)

Options:

• -o, --output <path>: Output file path
• -q, --quality <quality>: Video quality (low, medium, high)

Examples:

# Basic render
vidosy render

# Custom config file
vidosy render my-video.json

# Custom output and quality
vidosy render -o output.mp4 -q high

# Full path specification
vidosy render /path/to/config.json -o /path/to/output.mp4

Preview Command

vidosy preview [config]

Note: Preview functionality is coming soon! This will allow you to preview your video composition in the browser before rendering.

📁 Project Structure

vidosy/
├── src/
│   ├── cli/                 # Command-line interface
│   │   ├── commands/        # CLI commands (render, preview)
│   │   └── utils/          # CLI utilities
│   ├── remotion/            # Video composition engine
│   │   ├── components/      # React components
│   │   ├── hooks/          # Custom React hooks
│   │   └── utils/          # Remotion utilities
│   └── shared/             # Shared types and schemas
├── public/                  # Media assets directory
├── dist/                    # Compiled JavaScript output
├── bin/                     # CLI executable
└── examples/                # Example configurations

🎯 Use Cases

Marketing Videos

• Product demonstrations
• Company introductions
• Service showcases
• Promotional content

Educational Content

• Tutorial videos
• Course materials
• Training videos
• Knowledge sharing

Social Media

• Instagram stories
• YouTube intros
• TikTok content
• LinkedIn videos

Business Presentations

• Sales pitches
• Investor presentations
• Team updates
• Client demos

🔧 Development

Prerequisites

• Node.js 18.0.0 or higher
• npm or yarn package manager

Development Setup

# Install dependencies
npm install

# Start development mode
npm run dev

# Build the project
npm run build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format

Available Scripts

| Script | Description | |--------|-------------| | build | Compile TypeScript to JavaScript | | dev | Start Remotion preview mode | | render | Render video from configuration | | preview | Preview video in browser | | test | Run test suite | | lint | Check code quality | | format | Format code with Prettier |

📋 Supported Formats

Input Media

| Type | Formats | Max Size | |------|---------|----------| | Video | MP4, MOV, AVI, MKV, WebM | 500MB | | Audio | MP3, WAV, AAC, OGG, M4A | 100MB | | Images | JPG, JPEG, PNG, GIF, WebP | 50MB |

Output

| Format | Codec | Quality | |--------|-------|---------| | MP4 | H.264 | Configurable | | MOV | H.264 | Configurable | | AVI | H.264 | Configurable |

🚨 Troubleshooting

Common Issues

"Configuration file not found"

• Ensure your config file exists and has the correct path
• Check file permissions and readability

"Asset file not found"

• Verify all media files are in the public/ directory
• Check file paths in your configuration
• Ensure file extensions match exactly

"Render failed"

• Check console output for specific error messages
• Verify all required fields in your configuration
• Ensure sufficient disk space for output

"Audio not playing"

• Check audio file format compatibility
• Verify volume settings (0.0 to 1.0)
• Ensure audio files are not corrupted

Performance Tips

• Large Videos: Use lower quality settings for faster rendering
• Audio Files: Compress audio files to reduce processing time
• Image Assets: Optimize images for web use
• Output Quality: Choose appropriate quality for your use case

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details on:

• Code style and standards
• Testing requirements
• Pull request process
• Issue reporting

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Remotion Team - For the amazing video framework
• React Team - For the foundation
• Open Source Community - For the tools and libraries

Made with ❤️ by the Vidosy Team

For support, questions, or feature requests, please open an issue on GitHub.