### Framework Setup Commands

Source: https://github.com/qualityunit/rendervid/blob/main/GAMING_FINAL_SUMMARY.md

Commands for checking out the feature branch, installing dependencies, and running example renders.

```bash
git checkout feature/gaming-framework-integration
```

```bash
pnpm install
pnpm build
```

```bash
pnpm run examples:render physics/falling-boxes
pnpm run examples:render particles/explosion-mvp
pnpm run examples:render animations/keyframe-cube
pnpm run examples:render behaviors/orbiting-cube
```

--------------------------------

### Run Project Examples

Source: https://github.com/qualityunit/rendervid/blob/main/GAMING_MVP_README.md

Commands to install dependencies and execute framework examples.

```bash
# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run an example
pnpm run examples:render physics/falling-boxes
```

--------------------------------

### Render Stream Starting Screen Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/streaming/stream-starting/README.md

Use this command to render the 'stream-starting' example. Ensure you have Node.js installed. This command executes a script that processes the specified template.

```bash
node examples/render-all.mjs "streaming/stream-starting"
```

--------------------------------

### Render Specific Product Showcase Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/marketing/product-showcase/README.md

Use this command to render a specific product showcase example. Ensure you have the RenderVid CLI installed and the example path is correct.

```bash
node examples/render-all.mjs "marketing/product-showcase"
```

--------------------------------

### Steps to Create a New Rendervid Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/README.md

Outlines the process for creating a new example, including directory setup, template creation, script writing, documentation, and preview generation.

```bash
1. Create a new directory under the appropriate category
2. Create a `template.json` with your Rendervid template
3. Create a `render.ts` script for rendering
4. Add a `README.md` with documentation
5. Run `pnpm run examples:generate-previews` to create preview assets
```

--------------------------------

### Get Example Tool Prompt

Source: https://github.com/qualityunit/rendervid/blob/main/skills/SKILL.md

Example prompt for loading a specific example template.

```text
"Load the Instagram story template"
```

--------------------------------

### Render Discount Reveal Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/ecommerce/discount-reveal/README.md

Use this command to render the specific Discount Reveal example. Ensure you have Node.js installed.

```bash
node examples/render-all.mjs "ecommerce/discount-reveal"
```

--------------------------------

### Render Course Intro Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/education/course-intro/README.md

Use this command to render the course intro video example. You can render a specific example or all examples.

```bash
# Render this example
node examples/render-all.mjs "education/course-intro"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Code Showcase Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/tech/code-showcase/README.md

Use this command to render the specific code showcase example. Ensure you have Node.js installed.

```bash
node examples/render-all.mjs "tech/code-showcase"
```

--------------------------------

### Render Aurora Intro Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/backgrounds/aurora-intro/README.md

Use this command to render the Aurora Intro video example. You can specify the template path or render all examples.

```bash
# Render this example
node examples/render-all.mjs "backgrounds/aurora-intro"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Progress Dashboard Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/data-visualization/progress-dashboard/README.md

Use this command to render the Progress Dashboard example. Alternatively, you can render all examples.

```bash
node examples/render-all.mjs "data-visualization/progress-dashboard"
```

```bash
node examples/render-all.mjs
```

--------------------------------

### Render Typewriter Intro Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/effects/typewriter-intro/README.md

Use this command to render a specific example of the typewriter intro effect. Ensure you have Node.js installed.

```bash
node examples/render-all.mjs "effects/typewriter-intro"
```

--------------------------------

### Generate Video for a Specific Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/GAMING_VIDEOS_TODO.md

Navigate to an example's directory and run this command to generate its video output. This is useful for testing individual examples.

```bash
cd examples/physics/falling-boxes
npx tsx render.ts
```

--------------------------------

### Render Open House Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/real-estate/open-house/README.md

Use this command to render the specific Open House example. Alternatively, run the second command to render all examples.

```bash
# Render this example
node examples/render-all.mjs "real-estate/open-house"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Menu Item Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/food/menu-item/README.md

Use this command to render the menu item video example. You can also render all examples by omitting the specific example path.

```bash
# Render this example
node examples/render-all.mjs "food/menu-item"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### GET /get_example

Source: https://github.com/qualityunit/rendervid/blob/main/skills/get_example.md

Retrieves a specific example template by its path, including the JSON template and associated documentation.

