🎬 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.