skills.rest
ehadziabdic
ehadziabdicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-core

Build renderable HyperFrames video compositions from HTML with data-attribute timing and GSAP timelines.

Updated Sep 23, 2026
Search Tags:#html#video#composition#animation#gsap#render#hyperframes
One-click install
npx skills add https://github.com/ehadziabdic/WAgents --skill hyperframes-core-ehadziabdic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-core
Source: https://github.com/ehadziabdic/WAgents/tree/main/opencode/skills/hyperframes-core
Command: npx skills add https://github.com/ehadziabdic/WAgents --skill hyperframes-core-ehadziabdic

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing HTML that renders correctly as video requires knowing HyperFrames' exact composition contract — timing attributes, clip rules, timeline registration, and determinism constraints — and violating any of them produces silent render failures or lint errors. ## Core Features & Use Cases - Composition Contract: Defines the two root forms (standalone vs sub-composition), the data-* timing attributes, class="clip" conventions, tracks, and per-instance variables. - Pitfall Prevention: Documents lint-caught errors (CSS/GSAP transform conflicts, crossorigin on media, nested timed videos, missing audio ids) and silent bugs automated gates miss. - Validation Workflow: Prescribes npx hyperframes check, snapshot, preview, and render sequencing before final output. - Use Case: When asked to create a 30-second product video as HTML, read this skill first to structure index.html with sub-composition slots, register one paused GSAP timeline per composition id, and pass lint on the first build. ## Quick Start Read this skill before writing any HyperFrames composition HTML, then scaffold a minimal composition and validate it with npx hyperframes check.

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 div with data-composition-id, data-width, data-height, and data-duration, add timed elements with data-start and data-duration, and register one paused GSAP timeline at window.__timelines keyed by the composition id. Validate with npx hyperframes check before rendering.

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

A standalone index.html places the root div directly in body with no template wrapper. A sub-composition loaded via data-composition-src must wrap its root, styles, and scripts inside a template element, because the runtime clones only template contents and discards the head.

Why does my HyperFrames render show unstyled or blank content?▼

Sub-composition styles placed in head are dropped because the runtime only clones template contents, so move style and script tags inside the template. Blank animation also occurs when the host data-composition-id does not match the sub-composition's internal id and timeline key.

Can I use CSS transforms together with GSAP tweens?▼

No, pairing a CSS initial transform with a GSAP tween on the same property causes a conflict that lint rejects as gsap_css_transform_conflict. Set the initial state inside the tween using gsap.fromTo or xPercent/yPercent instead.

Why is my rendered video silent even though audio exists?▼

Every audio element needs an id because the mixer selects audio[id][src], so an id-less audio element is never mixed and lint reports media_missing_id. Also keep audio on a separate audio element rather than relying on the muted video.

What animation patterns are banned in HyperFrames renders?▼

Render-time clocks, unseeded Math.random, network fetches, input state, and infinite repeat: -1 loops are banned because frames must be reproducible from time alone. Tweening display, visibility, or autoAlpha on a clip element is also rejected since the framework owns clip visibility.

Related Skills

Explore More Design & Creative Skills→
buda-aibuda-ai
25

audio-extractor

Extract and enhance audio from video files for MP3/WAV/AAC output.

Official
Intermediate
simpletibrsimpletibr
9

hyperframes-cli

Validates, previews, and renders HyperFrames video compositions via the npx CLI.

Official
Intermediate
firstsun-devfirstsun-dev
3

hyperframes-animation

Compose deterministic GSAP animations for HyperFrames video compositions using atomic motion rules and scene blueprints.

Official
Advanced
MCERQUAMCERQUA
1

hyperframes

Convert HTML compositions into frame-accurate video files using headless Chrome and FFmpeg.

Community
Intermediate