```APIDOC
## GET /get_example

### Description
Load a specific example template by path. This tool retrieves a complete example template including the JSON structure and documentation.

### Method
GET

### Endpoint
/get_example

### Parameters
#### Query Parameters
- **examplePath** (string) - Required - The path of the example template to load (e.g., "category/example-name").

### Request Example
{
  "examplePath": "getting-started/01-hello-world"
}

### Response
#### Success Response (200)
- **template** (object) - The full Rendervid JSON template.
- **readme** (string) - Documentation explaining how the template works.
- **path** (string) - The example path for reference.

#### Response Example
{
  "template": { "inputs": [...] },
  "readme": "This is a hello world template.",
  "path": "getting-started/01-hello-world"
}
```

--------------------------------

### Render All Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/RENDERING.md

Command to execute the rendering script for all available examples.

```bash
cd examples/custom-components
npx tsx render-all-examples.ts
```

--------------------------------

### Render All Filters Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/showcase/all-filters/README.md

Use this command to render the 'all-filters' example, showcasing various filter effects. Ensure you have Rendervid installed and configured.

```bash
node examples/render-all.mjs "showcase/all-filters"
```

--------------------------------

### Preview a Specific Rendervid Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/README.md

Opens a live preview of a specified example in your web browser. Replace `<example-path>` with the actual path to the example.

```bash
pnpm run examples:preview <example-path>
```

--------------------------------

### Render Conference Intro Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/events/conference-intro/README.md

Use this command to render the specific conference intro example. Alternatively, run the command without arguments to render all examples.

```bash
# Render this example
node examples/render-all.mjs "events/conference-intro"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Specific Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/3d-cube-rotation/README.md

Use this command to render the 3D cube rotation example. Specify the example path.

```bash
node examples/render-all.mjs "custom-components/3d-cube-rotation"
```

--------------------------------

### List Examples Tool Prompt

Source: https://github.com/qualityunit/rendervid/blob/main/skills/SKILL.md

Example prompt for browsing available example templates.

```text
"Show me all social media templates"
```

--------------------------------

### Render Recipe Card Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/food/recipe-card/README.md

Use this command to render the specific recipe card example. Alternatively, you can render all examples.

```bash
# Render this example
node examples/render-all.mjs "food/recipe-card"
```

```bash
# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Custom Component Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/templates/schema.md

Example configuration for referencing and loading custom components.

```json
{
  "customComponents": {
    "AnimatedChart": {
      "type": "reference",
      "reference": "AnimatedChart",
      "description": "Animated bar/line/pie chart component"
    },
    "RemoteComponent": {
      "type": "url",
      "url": "https://example.com/components/Chart.js",
      "propsSchema": {
        "type": "object",
        "properties": {
          "data": { "type": "array" },
          "chartType": { "type": "string" }
        }
      }
    }
  }
}
```

--------------------------------

### Render audio mixing example via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/advanced/audio-mixing/README.md

Commands to render the specific audio mixing example or the entire suite of examples.

```bash
# Render this example
node examples/render-all.mjs "advanced/audio-mixing"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Examples and Documentation Links

Source: https://github.com/qualityunit/rendervid/blob/main/README.md

Provides links to stunning examples and comprehensive documentation for custom components.

```APIDOC
### 9 Stunning Examples

Check out production-ready examples in `examples/custom-components/`:
- **particle-explosion** - 150+ particles with physics
- **3d-cube-rotation** - CSS 3D transforms
- **wave-visualization** - Audio spectrum analyzer
- **neon-text-effects** - Realistic neon glow
- **holographic-interface** - Sci-fi UI
- And 4 more basic examples!

### Documentation

📖 **[Complete Guide](./docs/custom-components.md)** - Full technical documentation
🤖 **[AI Agent Guide](./docs/custom-components-ai-guide.md)** - For AI agents
👨‍💻 **[Development Tutorial](./examples/custom-components/DEVELOPMENT_EXAMPLE.md)** - Step-by-step
🎬 **[Examples Overview](./examples/custom-components/README.md)** - All 9 examples
```

--------------------------------

### Install the library

Source: https://github.com/qualityunit/rendervid/blob/main/packages/cloud-rendering/README.md

Install the package via npm.

```bash
npm install @rendervid/cloud-rendering
```

--------------------------------

### Usage Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/events/webinar-promo/README.md

Examples demonstrating how to render the webinar promo.

```APIDOC
## Usage Examples

### Render a specific webinar promo
```bash
node examples/render-all.mjs "events/webinar-promo"
```

### Render all examples
```bash
node examples/render-all.mjs
```

