hyperframes

hyperframes is a skill for Claude Code, Codex from cosmicstack-labs/mercury-agent-skills. It costs 74 tokens per session (3,923 once invoked), scanned A, original, MIT.

A guide to creating animated videos as HTML compositions with HyperFrames, using HTML for structure, CSS for appearance, and timelines for animation.

In plain words
What is it for?
Use it to author scenes, animate text and media, add captions or speech, create audio-reactive effects and transitions, preview compositions, and render finished videos.
Why use it?
It lets coding agents work on video scenes in familiar web files while keeping timing, media, captions, narration, and transitions organized.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/cosmicstack-labs/mercury-agent-skills/hyperframes
Any agent
npx skills add cosmicstack-labs/mercury-agent-skills --skill hyperframes
Clone the repo
git clone --depth 1 https://github.com/cosmicstack-labs/mercury-agent-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for hyperframes

README.md
[![agentmods](https://agentmods.dev/badge/skills/cosmicstack-labs/mercury-agent-skills/hyperframes.svg)](https://agentmods.dev/skills/cosmicstack-labs/mercury-agent-skills/hyperframes)
Your own site
<a href="https://agentmods.dev/skills/cosmicstack-labs/mercury-agent-skills/hyperframes"><img src="https://agentmods.dev/badge/skills/cosmicstack-labs/mercury-agent-skills/hyperframes.svg" alt="Measured on agentmods" height="20"></a>
Per session 74 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,923 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00074 $0.03923
Opus 5 $0.00037 $0.01962
Sonnet 5 $0.00015 $0.00785
Haiku 4.5 $0.00007 $0.00392

Measured 4d ago against content hash ca2522155c07, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

hyperframes scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

categories/development/hyperframes/SKILL.md · 383 lines

How it starts

The opening of the file, as written. The whole thing — 383 lines — stays where its author put it; the contents beside it link to each section on GitHub.

HyperFrames — Video Composition Authoring

Write HTML. Render video. Built for agents.

HyperFrames is an open-source video rendering framework where HTML is the source of truth. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.

Requirements: Node.js >= 22, FFmpeg Install: \Created my-video/ AGENTS.md CLAUDE.md hyperframes.json index.html meta.json package.json

Get started:

  1. Install AI coding skills (one-time): npx skills add heygen-com/hyperframes

  2. Open this project with your AI coding agent: cd my-video then start Claude Code, Cursor, or your preferred agent

  3. Try a starter prompt: "Using /hyperframes, create a 15-second intro about [your topic]" More patterns: hyperframes.heygen.com/guides/prompting

  4. Preview in the browser: cd my-video && npm run dev

  5. Check the composition: cd my-video && npm run check

  6. Render to MP4 when ready: cd my-video && npm run render

Full docs: hyperframes.heygen.com License: Apache 2.0 (fully open source)


Core Concepts

The Composition Model

Every video is a composition — an HTML document with a root element identified by . Inside it, clips (video, audio, img, div elements) are placed on tracks using . Each clip has a and in seconds. The composition has explicit and in pixels.

Data Attributes Reference

All Clips
Attribute Required Values
uid=501(salmanqureshi) gid=20(staff) groups=20(staff),12(everyone),61(localaccounts),79(_appserverusr),80(admin),81(_appserveradm),98(_lpadmin),33(_appstore),100(_lpoperator),204(_developer),250(_analyticsusers),395(com.apple.access_ftp),398(com.apple.access_screensharing),399(com.apple.access_ssh),400(com.apple.access_remote_ae),701(com.apple.sharepoint.group.1) Yes Unique identifier
Yes Seconds or clip ID reference (, )
Required for img/div/compositions Seconds. Video/audio defaults to media duration.
Yes Integer. Same-track clips cannot overlap.
No Trim offset into source (seconds)
No 0-1 (default 1)

Read the full file on GitHub · 383 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 383 lines · 74 tokens per session scan A ca2522155c07

Subscribe to this mod's changes

hyperframes is a skill published in the GitHub repository cosmicstack-labs/mercury-agent-skills (471 stars, last pushed 9d ago), licensed MIT. It adds 74 tokens to every session and 3,923 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

fixing-motion-performance

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

ibelick/ui-skills · 45 tokens

wechat-article-writer

公众号/自媒体全流程。根据用户表述自动匹配:撰写文章、封面图、正文插图、风格提取。支持多种写作风格。当用户提到写公众号、技术博客、公众号封面、正文插图、步骤图、演示图、流程示意、分析写作风格、克隆文风、模仿爆款、提取风格时使用。详见 reference 目录。.

xstongxue/best-skills · 105 tokens

openstoryline-use

Use this skill when OpenStoryline is already installed and the user wants to start the local MCP/Web services, create or continue a session, send editing instructions, perform multi-turn re-editing, and verify rendered video outputs, as well as Chinese requests like “启动 OpenStoryline”, “把 OpenStoryline 跑起来”, “用…

FireRedTeam/FireRed-OpenStoryline · 80 tokens

gemini-watermark-remover

Remove visible Gemini image watermarks from local image files by calling the project's CLI. Use when the user wants an agent to clean one or more local Gemini-generated images and save de-watermarked output files.

GargantuaX/gemini-watermark-remover · 47 tokens

baocut

BaoCut-only operator for the installed bcut CLI and .bcut projects. Implicitly trigger only when the request explicitly names BaoCut or bcut, targets a .bcut project or BaoCut Subtitle Studio, or continues a BaoCut workflow already established in the conversation. Do not trigger solely for generic audio or video…

JimLiu/baocut · 160 tokens

graphic-ebook

Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says "create an ebook", "design a lead magnet", "make a PDF guide", "build a gated content piece", "write a B2B ebook", "design a white paper", "create a…

Varnan-Tech/opendirectory · 97 tokens