hyperframes-core

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

IndexedMIT★ 2

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

Cite this page

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