### Customize inputs via MCP server or `template.json`
```json
{
  "inputs": {
    "topic": "Mastering AI for Business Growth",
    "description": "Learn how to leverage AI tools to scale your business",
    "speakerName": "Dr. Sarah Chen"
  }
}
```
```

--------------------------------

### Complete Composition Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/templates/transitions.md

A full composition example demonstrating multiple scenes and transitions.

```json
{
  "composition": {
    "scenes": [
      {
        "id": "intro",
        "startFrame": 0,
        "endFrame": 90,
        "backgroundColor": "#3B82F6",
        "layers": [
          {
            "id": "title",
            "type": "text",
            "position": { "x": 160, "y": 440 },
            "size": { "width": 1600, "height": 200 },
            "props": {
              "text": "Welcome",
              "fontSize": 120,
              "fontWeight": "bold",
              "color": "#FFFFFF",
              "textAlign": "center"
            }
          }
        ]
      },
      {
        "id": "content",
        "startFrame": 90,
        "endFrame": 210,
        "backgroundColor": "#8B5CF6",
        "transition": {
          "type": "fade",
          "duration": 30
        },
        "layers": [
          {
            "id": "content-title",
            "type": "text",
            "position": { "x": 160, "y": 440 },
            "size": { "width": 1600, "height": 200 },
            "props": {
              "text": "Main Content",
              "fontSize": 96,
              "fontWeight": "bold",
              "color": "#FFFFFF",
              "textAlign": "center"
            }
          }
        ]
      },
      {
        "id": "outro",
        "startFrame": 210,
        "endFrame": 300,
        "backgroundColor": "#EC4899",
        "transition": {
          "type": "slide",
          "direction": "left",
          "duration": 30,
          "easing": "easeInOutCubic"
        },
        "layers": [
          {
            "id": "outro-title",
            "type": "text",
            "position": { "x": 160, "y": 440 },
            "size": { "width": 1600, "height": 200 },
            "props": {
              "text": "Thanks!",
              "fontSize": 120,
              "fontWeight": "bold",
              "color": "#FFFFFF",
              "textAlign": "center"
            }
          }
        ]
      }
    ]
  }
}
```

--------------------------------

### MediaRecorder Encoder Setup

Source: https://github.com/qualityunit/rendervid/blob/main/docs/api/renderer-browser/encoder.md

Fallback encoder using MediaRecorder for browsers without WebCodecs support. Configure the canvas, MIME type, and bitrates. Start recording, draw frames, and then stop to get a Blob.

```typescript
import { createMediaRecorderEncoder } from '@rendervid/renderer-browser';

const encoder = createMediaRecorderEncoder({
  canvas: myCanvas,
  mimeType: 'video/webm; codecs=vp8',
  videoBitsPerSecond: 5_000_000,
});

// Start recording
encoder.start();

// Draw frames to canvas...
await drawFrame(0);
await new Promise(r => setTimeout(r, 33)); // Wait for frame time

// Stop and get output
const blob = await encoder.stop();
```

--------------------------------

### Render Webinar Promo Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/events/webinar-promo/README.md

Use this command to render the webinar promo video using the example configuration.

```bash
node examples/render-all.mjs "events/webinar-promo"
```

--------------------------------

### Render a Specific Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/getting-started/02-first-video/README.md

Use this command to render the 'First Video' example. Ensure you are in the project's root directory.

```bash
# Render this example
node examples/render-all.mjs "getting-started/02-first-video"
```

--------------------------------

### Custom Theme Example

Source: https://github.com/qualityunit/rendervid/blob/main/packages/editor/README.md

Example showing how to apply a custom theme to the editor.

```APIDOC
## Custom Theme

### Description
This example demonstrates how to apply a custom theme ('light' or 'dark') to the editor's appearance.

### Usage
Set the `theme` property within the `config` prop.

### Code Example
```typescript
<VideoEditor
  template={template}
  config={{
    theme: 'dark',
  }}
  className="my-custom-editor" // Optional: Add custom CSS classes
/>
```
```

--------------------------------

### Render Kinetic Typography Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/advanced/kinetic-typography/README.md

Use this command to render the kinetic typography example. Ensure you have Node.js installed.

```bash
node examples/render-all.mjs "advanced/kinetic-typography"
```

--------------------------------

### List Available Rendervid Examples

Source: https://github.com/qualityunit/rendervid/blob/main/docs/examples/index.md

Use this command to list all available Rendervid examples in your project.

```bash
cd rendervid
pnpm run examples:list
```

--------------------------------

### Voiceover with Trim Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/features/layer-types.md

Example of an audio layer for voiceover, including start time, volume, and fade settings.

```json
{
  "type": "audio",
  "id": "narration",
  "props": {
    "src": "voiceover.mp3",
    "startTime": 5,
    "volume": 1,
    "fadeIn": 10,
    "fadeOut": 20
  }
}
```

--------------------------------

### Render a Rendervid Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/examples/index.md

Execute this command to render a specific Rendervid example, identified by its path.

```bash
pnpm run examples:render getting-started/01-hello-world
```

--------------------------------

### Render a Specific Rendervid Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/getting-started/01-hello-world/README.md

Use this command to render the 'Hello World' example. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "getting-started/01-hello-world"
```

