skills.rest
Sma1lboy
Sma1lboyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-core

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

136|8|Updated May 9, 2026
Search Tags:#timeline#composition#animation#gsap#deterministic-render#sub-composition#html-to-video
One-click install
npx skills add https://github.com/Sma1lboy/rove --skill hyperframes-core-sma1lboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-core
Source: https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes/core
Command: npx skills add https://github.com/Sma1lboy/rove --skill hyperframes-core-sma1lboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing HTML that renders correctly as video requires a strict contract: timing declared via data-* attributes, a single paused seekable GSAP timeline per composition, framework-owned media playback, and deterministic frame output. This Skill encodes that contract so compositions render correctly instead of failing silently at render time. ## Core Features & Use Cases - Composition contract: Defines the two root forms (standalone vs sub-composition), required data-* attributes, track/clip timing rules, and the window.__timelines registration pattern. - Silent-bug prevention: Documents non-negotiable rules that lint/validate/inspect miss, such as sized roots, template transport rules, host-id matching, and direct-child video placement. - Reference library: Eleven on-demand references cover minimal skeletons, modular architecture, sub-composition wiring, determinism rules, Tailwind v4, storyboards, and subagent dispatch. - Use Case: When asked to build a 30-second product video as HTML, use this Skill to structure index.html with scene sub-compositions, register one paused timeline per composition id, and pass the CLI validation gate before rendering. ## Quick Start Read this Skill before writing any composition HTML, then ask the agent to build a HyperFrames composition with a sized root, timed clips, and a 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 div with data-composition-id, data-width, data-height, and data-duration, add timed child clips with data-start, data-duration, and data-track-index, then register one paused GSAP timeline on window.__timelines keyed by the composition id. The minimal-composition reference shows the smallest working skeleton.

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

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

Why does my sub-composition render with unstyled text or no animation?▼

Three cross-file pitfalls pass lint but break at render: styles placed in head instead of inside the template, a host data-composition-id that differs from the inner template id and timeline key, and styling the root by class instead of #root, which the CSS scoper drops.

Can I use Tailwind CSS in a HyperFrames composition?▼

Yes, when the project is scaffolded with hyperframes init --tailwind, which pins @tailwindcss/browser@4.2.4. Use v4 CSS-first @theme and @utility blocks, avoid v3 @tailwind directives, breakpoints, transitions, and interaction variants, and keep render-critical motion in GSAP.

Why does my video element render black or blank in the output?▼

Video must be a direct child of the host composition root, never inside a sub-composition template or wrapper div, or the framework never seeks or decodes it. Per-scene motion on host media must be authored on the main timeline at global time, since sub-comp timelines cannot reach host elements.

What animation patterns are forbidden in HyperFrames renders?▼

Render-time clocks, unseeded Math.random, network fetches, input state, and repeat: -1 are banned because every frame must be reproducible from its time value alone. Animate only the visual-property allowlist such as opacity, transforms, and colors, never display or visibility.

Related Skills

Explore More Design & Creative Skills→
LingoJackLingoJack
6

hyperframes

Generate deterministic HyperFrames HTML video compositions with GSAP timelines.

Community
Advanced
compozycompozy
182

hyperframes-cli

Scaffold, validate, inspect, preview, and render HTML timeline compositions to MP4/WebM.

Official
Intermediate
heygen-comheygen-com
40.2k

gsap

Create deterministic GSAP timelines and tweens for HyperFrames compositions.

Official
Intermediate
big4council-progbig4council-prog

hyperframes

Render GSAP-driven HTML compositions into MP4/WebM videos with FFmpeg.

Community
Advanced