skills.rest
brittaniebuffiecsu
brittaniebuffiecsuCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes

Render HTML compositions to MP4/WebM videos with HyperFrames.

1|Updated Feb 17, 2026
Search Tags:#social media#video production#GSAP#video composition#HTML animation
One-click install
npx skills add https://github.com/brittaniebuffiecsu/zerogravityclaw --skill hyperframes-brittaniebuffiecsu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/brittaniebuffiecsu/zerogravityclaw/tree/main/src/hermes-core/optional-skills/creative/hyperframes
Command: npx skills add https://github.com/brittaniebuffiecsu/zerogravityclaw --skill hyperframes-brittaniebuffiecsu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, node, hyperframes, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of creating dynamic video compositions by allowing users to create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. It allows users to render HTML compositions to MP4/WebM videos, animate text/logos/charts over media, sync captions to audio, and add TTS narration, converting websites into videos.

Core Features & Use Cases

  • HTML-based Video Compositions: Users can create HTML files with data attributes for timing, GSAP timelines for animation, and CSS for appearance.
  • Animated Title Cards, Social Overlays, Talking-Head Videos: Users can create these with integrated features like audio-reactive visuals, shader transitions, and TTS narration.
  • Convert Websites to Videos: Users can capture websites and convert them into promotional videos.
  • Use Case: If a user wants to create an engaging promotional video for a product that includes an animated title card, a social media overlay, and a talking-head video with captions and TTS narration, they can use HyperFrames to do so.

Quick Start

Initialize a new project with the hyperframes init my-video command, write the HTML composition, use the provided commands to lint, validate, inspect, and preview the composition, and finally, render the video with the hyperframes render command.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I convert HTML compositions to MP4 video?▼

To convert HTML compositions to MP4 video, you can render frame-by-frame captures of HTML/CSS/JS animations and encode them using FFmpeg. This allows deterministically rendering animated HTML content into standard video formats.

Can I use GSAP timelines to animate video compositions?▼

Yes, you can use GSAP timelines to animate video compositions by defining animations within HTML files. The engine captures these GSAP-driven animations frame-by-frame to produce deterministic video output.

What do I need to render HTML animations deterministically for social media?▼

To render HTML animations deterministically for social media, you need FFmpeg and Node.js installed, specifically the HyperFrames CLI and associated packages. These dependencies capture frames and encode them into MP4 or WebM videos.

How do I create animated title cards and social overlays from HTML?▼

You create animated title cards and social overlays by building HTML files with data attributes for timing and CSS for appearance. GSAP timelines drive the animations, which are then captured and encoded into video.

What is the best way to sync captions and TTS narration to talking-head videos?▼

The best way to sync captions and TTS narration to talking-head videos is by integrating these features directly within an HTML composition. The engine captures the synchronized audio and visual elements frame-by-frame for the final output.

Does HyperFrames work with audio-reactive visuals and shader transitions?▼

Yes, HyperFrames works with audio-reactive visuals and shader transitions by capturing these dynamic HTML, CSS, and JS effects frame-by-frame. This ensures complex visual effects are deterministically encoded into the final video file.

Related Skills

Explore More Design & Creative Skills→
bacocobacoco
57

Skill Builder & CLI Orchestration

Automate AiDesigner Skill scaffolding, validation, and Claude CLI integration.

Community
Intermediate
SignmanalSignmanal
1

hyperframes

Render HTML/GSAP compositions into MP4 or WebM videos with captions.

Community
Advanced
MarbleSodasMarbleSodas

hyperframes

Render HTML compositions with GSAP timelines into MP4/WebM videos via FFmpeg.

Community
Advanced
robertbr123robertbr123

hyperframes

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

Community
Advanced