hyperframes-core

HyperFrames composition contract — HTML structure, data-* attributes, clips, and tracks.

IndexedMIT★ 2

Chalk Labs

Need help deploying hyperframes-core?

Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.

Book a call

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/christiansalazar-wk-hyperframes-core

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

About

HyperFrames composition contract — HTML structure, data-* attributes, clips, and tracks. The authoritative reference for how to write valid HyperFrames HTML.

Use cases: documents, frontend, data, writing

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools: No tools found
Secrets: None asked for
Install scripts: None found

Network hosts it talks to 1

codeload.github.com · found in install command

Files it touches

~/.claude/skills/hyperframes-core

What's inside

Skill name: hyperframes-core
Description: HyperFrames composition contract — HTML structure, data-* attributes, clips, and tracks. The authoritative reference for how to write valid HyperFrames HTML.
License: MIT
Metadata: author: heygen-com · source: https://hyperframes.heygen.com/quickstart · version: 1.0
Instructions: 103 lines in SKILL.md · view on GitHub

Files (1)

SKILL.md

SKILL.md (first lines)

# HyperFrames Core — Composition Contract

## HTML Skeleton

```html
<!DOCTYPE html>
<html data-hf-version="1">
<head>
  <meta charset="UTF-8" />
  <meta name="hf:canvas-width" content="1920" />
  <meta name="hf:canvas-height" content="1080" />
  <meta name="hf:fps" content="30" />
  <meta name="hf:duration" content="auto" />
</head>
<body>
  <div data-hf-scene="intro" data-hf-duration="5s">
    <div data-hf-track="background">
      <div data-hf-clip data-hf-start="0s" data-hf-duration="5s"
           style="background:#111;width:100%;height:100%;position:absolute;"></div>
    </div>
    <div data-hf-track="title">
      <div data-hf-clip data-hf-start="0.5s" data-hf-duration="4s"
           data-hf-animate="fade-in">
        <h1>Hello World</h1>
      </div>
    </div>
  </div>
</body>
</html>
```

## Canvas Meta Tags

| Tag | Default | Notes |
|---|---|---|
| `hf:canvas-width` | 1920 | pixels |
| `hf:canvas-height` | 1080 | pixels |
| `hf:fps` | 30 | frames per second |
| `hf:duration` | auto | total; or explicit e.g. `60s` |
| `hf:bg-color` | #000 | default scene background |

## Scene Attributes (`data-hf-scene`)

| Attribute | Type | Description |
|---|---|---|
| `data-hf-scene` | string | scene name / id |
| `data-hf-duration` | time | `5s`, `10s`, `auto` |
| `data-hf-transition` | string | `cut`, `fade`, `slide-left`, `slide-right`, `zoom` |
| `data-hf-transition-duration` | time | default `0.5s` |
| `data-hf-bg` | url or color | scene background |

## Track Attributes (`data-hf-track`)

| Attribute | Type | Description |
|---|---|---|
| `data-hf-track` | string | track name |
| `data-hf-z` | number | z-index stacking |
| `data-hf-mute` | boolean | mute audio on this track |

## Clip Attributes (`data-hf-clip`)

| Attribute | Type | Description |
|---|---|---|
| `data-hf-clip` | — | marks element as a clip |
| `data-hf-start` | time | start offset within scene |
| `data-hf-duration` | time | clip duration; `auto` = content duration |
| `data-hf-end` | time | alternative to duration |
| `data-hf-animate` | string | shorthand animation preset |
| `data-hf-in` | string | entry animation |
| `data-hf-out` | string | exit animation |
| `data-hf-volume` | 0–1 | audio volume |
| `data-hf-speed` | number | playback speed multiplier |
| `data-hf-loop` | boolean | loop media |
| `data-hf-trim-start` | time | trim media from start |
| `data-hf-trim-end` | time | trim media at end |

## Media Clips

```html
<!-- Video -->
<video data-hf-clip data-hf-start="0s" src="assets/hero.mp4" />

<!-- Image (static, held for duration) -->
<img data-hf-clip data-hf-start="0s" data-hf-duration="3s" src="assets/logo.png" />

<!-- Audio -->
<audio data-hf-clip data-hf-start="0s" src="assets/music.mp3" data-hf-volume="0.4" />

<!-- TTS narration -->
<div data-hf-clip data-hf-tts="Hello, welcome to the demo." data-hf-start="1s" />
```

## Time Format

All time values use CSS-style notation: `0s`, `1.5s`, `2000ms`. Fractional seconds are allowed.

## Validation

```bash
npx hyperframes lint index.html
```

From christiansalazar-wk/ai-lore, MIT.

Signals

Stars: 2
Forks: 0
Open issues: 0
Last commit (this folder): Jul 6, 2026 (3 months ago)

From GitHub (fetched Oct 24, 2026).

Details

Version: 1.0
License: MIT
Repository: github.com/christiansalazar-wk/ai-lore
First seen: Oct 24, 2026
Last checked: Oct 24, 2026
Source: GitHub github-graphql

More from heygen-com

Done for you

Rather not set it up yourself?

Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.

See how we build AI agents →Read the case studies

Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.

launches shipped: 50+; launches shipped
media placements: 500+; media placements
founders on every account: 2; founders on every account

Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block

Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.

Get hyperframes-core running in your business

Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.

Need help deploying hyperframes-core?

Call Get help

Cite this page

hyperframes-core skill. Agent Mart. https://agentmart.dev/skills/christiansalazar-wk-hyperframes-core (last updated 2026-10-24)

Need help deploying hyperframes-core?

Install

About

Reviews

Permissions

Network hosts it talks to 1

Files it touches

What's inside

More from christiansalazar-wk/ai-lore

Signals

Details

More from heygen-com

Rather not set it up yourself?

Get hyperframes-core running in your business