--------------------------------

### List All Rendervid Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/README.md

Lists all available examples in the Rendervid project. Useful for discovering available templates.

```bash
pnpm run examples:list
```

--------------------------------

### Render Product Showcase via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/3d/product-showcase/README.md

Use these commands to trigger the rendering process for the product showcase example or all available examples.

```bash
# Render this example
node examples/render-all.mjs "3d/product-showcase"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Usage Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/social-media/tiktok-video/README.md

Examples demonstrating how to render the TikTok Video template using the RenderVid CLI.

```APIDOC
## Usage

### Render a specific example

```bash
node examples/render-all.mjs "social-media/tiktok-video"
```

### Render all examples

```bash
node examples/render-all.mjs
```

### Customize inputs via MCP server or template.json

```json
{
  "inputs": {
    "hookText": "Wait for it...",
    "mainText": "The secret is...",
    "revealText": "Consistency!"
  }
}
```
```

--------------------------------

### Render Tech Startup Hero Video

Source: https://github.com/qualityunit/rendervid/blob/main/examples/tech/startup-hero/README.md

Use this command to render the specific 'tech/startup-hero' example. Alternatively, run the command without arguments to render all examples.

```bash
# Render this example
node examples/render-all.mjs "tech/startup-hero"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Instagram Story Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/social-media/instagram-story/README.md

Use this command to render a specific Instagram Story example. Ensure you have Node.js installed.

```bash
# Render this example
node examples/render-all.mjs "social-media/instagram-story"
```

--------------------------------

### Complete Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/templates/styles.md

A comprehensive example demonstrating a complex layered structure with various styles and properties.

```APIDOC
## Complete Example

### Description
Illustrates a full configuration for a layered element, including positioning, sizing, props, and styles.

### Method
N/A (Configuration Object)

### Endpoint
N/A

### Request Body
```json
{
  "id": "card",
  "type": "group",
  "position": { "x": 100, "y": 100 },
  "size": { "width": 400, "height": 300 },
  "props": { "clip": true },
  "style": {
    "backgroundColor": "rgba(255, 255, 255, 0.1)",
    "backdropBlur": "lg",
    "borderRadius": 20,
    "borderWidth": 1,
    "borderColor": "rgba(255, 255, 255, 0.2)",
    "boxShadow": "0 25px 50px rgba(0, 0, 0, 0.25)",
    "padding": 24
  },
  "children": [
    {
      "id": "card-title",
      "type": "text",
      "position": { "x": 0, "y": 0 },
      "size": { "width": 352, "height": 40 },
      "props": { "text": "Glassmorphism Card" },
      "style": {
        "fontSize": 24,
        "fontWeight": "bold",
        "textColor": "#FFFFFF",
        "textShadow": "0 2px 4px rgba(0,0,0,0.2)"
      }
    },
    {
      "id": "card-body",
      "type": "text",
      "position": { "x": 0, "y": 60 },
      "size": { "width": 352, "height": 180 },
      "props": { "text": "This card uses glass morphism styling with backdrop blur and transparency." },
      "style": {
        "fontSize": 16,
        "lineHeight": 1.6,
        "textColor": "rgba(255, 255, 255, 0.8)"
      }
    }
  ]
}
```
```

--------------------------------

### Render product comparison via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/ecommerce/product-comparison/README.md

Use these commands to render the specific product comparison example or all available examples.

