create-openvideo

Scaffold a modern Pixi.js video-as-code project for human creators & AI agents.
Get started with OpenVideo in seconds with pre-configured TypeScript, Vite HMR, and the live WebGL Studio.

🚀 Quickstart

Create a new video project using your favorite package manager:

# Using pnpm (Recommended)
pnpm create openvideo my-video-project

# Using npm
npm create openvideo@latest my-video-project

# Using npx
npx create-openvideo my-video-project

# Using yarn or bun
yarn create openvideo my-video-project
bun create openvideo my-video-project

🎨 Available Templates

Specify a template with the --template (or -t) flag:

pnpm create openvideo promo-video --template vertical

| Template | Aspect Ratio | Description | | :--- | :--- | :--- | | starter | 16:9 (1920x1080) | Kinetic typography, camera shake, audio track, and HUD metadata overlay. | | blank | 16:9 (1920x1080) | Clean canvas with zero clutter ready for custom motion design. | | vertical | 9:16 (1080x1920) | High-energy portrait video for TikTok, Instagram Reels, and YouTube Shorts. |

📁 Generated Project Structure

my-video-project/
├── src/
│   ├── projects/
│   │   ├── welcome.video.ts    # Example video composition (defineVideo)
│   │   └── index.ts            # Auto-discovery index
│   └── main.ts                 # Studio mount entrypoint
├── AGENTS.md                   # The AI guide for Claude Code, opencode & ChatGPT
├── CLAUDE.md                   # Agent quick-reference rules
├── package.json                # Pre-configured openvideo scripts
├── tsconfig.json               # Modern TypeScript config
└── vite.config.ts              # Vite configuration with HMR

⚡ Next Steps & Scripts

Once scaffolded, navigate into the project and install dependencies:

cd my-video-project
pnpm install

Run any of the included scripts:

# 1. Start the live WebGL Studio (http://localhost:5173)
pnpm run dev

# 2. Fast headless validation in terminal (verifies 0 errors in ms)
pnpm run check

# 3. Capture a still frame snapshot for visual inspection
pnpm run still --time 1.5s -o preview.png

# 4. Export the complete MP4 video using hardware WebCodecs
pnpm run build
# or:
pnpm run export

🤖 AI Vibecoding Workflow

OpenVideo projects include AGENTS.md and CLAUDE.md pre-tuned for AI coding assistants:

1. Prompt your agent: "Create a 5-second teaser announcing our product with bold typography."
2. Agent writes the code: In src/projects/<name>.video.ts.
3. Agent self-verifies:
   • Step 1: pnpm run check (millisecond dry-run detects syntax or transform bugs).
   • Step 2: pnpm run still --time 1.5s -o preview.png (agent inspects visual rendering).
   • Step 3: pnpm run export (renders final .mp4 video).

📄 License

MIT © OpenVideo Contributors