skills.rest
simpletibr
simpletibrOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes

Author HTML-based motion compositions rendered to MP4 by the HyperFrames renderer.

9|Updated May 8, 2026
Search Tags:#motion graphics#gsap#mp4 rendering#kinetic typography#data-viz#hyperframes#html-to-video
One-click install
npx skills add https://github.com/simpletibr/simplicio-loop-marketing --skill hyperframes-simpletibr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/simpletibr/simplicio-loop-marketing/tree/main/.skills/hyperframes
Command: npx skills add https://github.com/simpletibr/simplicio-loop-marketing --skill hyperframes-simpletibr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating deterministic, re-renderable motion graphics (kinetic typography, quote cards, data-viz reels) requires a repeatable authoring process; this Skill defines the rules for writing HTML compositions that the HyperFrames renderer converts frame-accurately into MP4 video. ## Core Features & Use Cases - HTML-as-source compositions: Authors plain HTML files with data-start, data-duration, and data-track-index attributes, animated with paused GSAP timelines registered on window.__timelines. - Parametrized re-rendering: Declares variables via data-composition-variables so the same composition re-renders with new values (e.g., a weekly KPI reel with updated numbers). - Validation workflow: Enforces npx hyperframes lint and npx hyperframes inspect before rendering, and emits a manifest.json alongside the MP4 output. - Use Case: A marketing team needs a 12-second 9:16 weekly KPI reel; the Skill authors the composition with declared numeric variables, validates it, and produces render arguments so the same layout re-renders each week with fresh metrics. ## Quick Start Ask the agent to author a HyperFrames composition for a 9:16 motion quote card with a given composition ID, duration, and scene list, using the active client's design tokens.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I create an HTML-to-MP4 motion composition with HyperFrames?▼

Author a plain HTML file where the root element carries data-composition-id, data-width, and data-height, and each clip carries data-start, data-duration, and data-track-index. Animate with GSAP timelines created paused and registered on window.__timelines, then validate with npx hyperframes lint and inspect before rendering.

How do I re-render a HyperFrames video with new data?▼

Declare parameters in a data-composition-variables JSON array on the root html element and read them at runtime with window.__hyperframes.getVariables(). Pass new values through the --variables render flag so the same composition re-renders without editing markup.

Can I use random values or timers in a HyperFrames composition?▼

No. Compositions must be deterministic: Math.random(), Date.now(), setTimeout-driven animation, and async timeline construction are forbidden. Replace randomness with declared variables or a seeded deterministic generator before rendering.

Why does hyperframes lint block my render?▼

Lint fails on missing data-composition-id, overlapping tracks, or unregistered timelines, and the render is blocked until these are fixed. After lint passes, npx hyperframes inspect checks for text overflow and container clipping before the MP4 is produced.

How is audio handled in HyperFrames video compositions?▼

Video elements must be muted, and audio lives in a separate audio element on its own track. If the audio track is longer than the composition duration, trim the audio rather than extending duration_seconds.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
JustinChangTWJustinChangTW

video-social

Export platform-specific video variants from an approved master for social media delivery.

Community
Intermediate
mooch10mooch10
1

create-video

Generate complete videos from text prompts using the HeyGen Video Agent API.

Community
Advanced
ModelsLabModelsLab
10

modelslab-video-generation

Generate AI videos from text, images, or footage via ModelsLab's v7 Video Fusion API.

Official
Advanced