```bash
# Render this example
node examples/render-all.mjs "ecommerce/product-comparison"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render YouTube Lower Third Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/youtube-lower-third/README.md

Use this command to render the specific YouTube lower third example. Ensure you have Node.js installed.

```bash
node examples/render-all.mjs "youtube-lower-third"
```

--------------------------------

### Render Specific Brand Reveal Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/cinematic/brand-reveal/README.md

Use this command to render the 'cinematic/brand-reveal' example. Ensure you have Node.js installed and the RenderVid project set up.

```bash
# Render this example
node examples/render-all.mjs "cinematic/brand-reveal"
```

--------------------------------

### Counter Animation Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/features/layer-types.md

Example of a custom layer displaying a counter animation using a 'Counter' component with start, end, and duration values.

```json
{
  "type": "custom",
  "id": "counter",
  "position": { "x": 960, "y": 540 },
  "size": { "width": 400, "height": 200 },
  "customComponent": {
    "name": "Counter",
    "props": {
      "from": 0,
      "to": 100,
      "duration": 60
    }
  }
}
```

--------------------------------

### Render Specific App Feature Showcase

Source: https://github.com/qualityunit/rendervid/blob/main/examples/social/app-feature-showcase/README.md

Use this command to render a specific example of the app feature showcase. Ensure you have the necessary RenderVid examples installed.

```bash
node examples/render-all.mjs "social/app-feature-showcase"
```

--------------------------------

### Basic Video Generation Example

Source: https://github.com/qualityunit/rendervid/blob/main/skills/render_video.md

Demonstrates a simple video generation request with a 'Hello World' template. This example sets up a basic video output with text content.

```json
{
  "template": {
    "name": "Hello World",
    "output": {
      "type": "video",
      "width": 1920,
      "height": 1080,
      "fps": 30,
      "duration": 5
    },
    "composition": {
      "scenes": [{
        "id": "main",
        "startFrame": 0,
        "endFrame": 150,
        "layers": [{
          "id": "text",
          "type": "text",
          "props": { "text": "Hello World!" }
        }]
      }]
    }
  },
  "inputs": {},
  "format": "mp4",
  "quality": "high"
}
```

--------------------------------

### GET /list_examples

Source: https://github.com/qualityunit/rendervid/blob/main/skills/list_examples.md

Retrieves a list of available Rendervid template examples, with an optional filter by category.

```APIDOC
## GET /list_examples

### Description
Browse the collection of 50+ ready-to-use Rendervid template examples. This tool lists available example templates organized by category.

### Method
GET

### Endpoint
/list_examples

### Parameters
#### Query Parameters
- **category** (string) - Optional - Filter the list of examples by a specific category (e.g., getting-started, social-media, marketing).

### Request Example
{
  "category": "social-media"
}

### Response
#### Success Response (200)
- **name** (string) - Template name
- **category** (string) - Category of the template
- **path** (string) - Path to use with get_example tool
- **description** (string) - What the template does
- **outputType** (string) - 'video' or 'image'
- **dimensions** (string) - Output resolution (e.g., "1920x1080")
```

--------------------------------

### Get Capabilities Tool Prompt

Source: https://github.com/qualityunit/rendervid/blob/main/skills/SKILL.md

Example prompt for discovering available features and animation presets.

```text
"What animation presets are available?"
```

--------------------------------

### Render Music Album Release Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/social/music-album-release/README.md

Use this command to render the specific music album release example. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "social/music-album-release"
```

--------------------------------

### Render Metaballs Intro Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/effects/metaballs-intro/README.md

Use this command to render the specific metaballs intro example. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "effects/metaballs-intro"
```

--------------------------------

### Complete Layer Example with Animated Filters

Source: https://github.com/qualityunit/rendervid/blob/main/docs/templates/filters.md

A comprehensive example of a layer with multiple animated filters (blur and brightness) and additional animations like scaling. This demonstrates a complex visual effect setup.

```json
{
  "id": "hero-image",
  "type": "image",
  "position": { "x": 0, "y": 0 },
  "size": { "width": 1920, "height": 1080 },
  "props": {
    "src": "https://example.com/hero.jpg",
    "fit": "cover"
  },
  "filters": [
    {
      "type": "blur",
      "value": 0,
      "animate": {
        "from": 15,
        "to": 0,
        "duration": 45,
        "easing": "easeOutQuad"
      }
    },
    {
      "type": "brightness",
      "value": 1,
      "animate": {
        "from": 0.5,
        "to": 1,
        "duration": 45,
        "easing": "easeOutQuad"
      }
    }
  ],
  "animations": [
    {
      "type": "keyframe",
      "duration": 300,
      "keyframes": [
        { "frame": 0, "properties": { "scaleX": 1, "scaleY": 1 } },
        { "frame": 300, "properties": { "scaleX": 1.1, "scaleY": 1.1 } }
      ]
    }
  ]
}
```

--------------------------------

### Validate, List, and Render Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/EXAMPLES_SUMMARY.md

Use these commands to manage and render custom component examples. Ensure you have the necessary pnpm environment set up.

```bash
# Validate all examples
pnpm examples:validate

# List available examples
pnpm examples:list

