skills.rest
cosmicstack-labs
cosmicstack-labsOFFICIAL
Explore all skills by this author →
Website𝕏@cosmicstackGitHub

hyperframes

Create HTML-driven video compositions with timed clips and deterministic animation for MP4 rendering.

364|53|Updated May 9, 2026
Search Tags:#captions#ffmpeg#video rendering#hyperframes#html composition#gsap timelines#tts narration
One-click install
npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill hyperframes-cosmicstack-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/cosmicstack-labs/mercury-agent-skills/tree/main/categories/development/hyperframes
Command: npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill hyperframes-cosmicstack-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames removes the friction of building videos by letting you author the entire timeline and layout in HTML, then reliably render it to MP4.

Core Features & Use Cases

  • HTML-first composition authoring: Define clips, tracks, timing, and dimensions using data-* attributes plus CSS for the visual end-state.
  • Deterministic animation timelines: Drive scene entrances/exits with GSAP timelines aligned to composition time.
  • Production workflow support: Generate narration audio with TTS, transcribe it for word-level captions, parameterize renders with variables, and lint/inspect before rendering.

Quick Start

Use the hyperframes skill to render a 15-second intro video for your topic by having your agent create a project, start a local preview, and then run the render command.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I render HTML to MP4 video using FFmpeg?▼

To render HTML to MP4, HyperFrames composes timed clips and GSAP animations into an HTML layout, then uses FFmpeg to deterministically render the composition into a final video file.

Can I generate word-level captions synchronized with TTS narration?▼

Yes, you can generate synchronized captions by using TTS to create narration audio, transcribing it for word-level timing data, and aligning the text with GSAP timelines in your HTML composition.

What are the prerequisites for HTML video composition and rendering?▼

HTML video composition requires Node.js version 22 or higher and FFmpeg installed in your environment to process the GSAP timelines, data-composition attributes, and render the output to MP4.

How do I create deterministic animation timelines for video scenes?▼

Deterministic animation timelines are created using GSAP to drive scene entrances and exits, aligning the animations precisely to composition time before rendering the HTML layout to an MP4 file.

Can I parameterize video renders with variables for template workflows?▼

Yes, you can parameterize renders with variables to support template-driven workflows, allowing you to programmatically generate multiple video variations like product intros or social hooks from a single composition.

What is the best way to build a timed video layout in HTML?▼

The best way to build timed video layouts is authoring clips, tracks, and dimensions using data-* attributes and CSS for the visual end-state, then rendering the composition to MP4 via FFmpeg.

Related Skills

Explore More Software Engineering Skills→
MuzeWinterMuzeWinter
1

hyperframes-cli

Coordinates HyperFrames video project setup, validation, previewing, and rendering via CLI workflows.

Community
Advanced
devMoezdevMoez
1

hyperframes

Render HTML+GSAP compositions to MP4/WebM video with FFmpeg.

Community
Advanced
robertbr123robertbr123

hyperframes

Generate animated video compositions from HTML with GSAP timelines and FFmpeg.

Community
Advanced
vericontextvericontext
164

vibe-scene

Manage VibeFrame scene project lifecycle with HTML composition and MP4 rendering.

Official
Advanced