Making a marketing video in 2026 usually means: open a desktop NLE, fight with timelines, render, fix, render again, export for the right aspect ratio, push to the right channel, write the description, post. Multiply by ten videos a month and the team is buried.

There is a faster path. HyperFrames is an HTML-based video composition framework — your video is an HTML file with a GSAP timeline and data-* attributes, and npx hyperframes render produces a real MP4. OpenClaw is an agent runtime that runs inside GolemWorkers and can execute CLI commands, manage files, and call APIs. When you put the two together, you get an AI agent that takes a brief, writes the composition, renders the video, and delivers it to Slack or Telegram — without a human touching a timeline.

This article is the creative-track entry in the "How to connect X to OpenClaw" series. Earlier pieces cover Gmail, Telegram, and Trello. The pattern is the same: install the tool, get credentials, wire it into OpenClaw, run an agent. What changes for HyperFrames is that the "credentials" are just Node and FFmpeg, and the agent's job is to author and render instead of just talk to an external API.

If you want the bigger picture on what an OpenClaw agent is, read AI agents: the complete practical guide. If you want to see the same shape on a different tool, see How to automate Trello with OpenClaw.

What is HyperFrames?

HyperFrames is a video framework where HTML is the source of truth. A composition is a single index.html with:

• data-* attributes that drive the timeline (start, duration, track index, media start, volume);
• a GSAP timeline that animates opacity, position, scale, rotation, and color;
• CSS for the visual style;
• external media — video, audio, images — referenced by URL or local path.

The framework handles clip visibility, media playback, and timeline sync. You write the composition once and npx hyperframes render produces a final MP4 in any aspect ratio you want (1920×1080, 1080×1920, 1080×1080, custom).

Why this matters for automation:

• a composition is plain HTML — an LLM can generate it;
• the CLI is scriptable — an agent can call it;
• the timeline is deterministic — given the same inputs, you get the same video;
• there is no UI lock-in — you can render headlessly on a server.

HyperFrames ships a set of opinionated templates that cover common use cases:

• blank — empty canvas, you bring everything;
• warm-grain — cinematic, vintage, slow pacing;
• play-mode — high-energy, short social cuts;
• swiss-grid — typographic, grid-based editorial;
• vignelli — minimal, grid, sans-serif;
• decision-tree — branching explainer visuals;
• kinetic-type — typography-driven motion;
• product-promo — product announcement videos (this is the one most teams will reach for first);
• nyt-graph — data-driven infographics.

For an automated agent, the templates matter because they constrain the design choices. Instead of asking the LLM to invent a layout, the agent picks a template, fills in the variables, and renders.

What is the OpenClaw + GolemWorkers angle?

OpenClaw is the agent runtime that lives inside GolemWorkers. It is a long-lived process that:

• runs an LLM in a loop with a tool registry;
• exposes the host shell, the file system, and external services as tools;
• keeps multi-turn memory across sessions;
• has guardrails: cost caps, approval queues, audit logs;
• survives restarts, runs in parallel, and scales.

When an OpenClaw agent has the HyperFrames CLI on its PATH and the npx binary available, the agent can do everything a human can do with HyperFrames — and faster, and at 3am. The agent's tool registry gains entries like:

• hyperframes.init(name, template) — scaffold a new project;
• hyperframes.read_composition(path) — read the current index.html;
• hyperframes.edit_composition(path, edits) — apply structured edits to the HTML;
• hyperframes.lint(path) — run npx hyperframes lint and return findings;
• hyperframes.inspect(path) — run visual inspection, return layout issues;
• hyperframes.preview(path) — open a local preview (or skip on a headless server);
• hyperframes.render(path, output, variables) — produce the final MP4;
• hyperframes.deliver(output, target) — push to Telegram / Slack / S3 / ClickUp.

That last entry is the one that closes the loop. The agent is not just generating a video; it is delivering it.

Prerequisites

Three things need to be in place on the host where the OpenClaw agent runs.

1. Node.js >= 22. HyperFrames requires a modern Node. Install via nvm, fnm, or your platform's package manager.

node --version
          # v22.x.x
          