# Render a specific example (if supported)
pnpm examples:render particle-explosion
```

--------------------------------

### Get Component Defaults

Source: https://github.com/qualityunit/rendervid/blob/main/skills/README.md

Fetch default values, validation schemas, and configuration for custom Rendervid components. Useful for creating custom component layers, understanding prop constraints, and getting configuration examples.

```javascript
get_component_defaults({ componentName: "AnimatedLineChart" })
```

```javascript
get_component_defaults({})
```

--------------------------------

### POST /render/course-intro

Source: https://github.com/qualityunit/rendervid/blob/main/examples/education/course-intro/README.md

Generates a course introduction video based on provided course metadata.

```APIDOC
## POST /render/course-intro

### Description
Generates a professional 1920x1080 video introduction for a course.

### Method
POST

### Parameters
#### Request Body
- **courseTitle** (string) - Required - The title of the course.
- **description** (string) - Optional - A brief description of the course content.
- **instructorName** (string) - Optional - The name of the instructor.
- **duration** (string) - Optional - The total duration of the course.

### Request Example
{
  "inputs": {
    "courseTitle": "Complete Python Masterclass",
    "description": "From beginner to advanced with real-world projects",
    "instructorName": "Dr. Alex Thompson",
    "duration": "12 hours"
  }
}

### Response
#### Success Response (200)
- **output** (file) - The rendered MP4 video file.
```

--------------------------------

### Render image sequence examples via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/advanced/image-sequence/README.md

Execute the render script to generate specific or all available examples.

```bash
# Render this example
node examples/render-all.mjs "advanced/image-sequence"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render TikTok Video Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/social-media/tiktok-video/README.md

Use this command to render the TikTok video template. Ensure you have Node.js installed.

```bash
# Render this example
node examples/render-all.mjs "social-media/tiktok-video"
```

```bash
# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### AI Flow for Social Media Content

Source: https://github.com/qualityunit/rendervid/blob/main/skills/SKILL.md

This AI flow outlines the steps to create social media content, such as an Instagram story. It includes listing examples, getting a specific example, and rendering the video with custom inputs.

```text
User: "Make an Instagram story for a product launch"

AI flow:
1. list_examples({ category: "social-media" })
2. get_example({ examplePath: "social-media/instagram-story" })
3. render_video() with custom inputs
```

--------------------------------

### Render Instagram Post Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/social-media/instagram-post/README.md

Use this command to render the Instagram Post template with default settings. Ensure you have Node.js installed.

```bash
node examples/render-all.mjs "social-media/instagram-post"
```

--------------------------------

### Get Text Component Documentation

Source: https://github.com/qualityunit/rendervid/blob/main/skills/get_component_docs.md

Use this example to retrieve documentation for the 'text' component type. Ensure the componentType parameter is correctly specified.

```javascript
get_component_docs({ componentType: "text" })
```

--------------------------------

### Render Progress Ring Video via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/renders/progress-ring.md

Use this command to render the progress ring video from the command line. Ensure you have pnpm installed and the examples are set up.

```bash
pnpm examples:render progress-ring
```

--------------------------------

### SVGDrawing Delayed Mode Example

Source: https://github.com/qualityunit/rendervid/blob/main/packages/components/src/effects/SVGDrawing.md

Shows the 'delayed' animation mode, where paths animate with staggered starts but finish together. Uses the 'delay' prop for timing. Requires 'frame' and 'fps' props.

```tsx
<SVGDrawing
  duration={2.5}
  mode="delayed"
  delay={0.2}
  frame={frame}
  fps={30}
>
  <svg viewBox="0 0 200 150">
    <path d="M 20 75 Q 50 20, 100 75" />
    <path d="M 20 100 Q 50 150, 100 100" />
    <path d="M 20 50 Q 50 5, 100 50" />
  </svg>
</SVGDrawing>
```

--------------------------------

### AI Agent Workflow for Social Media Post

Source: https://github.com/qualityunit/rendervid/blob/main/skills/SKILL.md

This workflow demonstrates how an AI agent can be used to create a social media post, including listing examples, getting a specific template, and rendering a video.

```javascript
User: "Create an Instagram story announcing a flash sale"

AI Agent:
1. list_examples({ category: "social-media" })
2. get_example({ examplePath: "social-media/instagram-story" })
3. render_video({
     template: {...},
     inputs: {
       title: "Flash Sale",
       subtitle: "50% Off Everything",
       backgroundColor: "#FF6B6B"
     },
     format: "mp4",
     quality: "high"
   })

