hyperframes-core
PopularThe HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
HyperFrames Core
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.
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.
References
| 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.
Building a composition
Two root forms (not interchangeable)
- Standalone (top-level
index.html) — root<div data-composition-id="…">sits directly in<body>, no<template>wrapper (wrapping it hides all content and breaks rendering). - Sub-composition (loaded via
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.
Root must be sized (silent layout bug)
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.
One paused timeline
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/.
Non-negotiable rules (silent bugs lint/validate/inspect won't catch)
Surfaced here; full rationale in the linked reference. Do not violate:
- No render-time clocks / unseeded
Math.random/ network / input-state; norepeat: -1(use a finite count). →determinism-rules.md - Animate only the visual-property allowlist; never
display/visibility; nogsap.seton later-scene clips. →determinism-rules.md - No
<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.md- Every
idmust 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 bygetElementById, and cross-file dupes slip pastlint. →composition-patterns.md - A full-screen scene fill goes on a full-bleed child (
position:absolute; inset:0), never on the composition root itself — the producer's frame compositing can drop the root element's ownbackground(the frame renders black) even though preview/snapshotshow it correctly. →composition-patterns.md
Editing existing compositions
- Read the files first. Preserve unrelated timing, tracks, IDs, variables, media paths.
- Match existing composition IDs and timeline keys.
- Adding a clip: pick a non-overlapping
data-track-indexor adjust surrounding timing intentionally. - Adding a sub-composition: verify its internal
data-composition-idbefore wiring the host.
Validation
Use hyperframes-cli for command details
- [ ]
npx hyperframes lintpasses (0 errors) - [ ]
npx hyperframes validatepasses (0 console errors) - [ ]
npx hyperframes inspectpasses (0 errors) - [ ] Projects with sub-compositions:
npx hyperframes snapshot --at <midpoints>and eyeball each frame - [ ]
npx hyperframes previewfor review (the user can edit anything in Studio's timeline) - [ ]
npx hyperframes renderonly after the user approves
You Might Also Like
Related Skills
internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
anthropicsUse this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
anthropics
documentation-writer
Diátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.
github
content-strategy
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," "content planning," "editorial calendar," "content marketing," "content roadmap," "what content should I create," "blog topics," "content pillars," or "I don't know what to write." Use this whenever someone needs help deciding what content to produce, not just writing it. For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit. For social media content specifically, see social.
coreyhaines31copy-editing
When the user wants to edit, review, or improve existing marketing copy, or refresh outdated content. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' 'copy sweep,' 'tighten this up,' 'this reads awkwardly,' 'clean up this text,' 'too wordy,' 'sharpen the messaging,' 'refresh this content,' 'update this page,' 'this content is outdated,' or 'content audit.' Use this when the user already has copy and wants it improved or refreshed rather than rewritten from scratch. For writing new copy, see copywriting.
coreyhaines31
hyperframes-creative
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
heygen-com