skills.rest
Chau165
Chau165COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-core

Defines the composition contract for building renderable HyperFrames HTML video projects.

Updated Jul 22, 2026
Search Tags:#motion graphics#video composition#hyperframes#html animation#gsap timeline#deterministic render#sub-composition
One-click install
npx skills add https://github.com/Chau165/local_skill --skill hyperframes-core-chau165
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-core
Source: https://github.com/Chau165/local_skill/tree/main/codex/skills/hyperframes-core
Command: npx skills add https://github.com/Chau165/local_skill --skill hyperframes-core-chau165

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes references (resource) components.

What problem does it solve? Building a video composition in HyperFrames requires strict structural rules — data-* timing attributes, clip tracks, sub-composition wiring, deterministic animation, and validation gates — and violating any of them produces silent render bugs. This Skill provides the complete technical contract so compositions render correctly the first time. ## Core Features & Use Cases - Composition Structure Rules: Defines the two root forms (standalone vs sub-composition), the one-paused-timeline contract, root sizing requirements, and data-* attribute semantics for clips, tracks, and media. - Deterministic Render Rules: Enforces seekable animation (no render-time clocks, unseeded randomness, or infinite repeats), the animatable-property allowlist, and layout contracts that prevent silent bugs automated gates miss. - Planning Formats & Validation: Covers STORYBOARD.md, BRIEF.md, and SCRIPT.md plan formats plus the lint/check/snapshot validation workflow before rendering. - Use Case: When asked to build a motion-explainer video, use this Skill to scaffold a modular project with sub-compositions per scene, a root-level audio track, and a registered GSAP timeline that passes npx hyperframes check. ## Quick Start Read this skill before writing any composition HTML, then build a minimal composition with a sized root, data-start="0", and one paused GSAP timeline registered on window.__timelines.

Frequently Asked Questions about hyperframes-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a HyperFrames composition in HTML?▼

Create a root element with data-composition-id, data-width, data-height, data-start="0", and data-duration, then register one paused GSAP timeline at window.__timelines keyed by that id. Timed child elements use class="clip" with data-start, data-duration, and data-track-index.

What is the difference between a standalone composition and a sub-composition?▼

A standalone composition's root sits directly in body with no template wrapper, while a sub-composition must be wrapped in a template element because the runtime only clones template contents. The host slot's data-composition-id must exactly match the inner template's id and timeline key.

Why does my HyperFrames render come out black or blank?▼

Common causes include a background painted on the composition root instead of a full-bleed child, duplicate video or image ids across files, or an unsized root collapsing to zero height. Put scene fills on a position:absolute inset:0 child and prefix sub-composition ids.

Can I use setTimeout or Math.random in a HyperFrames animation?▼

No. The renderer seeks frame-by-frame, so every frame must be reproducible from its time value alone. Render-time clocks, unseeded randomness, network fetches, input state, and infinite repeats are banned; use a seeded PRNG and finite repeat counts.

How do I validate a HyperFrames project before rendering?▼

Run npx hyperframes check and confirm zero findings across lint, runtime, layout, motion, and contrast, then snapshot sub-composition projects at scene midpoints and inspect frames. Use npx hyperframes preview for review and render only after user approval.

When should I split a video into sub-compositions?▼

Split when the video has clear scene cuts, scenes exceed roughly 100 lines of markup, a scene is reusable, or continuous audio spans multiple visual segments. Keep index.html thin with slots per scene and audio on a higher track index at the root.

Related Skills

Explore More Design & Creative Skills→
DeliciousHouseDeliciousHouse
2

ad-designer

Generate brand-aligned Meta ad creatives in multiple aspect ratios with Nano Banana Pro.

Community
Advanced
EmasoftEmasoft

amw-hyperframes-bridge

Renders HTML compositions to MP4 video via the external Hyperframes CLI.

Community
Advanced
zeitlinbzeitlinb

hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Community
Advanced
whyiloveher2411whyiloveher2411

hyperframes-core

Create HTML compositions with video, animation, and interactive elements using data attributes and timelines.

Community
Advanced