2. FFmpeg. The HyperFrames render pipeline shells out to FFmpeg for video and audio encoding.

ffmpeg -version
          # ffmpeg version 6.x or newer
          

If FFmpeg is not installed, install it via your package manager (brew install ffmpeg, apt install ffmpeg, choco install ffmpeg).

3. The npx binary on PATH. npx ships with Node.

Once these are present, npx hyperframes runs. No credentials, no API keys, no OAuth, no service accounts. This is the simplest "API" of any tool in the series.

Step 1. Install the HyperFrames CLI

You do not install HyperFrames globally. You call it through npx, which fetches and caches the latest version on first use. To pin a version for production:

npm install -g hyperframes@latest
          

Verify the install:

npx hyperframes info
          

You should see the version, the Node version, the FFmpeg version, and a list of available commands.

Step 2. Scaffold your first project

Pick a name. Pick a template. Run init.

npx hyperframes init my-first-video --example product-promo --non-interactive
          cd my-first-video
          ls
          

init creates the project structure: index.html, optional compositions/, optional media/, the AI-coding skill stubs, and a hyperframes.json config file. The --example product-promo flag populates a working product-promotion composition that you can render immediately. The --non-interactive flag is what an agent passes when it does not want to be asked questions.

To verify the scaffold works, render it without any edits:

npx hyperframes render --output out/first-render.mp4
          

This should produce a working MP4 in out/first-render.mp4. If it does, you have a working pipeline. If it does not, npx hyperframes doctor will tell you what is missing.

Step 3. Author a composition (or let the agent do it)

The composition is a single index.html with a data-composition-id div, GSAP timeline, and CSS. The minimum viable composition looks like this:

<!doctype html>
          <html>
          <head>
          <style>
          [data-composition-id="root"] {
          width: 1920px;
          height: 1080px;
          background: #0b1020;
          color: #ffffff;
          font-family: ui-sans-serif, system-ui, sans-serif;
          display: flex;
          align-items: center;
          justify-content: center;
          }
          .title { font-size: 120px; font-weight: 700; }
          </style>
          <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
          </head>
          <body>
          <div data-composition-id="root" data-width="1920" data-height="1080" data-start="0" data-duration="3">
          <div class="title clip" data-start="0" data-duration="3" data-track-index="1"></div>
          </div>
          <script>
          const tl = gsap.timeline({ paused: true });
          window.__hyperframes.getVariables = () => window.__hyperframes.getVariables();
          const { headline } = window.__hyperframes.getVariables();
          document.querySelector(".title").textContent = headline;
          tl.from(".title", { y: 40, opacity: 0, duration: 0.7, ease: "power3.out" }, 0.2);
          window.__timelines = window.__timelines || {};
          window.__timelines["root"] = tl;
          </script>
          </body>
          </html>
          

The headline is a declared variable — data-composition-variables lists it as a string with a default. At render time, the agent passes --variables '{"headline":"Our new feature"}' and the composition picks it up.

When the OpenClaw agent authors a composition, it does four things:

• reads a brief (e.g. "30-second product launch, headline: 'Ship faster', accent color: brand blue, voice: confident");
• picks a template (product-promo for this use case);
• writes the HTML to a project directory;
• declares the variables that need to be filled in.

The agent can iterate: render → inspect → fix layout → re-render, until the visual output is acceptable.

Step 4. Lint and inspect before rendering

Two commands catch problems before they hit the render pipeline.

npx hyperframes lint
          npx hyperframes inspect
          

lint checks structural rules: every composition has a data-composition-id, every timeline is registered in window.__timelines, no overlapping tracks on the same index, no repeat: -1 infinite loops, no async timeline construction, no animated visibility or display properties. An LLM-authored composition will often fail lint on the first pass; that is normal.

inspect runs the composition in headless Chrome, seeks through the timeline at sample points, and reports layout issues: text spilling out of containers, off-canvas elements, low contrast between text and background. Output is machine-readable, which means the agent can parse it and fix the issues automatically.

Run both before every render.

Step 5. Render

npx hyperframes render --output out/final.mp4
          