Result: Instagram-ready 1080x1920 video
```

--------------------------------

### Docker Local Setup

Source: https://github.com/qualityunit/rendervid/blob/main/packages/cloud-rendering/README.md

Quick setup script for local Docker deployment. Navigate to the directory and execute the build script.

```bash
cd packages/cloud-rendering/deployments/docker
./build.sh
```

--------------------------------

### WebCodecs Encoder Setup

Source: https://github.com/qualityunit/rendervid/blob/main/docs/api/renderer-browser/encoder.md

High-performance video encoding using WebCodecs. Ensure WebCodecs are supported before proceeding. Configure width, height, FPS, codec, and bitrate. Encode frames and then finish to get output chunks. Dispose of the encoder when finished.

```typescript
import {
  createWebCodecsEncoder,
  isWebCodecsSupported,
} from '@rendervid/renderer-browser';

if (!isWebCodecsSupported()) {
  throw new Error('WebCodecs not supported');
}

const encoder = await createWebCodecsEncoder({
  width: 1920,
  height: 1080,
  fps: 30,
  codec: 'avc1.42001E',  // H.264
  bitrate: 5_000_000,
});

// Encode frames
for (const frameData of frames) {
  await encoder.encodeFrame(frameData, timestamp);
}

// Finish and get output
const chunks = await encoder.finish();

encoder.dispose();
```

--------------------------------

### Render Specific Pricing Table Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/marketing/pricing-table/README.md

Use this command to render the pricing table video. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "marketing/pricing-table"
```

--------------------------------

### Render Gradient Mesh Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/cinematic/gradient-mesh/README.md

Use this command to render the specific gradient-mesh example. Alternatively, render all examples by omitting the example path.

```bash
# Render this example
node examples/render-all.mjs "cinematic/gradient-mesh"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Asset Preloading Example

Source: https://github.com/qualityunit/rendervid/blob/main/docs/templates/schema.md

Example JSON demonstrating how to define assets for preloading, including their ID, type (image, audio, video, font, lottie), and URL.

```json
{
  "composition": {
    "assets": [
      { "id": "logo", "type": "image", "url": "/assets/logo.png" },
      { "id": "bgMusic", "type": "audio", "url": "/assets/music.mp3" },
      { "id": "intro", "type": "video", "url": "/assets/intro.mp4" }
    ],
    "scenes": [...] 
  }
}
```

--------------------------------

### Render Specific Price Drop Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/real-estate/price-drop/README.md

Use this command to render the price drop announcement video example. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "real-estate/price-drop"
```

--------------------------------

### Render Time Running Out Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/time-running-out/README.md

Commands to render the specific example or the entire suite of examples.

```bash
# Render this example
node examples/render-all.mjs "custom-components/time-running-out"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Examples via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/README.md

Commands to render specific or all custom component examples using the Rendervid CLI.

```bash
# Render a specific example
cd examples/custom-components
npx tsx render-all-examples.ts animated-counter

# Render all examples
npx tsx render-all-examples.ts
```

--------------------------------

### Render Holographic Interface Example

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/holographic-interface/README.md

Use this command to render the specific holographic interface example. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "custom-components/holographic-interface"
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/qualityunit/rendervid/blob/main/examples/README.md

Installs project dependencies using pnpm. Ensure Node.js and pnpm are installed.

```bash
pnpm install
```

--------------------------------

### Render Rendervid Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/showcase/all-layer-types/README.md

Commands to render the specific showcase example or all available examples using the Node.js script.

```bash
# Render this example
node examples/render-all.mjs "showcase/all-layer-types"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Rendervid examples via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/showcase/all-shapes/README.md

Use these commands to render specific or all available examples from the command line.

```bash
# Render this example
node examples/render-all.mjs "showcase/all-shapes"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Initializing FrameCapturer with GPU Options

Source: https://github.com/qualityunit/rendervid/blob/main/packages/renderer-node/docs/GPU_RENDERING.md

Examples demonstrating how to initialize the FrameCapturer with different GPU settings.

```APIDOC
## Initializing FrameCapturer with GPU Options

### Default Behavior (GPU Enabled)

This is the default behavior where GPU rendering is automatically enabled if available.

```typescript
import { createFrameCapturer } from '@rendervid/renderer-node';

const capturer = createFrameCapturer({
  template: myTemplate,
});

await capturer.initialize();
// Output: [FrameCapturer] GPU rendering enabled
```

### Explicitly Disable GPU

Force software rendering by setting `useGPU` to `false`.

```typescript
const capturer = createFrameCapturer({
  template: myTemplate,
  useGPU: false,
});

await capturer.initialize();
// Output: [FrameCapturer] GPU rendering disabled (by configuration)
```

### Explicitly Enable GPU

Ensure GPU rendering is used by setting `useGPU` to `true`.

