{
  "schema_version": "openagent.resource.v1",
  "id": "res_html_video",
  "slug": "html-video",
  "status": "published",
  "identity": {
    "name": "HTML Video",
    "one_liner": "Agent skill pack for generating HTML videos with liquid backgrounds, VFX overlays, and cinematic hero animations using local AI coding agents.",
    "short_description": "HTML Video is an open-source skill pack by nexu-io that enables AI coding agents to generate HTML5 videos with liquid/fluid backgrounds, VFX overlays, poster frames, and cinematic hero animations. It includes templates like frame-liquid-bg-hero and works with any local AI agent supporting HTML output."
  },
  "classification": {
    "resource_type": "skill",
    "primary_category": "skills",
    "subcategories": [
      "agent-skill",
      "html",
      "video",
      "animation",
      "vfx"
    ]
  },
  "positioning": {
    "why_it_matters": "HTML Video bridges the gap between AI-generated HTML and video content, letting coding agents produce visually rich video intros, hero sections, and animated backgrounds using nothing but HTML5 + CSS/JS — no video editing software required.",
    "best_for": [
      "Content creators who want AI-generated video intros and hero animations",
      "Developers building landing pages with cinematic HTML5 video backgrounds",
      "Teams using coding agents to produce multimedia content"
    ],
    "not_for": [
      "Users looking for traditional video editing or non-HTML video formats",
      "Teams that need MP4 export without an HTML rendering step"
    ],
    "use_cases": [
      "developer-workflow"
    ],
    "target_audience": [
      "developer",
      "agent_builder"
    ],
    "maturity": "active"
  },
  "decision_signals": {
    "deployment_modes": [
      "cloud"
    ],
    "open_source": true,
    "local_first": false,
    "self_hostable": false,
    "has_api": false,
    "has_gui": false,
    "supports_mcp": false,
    "supports_docker": false
  },
  "facts": {
    "license": "Apache-2.0",
    "pricing_model": "open_source",
    "github_stars": 162,
    "github_forks": 20,
    "github_repo_full_name": "nexu-io/html-video",
    "last_verified_at": "2026-06-04"
  },
  "capabilities": {
    "core_capabilities": [
      "agent-skill"
    ],
    "integrations": [
      "agents",
      "skills"
    ],
    "interfaces": [
      "repo",
      "docs"
    ]
  },
  "links": {
    "primary_url": "https://github.com/nexu-io/html-video",
    "items": [
      {
        "type": "github",
        "label": "GitHub",
        "url": "https://github.com/nexu-io/html-video"
      },
      {
        "type": "github",
        "label": "Docs",
        "url": "https://github.com/nexu-io/html-video#readme"
      }
    ]
  },
  "media": {
    "thumbnail_url": "https://github.com/nexu-io.png",
    "og_image_url": "https://github.com/nexu-io.png",
    "thumbnail_brief": {
      "resource_type": "skill",
      "visual_motif": "HTML video player with liquid animation waveform and VFX overlay controls",
      "background_style": "minimal editorial surface with restrained purple accent color",
      "title_overlay": "HTML Video",
      "subtitle": "Agent skill for HTML video generation",
      "avoid": [
        "busy poster layout",
        "unverified logos",
        "marketing-heavy screenshots"
      ]
    }
  },
  "tags": {
    "category": [
      "skill",
      "open-source"
    ],
    "capability": [
      "agent-skill"
    ],
    "constraint": [
      "open-source"
    ],
    "scenario": [
      "developer-workflow"
    ]
  },
  "relationships": {},
  "machine_readable": {
    "canonical_url": "https://www.openagent.bot/skills/html-video",
    "json_url": "https://www.openagent.bot/skills/html-video.json",
    "markdown_url": "https://www.openagent.bot/skills/html-video.md"
  },
  "seo": {
    "title": "HTML Video: Agent Skill — Generate HTML videos with liquid backgrounds and cinematic hero animations using local AI coding agents.",
    "description": "HTML Video is an open-source agent skill. Generate HTML5 videos with liquid backgrounds, VFX overlays, and cinematic hero animations using local AI coding agents."
  },
  "editorial": {
    "trust_note": "Verified from source links and project metadata.",
    "core_strengths": [
      {
        "title": "Liquid and fluid background templates",
        "description": "Pre-built HTML/CSS templates for liquid, fluid, and gradient-based animated backgrounds that work as video hero sections.",
        "why_it_matters": "Creators get production-quality animated backgrounds without needing After Effects or video editing skills."
      },
      {
        "title": "VFX and cinematic overlay skills",
        "description": "Templates for VFX-style overlays, particle effects, and cinematic transitions rendered entirely in HTML5.",
        "why_it_matters": "Coding agents can add Hollywood-style visual effects to HTML content using only standard web technologies."
      },
      {
        "title": "Agent-ready skill format",
        "description": "Designed to be invoked by coding agents via natural language prompts, with clear template structures and parameters.",
        "why_it_matters": "Works with Claude Code, Codex, Gemini CLI, OpenCode, and any agent that can write HTML files."
      },
      {
        "title": "Part of the nexu-io ecosystem",
        "description": "Integrates with open-design's design system framework and html-anything's agentic HTML editor for end-to-end content creation.",
        "why_it_matters": "Teams can combine video skills with design systems and HTML editing for a complete agent-driven content pipeline."
      }
    ],
    "use_case_notes": [
      {
        "title": "Landing page hero videos",
        "description": "Generate cinematic HTML5 hero videos with liquid backgrounds for landing pages and product showcases."
      },
      {
        "title": "Video intros and posters",
        "description": "Create animated video intros and poster frames for presentations, social media, and marketing content."
      },
      {
        "title": "Creative coding projects",
        "description": "Use the VFX and animation templates for creative coding, generative art, and interactive visual experiences."
      }
    ],
    "compare_notes": [
      {
        "title": "Choose HTML Video for agent-driven HTML video generation",
        "summary": "HTML Video lets coding agents produce video content using HTML5/CSS/JS, eliminating the need for video editing software while staying in the agent workflow.",
        "against": "traditional video editing tools"
      }
    ],
    "getting_started": [
      {
        "label": "Open the GitHub repository",
        "url": "https://github.com/nexu-io/html-video",
        "type": "github"
      },
      {
        "label": "Read the overview",
        "url": "https://github.com/nexu-io/html-video#readme",
        "type": "docs"
      }
    ],
    "seo_article": {
      "intro": "HTML Video is a specialized skill pack that lets AI coding agents generate HTML5 videos with professional-grade visual effects — liquid backgrounds, VFX overlays, particle systems, and cinematic hero animations — using nothing but standard web technologies.",
      "what_it_is": "HTML Video is an open-source skill pack by nexu-io with templates for generating HTML5 videos, including liquid/fluid backgrounds, VFX overlays, poster frames, and cinematic hero animations, designed to be used by AI coding agents.",
      "why_it_matters": "Video content creation has been inaccessible to AI coding agents because it typically requires video editing software. HTML Video solves this by providing templates that render cinematic video effects using HTML5/CSS/JS — something any coding agent can generate.",
      "how_it_works": "Clone the repository, reference the skill templates in your prompt, and let your local AI agent generate HTML video files with liquid backgrounds, VFX effects, or hero animations.",
      "use_cases": [
        {
          "title": "Product landing page hero",
          "description": "Ask your coding agent to generate a liquid-background hero video for a product launch page using the frame-liquid-bg-hero template."
        },
        {
          "title": "Social media video content",
          "description": "Generate animated HTML videos for social media posts with cinematic transitions and VFX overlays."
        },
        {
          "title": "Presentation visuals",
          "description": "Create animated backgrounds and transitions for slide decks and presentations using HTML5 video skills."
        }
      ],
      "alternatives": [
        {
          "title": "Use open-design for broader design system skills",
          "summary": "HTML Video focuses specifically on video and animation output. Open Design offers a wider range of design system skills across web, desktop, and mobile prototypes.",
          "against": "Open Design"
        },
        {
          "title": "Use html-anything for general HTML editing",
          "summary": "HTML Video is for video-specific content. HTML Anything is a general-purpose agentic HTML editor for all content types.",
          "against": "HTML Anything"
        }
      ],
      "getting_started": [
        {
          "label": "Read the README",
          "url": "https://github.com/nexu-io/html-video#readme",
          "type": "docs"
        },
        {
          "label": "Inspect the repository",
          "url": "https://github.com/nexu-io/html-video",
          "type": "github"
        }
      ],
      "faq": [
        {
          "question": "What should I check before using HTML Video?",
          "answer": "Start by reviewing the template files and confirming your AI coding agent can generate HTML output. Test with a simple liquid background before moving to complex VFX compositions."
        },
        {
          "question": "Is HTML Video open source?",
          "answer": "HTML Video is listed with Apache-2.0 based on the official source links in this profile. Re-check the repository before production use."
        },
        {
          "question": "What AI agents work with HTML Video?",
          "answer": "Any AI coding agent that can write HTML/CSS/JS files works with HTML Video — Claude Code, Codex, Gemini CLI, OpenCode, Cursor, Aider, and more."
        }
      ]
    }
  },
  "timestamps": {
    "created_at": "2026-06-04T00:00:00.000Z",
    "updated_at": "2026-06-04T00:00:00.000Z",
    "published_at": "2026-06-04T00:00:00.000Z"
  }
}