The output is a real MP4 in the aspect ratio declared on the root composition. Common sizes: 1920×1080 (16:9 landscape), 1080×1920 (9:16 vertical for Reels / Shorts / TikTok), 1080×1080 (1:1 square for Instagram feed).

The render pipeline is deterministic and idempotent: given the same index.html and the same --variables, you get the same MP4. This is what makes agent-driven video safe to use in production.

Step 6. Wire the agent to HyperFrames

In OpenClaw, the agent's tool registry is a typed list of actions it can take. Adding HyperFrames to the registry is a config file change, not a code change. The exact schema depends on the OpenClaw version you run, but the shape is:

tools:
          - name: hyperframes.init
          description: Scaffold a new HyperFrames project from a template.
          command: npx
          args: ["hyperframes", "init", "${name}", "--example", "${template}", "--non-interactive"]
          workdir: ${projects_dir}
          - name: hyperframes.edit
          description: Edit a composition by writing the new index.html.
          handler: file.write
          args: { path: "${projects_dir}/${name}/index.html", content: "${html}" }
          - name: hyperframes.lint
          description: Lint a HyperFrames project.
          command: npx
          args: ["hyperframes", "lint"]
          workdir: "${projects_dir}/${name}"
          - name: hyperframes.inspect
          description: Visually inspect a HyperFrames project.
          command: npx
          args: ["hyperframes", "inspect", "--json"]
          workdir: "${projects_dir}/${name}"
          - name: hyperframes.render
          description: Render a HyperFrames project to MP4.
          command: npx
          args: ["hyperframes", "render", "--output", "${output}"]
          workdir: "${projects_dir}/${name}"
          - name: hyperframes.deliver
          description: Deliver a rendered MP4 to a channel.
          handler: file.copy
          args: { src: "${output}", dst: "${target}" }
          

The agent now has a hyperframes namespace. In the system prompt, the agent reads:

You have a hyperframes tool set. To make a video: (1) init a new project from a template; (2) edit the index.html to set the brief's headline, color, and copy; (3) lint and inspect until clean; (4) render to MP4; (5) deliver the file to the requested channel. Do not skip lint and inspect — they catch 90% of LLM-authored layout issues.

That is the whole integration. The agent does not need to know the internals of GSAP, the data attributes, or the render pipeline. It just calls the right tool in the right order.

Step 7. The end-to-end agent flow

Here is what a real run looks like.

1. The user messages the agent in Telegram: "Make a 30-second product promo for our new AI features. Headline: 'Ship faster with agents.' Brand blue: #3b82f6. Tone: confident."

2. The agent reads the brief, picks product-promo as the template, calls hyperframes.init(name="ai-features-promo", template="product-promo").

3. The agent reads the scaffolded index.html, identifies the headline and accent variables, calls hyperframes.edit(html=...) with a new index.html that wires the variables to the user's brief.

4. The agent runs hyperframes.lint. If there are errors, it edits and re-lints. If lint passes, it runs hyperframes.inspect --json. If there are layout issues, it edits the HTML (smaller font, larger container, better contrast) and re-inspects.

5. When lint and inspect are clean, the agent calls hyperframes.render(output="out/ai-features-promo.mp4").

6. The agent calls hyperframes.deliver(target="telegram:channel:marketing").

7. The agent replies in the original Telegram thread: "Done. Headline: 'Ship faster with agents.' Duration: 30s. File: out/ai-features-promo.mp4."

8. The marketer watches the video in Telegram. If they want a change ("make the headline bigger, change the accent to teal"), they message the agent. The agent re-runs from step 3.

This is what production motion-design automation looks like in 2026: not a magic button, but a small, well-shaped loop the agent runs in a few minutes.

What you can automate after connecting

Once HyperFrames is on the OpenClaw tool belt, the realistic scenarios fall into a few buckets.

1. Product announcement videos. Every release, the agent produces three cuts — 30s landscape for the website, 15s square for Twitter, 9:16 for Reels and Shorts — from a single brief. The product manager writes a paragraph, the agent does the rest.

2. Recap videos. The agent pulls a week of commits, a week of issues closed, a week of releases, and produces a one-minute internal recap. The format is templated; only the content changes.

