10x-Brolls

Professional video production with brand management using Remotion.

Features

• Brand Management: Create and manage brand configurations with colors, typography, and assets
• Project System: Organize videos by project, each linked to a brand
• Remotion Studio: Full video editing with visual prop editing
• Platform Presets: Pre-configured exports for YouTube, TikTok, Instagram, Twitter
• Claude Code Plugin: AI-powered video production workflow

Installation

As a Claude Code Plugin

# Add the marketplace
/plugin → Discover → Add marketplace → https://github.com/10x-brolls/10x-brolls

# Install the plugin
claude plugin install 10x-brolls

Manual Setup

# Clone the repository
git clone https://github.com/10x-brolls/10x-brolls.git
cd 10x-brolls

# Install dependencies
npm install

# Start the interactive CLI
npm run start

Quick Start

Using Claude Code Skills

/10x-brolls:new-brand    # Create a brand with colors and fonts
/10x-brolls:new-project  # Create a video project
/10x-brolls:studio       # Launch Remotion Studio
/10x-brolls:render       # Export your video

Using npm Scripts

npm run start           # Interactive project setup
npm run studio          # Launch Remotion Studio
npm run render          # Render a composition
npm run brand:create    # Create a new brand
npm run project:create  # Create a new project

Available Skills

Skill	Description
/10x-brolls:new-project	Create a new video project with brand setup
/10x-brolls:new-brand	Create brand with colors, fonts, assets
/10x-brolls:studio	Launch Remotion Studio
/10x-brolls:render	Render composition to video file
/10x-brolls:add-composition	Create new video composition
/10x-brolls:add-asset	Add logo/audio/video to brand

Project Structure

10x-brolls/
├── .claude-plugin/
│   └── plugin.json          # Plugin manifest
├── skills/                   # Claude Code skills
│   ├── 10x-brolls/          # Main knowledge skill
│   │   ├── SKILL.md
│   │   └── rules/           # Documentation
│   ├── new-project/
│   ├── new-brand/
│   ├── studio/
│   ├── render/
│   ├── add-composition/
│   └── add-asset/
├── hooks/
│   └── hooks.json           # Plugin hooks
├── src/
│   ├── compositions/        # Video compositions
│   ├── components/          # Reusable components
│   ├── lib/                 # Brand manager
│   └── hooks/               # React hooks
├── public/                  # Static assets
├── cli/                     # CLI tool
└── remotion.config.ts       # Remotion configuration

Brand Configuration

Each brand includes:

• Colors: Primary, secondary, accent, background, text
• Typography: Font families, sizes, weights
• Assets: Logos, audio, video, images
• Video Settings: Default dimensions, FPS, platform presets
• Animation Settings: Easing, spring configs, transitions

Compositions

Built-in Compositions

ID	Description	Dimensions
branded-intro	Animated intro with brand colors	1920x1080
text-slide	Text content slide	1920x1080
video-overlay	Video with text overlay	1920x1080
logo-reveal	Animated logo reveal	1920x1080

Platform Presets

ID	Platform	Dimensions
youtube-intro	YouTube	1920x1080
tiktok-intro	TikTok/Reels	1080x1920
instagram-square	Instagram	1080x1080
twitter-video	Twitter/X	1280x720

Rendering

# Basic render
npx remotion render src/index.ts branded-intro out/video.mp4

# Platform-specific
npm run render:youtube
npm run render:tiktok
npm run render:instagram

# With custom options
npx remotion render src/index.ts branded-intro out/video.mp4 --codec=h264 --crf=18

Documentation

See the skills/10x-brolls/rules/ directory for detailed documentation:

• Brand Setup
• Compositions
• Animations
• Assets
• Audio
• Transitions
• Rendering
• Video Settings
• Components

License

MIT