🎬 Vidosy - Professional Video Generation Tool

August 27, 2025 · View on GitHub

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

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