3. Social media content. The agent watches a content calendar, generates a video for each scheduled slot, and posts it. The content calendar is a Notion / Trello / ClickUp board; the agent pulls titles, deadlines, and assets from there.

4. Customer-facing tutorial videos. A support agent receives the same question five times in a week. The agent drafts a 60-second tutorial, renders it, posts it to a help center, and pings the support lead.

5. Sales enablement. The sales team needs a video for each new lead. The agent takes a lead's company name, pulls a few facts, generates a personalized 30-second intro, and delivers it to the rep. No human touches the timeline.

6. Status reports. The agent turns a weekly metrics dump into a 60-second video dashboard. The dashboard is templated; the data is pulled live from the agent's tools.

7. A/B test variants. Marketing wants to know which headline converts better. The agent produces 5 versions with different headlines, hosts them, and the team runs the test.

All seven use the same tool set. The agent does not change. The brief and the template do.

The main safety rules

The same cautions from How to automate Telegram with OpenClaw and How to automate Trello with OpenClaw apply here, with one addition.

• The agent should not post rendered videos to public channels without a human review step. The cost of a bad video in a public feed is reputational; a 30-second review step is cheap.
• The agent should not overwrite an existing out/*.mp4 without confirmation. Production cuts and draft cuts often share filenames; the agent should ask before clobbering.
• The agent should respect a per-tenant cap on render minutes. A runaway agent that re-renders forever will fill the disk and burn through FFmpeg CPU.
• The agent should not pull external media from arbitrary URLs. A malicious MP4 in the inputs is a real attack surface. Whitelist media sources.
• The agent should keep an audit trail of every render — what brief, what template, what variables, what output path.

Minimum safe policy for the agent:

• Render to a draft directory by default; only move to out/ after a review step.
• Never overwrite a file without checking the modification time and confirming.
• Cap renders: 10 per day per tenant, 60s each, total disk ≤ 2 GB.
• Whitelist media sources: only the team's S3 / R2 / GCS bucket, the team's Notion attachments, the team's local uploads.
• Log every render with the brief, the template, the variable values, the output path, and a hash of the input index.html.

Why manual setup is not "10 minutes"

The first render of npx hyperframes init does work. But the moment you want real content, the friction starts:

• Node 22 is not installed on the production host — older nodejs from the package manager is 18.x;
• FFmpeg is not installed, or it is installed without the codecs HyperFrames needs;
• the LLM authors a composition that fails lint because of overlapping tracks;
• the LLM authors a composition that passes lint but inspect finds the title is off-canvas;
• the brand color in the brief is #3b82f6 but the template defaults to #000000 and the contrast is unreadable;
• the agent renders with the wrong aspect ratio because the brief did not specify;
• the render takes 12 minutes for a 60-second video and the agent's time budget blows;
• the agent uses repeat: -1 on a tween because it thought it would loop forever — the renderer rejects it;
• the rendered MP4 has no audio because the brief said "no voiceover" but the template has a music track by default;
• the agent overwrites the previous out/final.mp4 and the marketer cannot roll back;
• the agent posts the video to a public channel because the brief said "publish it";
• the rendered video plays fine in QuickTime but not in the team's Slack because of an H.264 level mismatch;
• the agent renders a 4-minute video when the brief said 30 seconds, because the template default is 4 minutes;
• the team's CDN rejects the upload because the MP4 has no moov atom at the start (web-streaming issue);
• the agent's render is non-deterministic because it used Math.random() somewhere in the composition (HyperFrames explicitly bans this — see the rules in the hyperframes skill).

These are all real. Each costs 10–60 minutes the first time. The cumulative cost is what an agent platform is supposed to take off your hands.

How GolemWorkers makes this easier

GolemWorkers ships HyperFrames as a first-class creative channel. You do not write a tool registry, you do not pin a Node version, you do not debug FFmpeg codecs, and you do not write an audit trail. You add the channel, and the agent gets the seven hyperframes.* tools with sensible defaults.

What GolemWorkers gives you out of the box:

• a managed Node 22 + FFmpeg runtime with the codecs HyperFrames needs;
• a tool registry that already includes hyperframes.init, hyperframes.edit, hyperframes.lint, hyperframes.inspect, hyperframes.render, hyperframes.deliver;
• a per-tenant render cap (minutes per day, disk per project) with alerts;
• an audit trail that records the brief, the template, the variables, the input hash, the output path, and the deliverer for every render;
• a draft → review → publish flow: renders go to a draft directory, only move to out/ after a human approves;
• a media whitelist: the agent can only pull from sources the team has approved;
• a templated design.md so the agent does not invent colors or fonts that violate the brand;
• a house-style.md fallback for teams that do not have a brand book yet;
• integration with the rest of GolemWorkers' channels — the agent can deliver the rendered video to Telegram, Slack, ClickUp, Trello, Notion, or a CMS without leaving the platform.

If you want to see the contrast with the more "API-key" integrations, the Gmail, Telegram, and Trello articles walk through the heavier setup. HyperFrames is the simplest of the four — no OAuth, no API key, no token — but the agentic complexity is real, and that is what GolemWorkers smooths over.

Conclusion

HyperFrames + OpenClaw + GolemWorkers is the shortest path from a written brief to a delivered video in 2026. Three things to remember:

• HyperFrames needs Node 22 and FFmpeg; nothing else. No credentials, no API key, no service account.
• The agent's value is in the loop: brief → author → lint → inspect → fix → render → deliver. Skipping lint and inspect is the most common failure mode.
• Render to a draft directory by default; only move to out/ after a human approves.

If you want a ready-made pipeline, GolemWorkers ships the HyperFrames channel with the right defaults, the right safety rails, and the right integration to the rest of your stack.

Common pitfalls

• Skipping the planning phase — Teams that jump straight into prompt engineering usually spend weeks rebuilding once they hit edge cases. Spend 30 minutes mapping the trigger, the action, and the fallback before writing the first instruction.
• Treating the first successful run as done — A 90% pass rate still produces 1 wrong answer in 10. Set an explicit acceptance threshold (typically 99% for production) and instrument the agent to log when it falls short.
• Skipping audit logging — If you can't replay what the agent did three weeks ago, you can't debug it, bill it, or trust it. Persist every tool call with timestamps and inputs from day one.
• Treating AI generation as the final step — AI-generated video/images almost always need light human curation (a trim, a caption, a brand mark). Plan for that 20% polish time, not just the 80% generation time.

Related articles

• OpenClaw Skills vs Plugins: The Architectural Fork Beginn...
• How to automate Vercel deployments with OpenClaw
• How to automate Slack with OpenClaw
• How to run autonomous coding tasks in OpenClaw with Codex...
• How to automate Telegram with OpenClaw

FAQ

What is automate hyperframes with openclaw?

automate hyperframes with openclaw is a workflow where an AI agent executes the recurring tasks that a human would otherwise do manually — typically with the same tools (APIs, CLIs, message apps) but in a fraction of the time. The article above walks through the full setup and shows the working end-state.

How do I what is hyperframes??

Start with the prerequisites listed in the article. For most tutorials that's a GolemWorkers account, the target tool's API credentials, and ~15 minutes. The article walks through each prerequisite as it becomes relevant, so you can read top-to-bottom or jump to a specific step.

How long does it take to set up automate hyperframes with openclaw?

The first-time setup takes 20-45 minutes including account creation, API key exchange, and a smoke-test run. Subsequent runs take under a minute because the agent persists its configuration. The exact timing is documented in each step of the article.

How much does automate hyperframes with openclaw cost?

GolemWorkers charges per agent execution (see golemworkers.com/pricing for current rates). The target tool's own API costs are separate and usually negligible for personal/team-scale use. The article includes a 'cost section' near the end where applicable.

What are alternatives to automate hyperframes with openclaw?

Common alternatives include Zapier (more expensive at scale, less flexible), Make (similar trade-offs), n8n (self-hosted, steeper setup), and Claude Code / Cursor (great for code-first workflows, less for ops/CRM/messaging). The article links to the relevant comparison piece where it exists in the cluster.