Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From hyperframes
Technical contract for building HyperFrames video compositions in HTML. Covers DOM timing attributes, clip structure, sub-compositions, media playback, and determinism rules.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hyperframes:hyperframes-coreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
HyperFrames renders video from HTML. A composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework.
references/composition-patterns.mdreferences/data-attributes.mdreferences/determinism-rules.mdreferences/full-screen-motion.mdreferences/minimal-composition.mdreferences/script-format.mdreferences/storyboard-format.mdreferences/sub-compositions.mdreferences/subagent-dispatch.mdreferences/tailwind.mdreferences/tracks-and-clips.mdreferences/variables-and-media.mdHyperFrames renders video from HTML. A composition is an HTML file whose DOM declares timing with data-* attributes, whose animation runtime is seekable, and whose media playback is owned by the framework.
This skill is the technical contract — how to build one hyperframes project. The body below is the build guide; per-topic detail lives in references/ (index next), read on demand. Other concerns live in the sibling domain skills — hyperframes-animation, hyperframes-creative, hyperframes-media, hyperframes-cli, hyperframes-registry. The capability map in /hyperframes says what each one covers.
| File | Read it to… |
|---|---|
references/minimal-composition.md | start from the smallest renderable composition skeleton |
references/composition-patterns.md | choose monolithic vs modular; structure a modular index.html; pick a sub-comp archetype |
references/data-attributes.md | look up any data-* (root / clip / sub-comp host / legacy aliases); use class="clip" |
references/tracks-and-clips.md | pick data-track-index, handle same-track overlap / z-index, time a clip relative to another |
references/sub-compositions.md | wire a sub-composition (host attrs, <template>, per-instance vars) and animate inside it |
references/variables-and-media.md | declare variables; place <video>/<audio>, set volume, trim |
references/determinism-rules.md | build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit |
references/full-screen-motion.md | author full-frame motion with shared backgrounds |
references/storyboard-format.md | author a STORYBOARD.md plan (+ the parsed manifest) |
references/script-format.md | author the optional SCRIPT.md locked narration |
references/subagent-dispatch.md | map subagent dispatch verbs (parallel fan-out / background / wait) to your harness |
references/tailwind.md | work in a Tailwind v4 project (init --tailwind; runtime contract differs from Studio's v3) |
For animation runtime specifics (GSAP API, Lottie, Three.js, etc.) go to hyperframes-animation → adapters/<runtime>.md.
index.html) — root <div data-composition-id="…"> sits directly in <body>, no <template> wrapper (wrapping it hides all content and breaks rendering).data-composition-src) — root must be wrapped in <template>.⚠ Transport rule: the runtime only clones
<template>contents; everything outside (incl.<head>styles/scripts) is discarded — put<style>/<script>inside the template. ⚠ Host-id rule: the host slot'sdata-composition-idmust exactly equal the inner template'sdata-composition-idand thewindow.__timelines["<id>"]key — no-mount/-slot/-hostsuffix.
File shape, host wiring, and the pre-render checklist → references/sub-compositions.md.
The standalone root needs an explicit sized box (width/height in px), and every ancestor down to a height:100% element must have a resolved height — otherwise a flex/100% child collapses to ~0 and content piles into the top-left corner. lint/validate/inspect do not catch this. Skeleton → references/minimal-composition.md.
Each composition registers exactly one gsap.timeline({ paused: true }) at window.__timelines["<id>"] (key = root data-composition-id), built synchronously at page load. Render duration = root data-duration, not timeline length. Don't manually nest sub-timelines into the host. Full contract (incl. non-GSAP runtimes) → references/determinism-rules.md + hyperframes-animation/adapters/.
lint/validate/inspect won't catch)Surfaced here; full rationale in the linked reference. Do not violate:
Math.random / network / input-state; no repeat: -1 (use a finite count). → determinism-rules.mddisplay/visibility; no gsap.set on later-scene clips. → determinism-rules.md<br> in body text; transformed elements must be block-level + sized; pulsing absolute decoratives need peak clearance. → determinism-rules.md<video>/<audio> must be a direct child of the host root (never inside a sub-comp <template>/wrapper); the framework owns playback. → variables-and-media.mdid must be unique across the assembled page; inside a sub-comp, prefix ids with the composition id (#<id>-hero). Duplicate <video>/<img> ids render blank — the producer injects frames by getElementById, and cross-file dupes slip past lint. → composition-patterns.mdposition:absolute; inset:0), never on the composition root itself — the producer's frame compositing can drop the root element's own background (the frame renders black) even though preview/snapshot show it correctly. → composition-patterns.mddata-track-index or adjust surrounding timing intentionally.data-composition-id before wiring the host.Use hyperframes-cli for command details
npx hyperframes lint passes (0 errors)npx hyperframes validate passes (0 console errors)npx hyperframes inspect passes (0 errors)npx hyperframes snapshot --at <midpoints> and eyeball each framenpx hyperframes preview for review (the user can edit anything in Studio's timeline)npx hyperframes render only after the user approvesnpx claudepluginhub heygen-com/hyperframes --plugin hyperframesCLI dev loop for HyperFrames video composition projects — scaffold, lint, visual inspect, and render via `npx hyperframes`. Use when initializing projects, debugging layout issues, or running the build/render environment.
Scaffolds, validates, previews, and renders HyperFrames video compositions via CLI (`npx hyperframes`). Also troubleshoots the build/render environment.
Drives the HyperFrames CLI dev loop: scaffold, lint, validate, inspect, preview, render, and cloud deploy on AWS Lambda. Use when running npx hyperframes commands or troubleshooting build/render environment.