skills.rest
vibe-motion
vibe-motionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes-core

Build renderable HyperFrames compositions from HTML and GSAP with deterministic rendering constraints.

236|31|Updated Jun 29, 2026
Search Tags:#html#animation#deterministic#gsap#video-rendering#hyperframes#sub-compositions
One-click install
npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-core
Source: https://github.com/vibe-motion/auto-motion/tree/main/exampleFolder/.claude/skills/hyperframes/core
Command: npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-core

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you build a correct, renderable HyperFrames composition without the silent timing, layout, media, or validation failures that can break a video export.

Core Features & Use Cases

  • Composition Structure: Define the required root, clips, tracks, and sub-composition wiring for a seekable HTML video project.
  • Deterministic Animation Rules: Follow the paused timeline, property allowlist, and layout constraints needed for reproducible frame-by-frame rendering.
  • Media and Variables: Place media correctly, pass per-instance variables, and keep host and sub-composition responsibilities separated.
  • Validation and Debugging: Use the reference guidance to avoid common pitfalls that pass simple checks but fail during composited render.
  • Use Case: A motion designer or engineer can use this Skill to turn a rough scene idea into a valid HyperFrames composition that renders cleanly to MP4.

Quick Start

Open the HyperFrames core guide and follow it to create or edit a composition that registers the right timeline, places media correctly, and passes the required validation rules.

Frequently Asked Questions about hyperframes-core

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

FAQPage Schema
How do I render HTML and GSAP animations to video without timing failures?▼

To render HTML and GSAP animations to video without timing failures, you must enforce a paused timeline registration and follow strict layout constraints for reproducible frame-by-frame rendering.

Why does my HTML video export break during composited rendering?▼

Your HTML video export breaks during composited rendering due to silent layout or media failures that pass simple checks but fail during composited render, often caused by missing required root attributes or incorrect data-track sequencing.

How do I structure modular sub-compositions for a seekable HTML video project?▼

To structure modular sub-compositions for a seekable HTML video project, define the required root, clips, tracks, and sub-composition wiring while keeping host and sub-composition responsibilities separated and placing media correctly as direct children.

What are the deterministic rendering constraints for GSAP frame-by-frame rendering?▼

Deterministic rendering constraints for GSAP frame-by-frame rendering require using a paused timeline, a property allowlist, and specific layout constraints to ensure reproducible output and prevent silent validation failures during video export.

Can I use media-driven clips with per-instance variables in HTML video rendering?▼

Yes, you can use media-driven clips with per-instance variables in HTML video rendering by placing media correctly as direct children, passing the variables appropriately, and maintaining proper data-track sequencing for valid composition.

Related Skills

Explore More Software Engineering Skills→
LingoJackLingoJack
6

hyperframes

Generate deterministic HyperFrames HTML video compositions with GSAP timelines.

Community
Advanced
cxnaivecxnaive

hyperframes

Render HTML, CSS, and GSAP compositions into MP4 and WebM videos.

Community
Advanced
whyiloveher2411whyiloveher2411

hyperframes-core

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

Community
Advanced
video-production-buddyvideo-production-buddy
602

hyperframes

Route video production requests to HyperFrames workflows for HTML-based compositions.

Official
Advanced