```typescript
const capturer = createFrameCapturer({
  template: myTemplate,
  useGPU: true,
});

await capturer.initialize();
// Output: [FrameCapturer] GPU rendering enabled
```
```

--------------------------------

### Verify FFmpeg Installation

Source: https://github.com/qualityunit/rendervid/blob/main/mcp/README.md

Use this command to check if FFmpeg is installed on your system. If not, installation instructions for macOS are provided.

```bash
# Verify FFmpeg is installed
ffmpeg -version

# If not found, install it
brew install ffmpeg  # macOS
```

--------------------------------

### Build the Project

Source: https://github.com/qualityunit/rendervid/blob/main/examples/custom-components/RENDERING.md

Commands to navigate to the project directory and build the application.

```bash
cd /path/to/rendervid
pnpm install
pnpm build
```

--------------------------------

### Generate All Gaming Example Videos

Source: https://github.com/qualityunit/rendervid/blob/main/examples/GAMING_VIDEOS_TODO.md

Execute this script to generate videos for all gaming examples. Ensure the renderer is integrated with new gaming features before running.

```bash
# Generate all gaming example videos
./scripts/generate-gaming-videos.sh
```

--------------------------------

### Render Dashboard Examples via CLI

Source: https://github.com/qualityunit/rendervid/blob/main/examples/effects/data-visualization/README.md

Use these commands to trigger the rendering process for specific dashboard effects or the entire suite.

```bash
# Render this example
node examples/render-all.mjs "effects/data-visualization"

# Or render all examples
node examples/render-all.mjs
```

--------------------------------

### Render Particle Intro Animation

Source: https://github.com/qualityunit/rendervid/blob/main/examples/effects/particle-intro/README.md

Use this command to render the particle intro animation example. Ensure you are in the project's root directory.

```bash
node examples/render-all.mjs "effects/particle-intro"
```

--------------------------------

### Install Rendervid Server-Side Rendering Package

Source: https://github.com/qualityunit/rendervid/blob/main/docs/getting-started/installation.md

Install packages for rendering on the server using Node.js. Requires FFmpeg to be installed and available in PATH.

```bash
pnpm add @rendervid/core @rendervid/renderer-node
```

--------------------------------

### Run 3D Examples

Source: https://github.com/qualityunit/rendervid/blob/main/examples/3d/README.md

Commands to execute specific 3D example projects using the pnpm package manager.

```bash
pnpm run examples:render 3d/<example-name>
```

```bash
pnpm run examples:render 3d/basic-rotating-cube
pnpm run examples:render 3d/product-showcase
pnpm run examples:render 3d/multi-object-scene
pnpm run examples:render 3d/text-3d
```

--------------------------------

### Implement Complete Workflow

Source: https://github.com/qualityunit/rendervid/blob/main/docs/api/core/engine.md

Example demonstrating engine initialization, template validation, input validation, and browser-based rendering.

```typescript
import { RendervidEngine } from '@rendervid/core';
import { createBrowserRenderer } from '@rendervid/renderer-browser';

// Create engine
const engine = new RendervidEngine();

// Check capabilities
const caps = engine.getCapabilities();
console.log('Available animations:', caps.animations.entrance);

// Define template
const template = {
  name: 'Demo',
  output: { type: 'video', width: 1920, height: 1080, fps: 30, duration: 5 },
  inputs: [{ key: 'title', type: 'string', label: 'Title', required: true }],
  composition: {
    scenes: [{
      id: 'main',
      startFrame: 0,
      endFrame: 150,
      backgroundColor: '#1a1a2e',
      layers: [{
        id: 'title',
        type: 'text',
        position: { x: 160, y: 440 },
        size: { width: 1600, height: 200 },
        inputKey: 'title',
        props: { fontSize: 96, fontWeight: 'bold', color: '#ffffff', textAlign: 'center' },
        animations: [{ type: 'entrance', effect: 'fadeInUp', duration: 30 }]
      }]
    }]
  }
};

// Validate template
const validation = engine.validateTemplate(template);
if (!validation.valid) {
  throw new Error(`Invalid template: ${validation.errors.map(e => e.message).join(', ')}`);
}

// Validate inputs
const inputs = { title: 'Hello World!' };
const inputValidation = engine.validateInputs(template, inputs);
if (!inputValidation.valid) {
  throw new Error(`Invalid inputs: ${inputValidation.errors.map(e => e.message).join(', ')}`);
}

// Render with browser renderer
const renderer = createBrowserRenderer();
const result = await renderer.renderVideo({
  template,
  inputs,
  output: { format: 'mp4', quality: 'high' }
});

// Download result
const blob = new Blob([result.data], { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
```