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

hyperframes

Routes video and animation requests to HyperFrames workflows that render video from HTML compositions.

136|8|Updated May 9, 2026
Search Tags:#motion graphics#video generation#gsap#video rendering#workflow routing#hyperframes#html animation
One-click install
npx skills add https://github.com/Sma1lboy/rove --skill hyperframes-sma1lboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes
Command: npx skills add https://github.com/Sma1lboy/rove --skill hyperframes-sma1lboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing the right workflow for a video or animation request is error-prone when multiple specialized workflows exist. This Skill acts as the entry point for any request to create, edit, animate, or render video with HyperFrames, mapping the user's intent to the correct specialized workflow and pointing to the technical guides for composition, CLI, and registry usage. ## Core Features & Use Cases - Intent Routing: Classifies requests into workflows such as faceless-explainer, pr-to-video, embedded-captions, talking-head-recut, motion-graphics, slideshow, or general-video based on input type and goal. - Composition Contract: Documents how HyperFrames renders video from HTML using data-* timing attributes, clips, tracks, sub-compositions, and deterministic GSAP timelines. - CLI Dev Loop: Covers the npx hyperframes commands for init, lint, validate, inspect, snapshot, preview, render, and AWS Lambda cloud rendering. - Registry Integration: Explains installing and wiring reusable blocks and components via hyperframes add. - Use Case: A user asks to turn a GitHub PR into a changelog video; this Skill routes to the pr-to-video workflow, then the core and CLI guides drive authoring, validation, and rendering of the MP4. ## Quick Start Ask the agent to make a video from your input, such as turning a GitHub PR link into a short changelog video, and let it route to the right HyperFrames workflow.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I render a video from HTML with HyperFrames?▼

Author an HTML composition with a root element carrying data-composition-id, data-width, data-height, and data-duration, register a paused GSAP timeline on window.__timelines, then run npx hyperframes lint, validate, preview, and render to produce an MP4.

Which HyperFrames workflow should I use for my video request?▼

Match the input: a GitHub PR goes to pr-to-video, explaining a concept from text goes to faceless-explainer, captioning existing footage goes to embedded-captions, short design-led pieces under ten seconds go to motion-graphics, and anything else goes to general-video.

Can HyperFrames render videos in the cloud on AWS?▼

Yes, the hyperframes lambda command deploys a SAM stack with Lambda, Step Functions, and S3, then renders remotely via lambda render with a --wait flag. Use it for long, 4K, or batch renders when AWS credentials are configured.

Why does my HyperFrames sub-composition render blank or black?▼

Common causes are a host data-composition-id that does not match the sub-composition's internal id and timeline key, styles placed outside the template wrapper, or a video element nested inside a sub-composition instead of the host root. Run hyperframes snapshot to catch these cross-file mount failures.

What are the determinism rules for HyperFrames animations?▼

Every frame must be reproducible from its time value alone, so avoid Date.now, unseeded Math.random, network fetches, input state, and infinite repeats. Animate only allowlisted visual properties like opacity, transforms, and color, and never animate display or visibility.

Related Skills

Explore More Design & Creative Skills→
Peter-Swain-IncPeter-Swain-Inc
1

youtube-script-description-writer

Generate YouTube video scripts and SEO-optimized descriptions from a video topic.

Official
Advanced
cloudofgeorgecloudofgeorge

video

Create marketing videos using AI generation models, AI avatars, and programmatic video frameworks.

Community
Intermediate
vibe-motionvibe-motion
236

motion-graphics

Plan and build short motion graphics with deterministic GSAP animation and MP4 rendering.

Official
Advanced
CDO-07-NewCDO-07-New

video-editing

Structure raw video footage into editing workflows with FFmpeg and Remotion.

Official
Advanced