skills.rest
junainfinity
junainfinityCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes

Build HTML-based video compositions with deterministic GSAP timelines and CLI exports.

Updated Aug 27, 2026
Search Tags:#html#captions#tts#transitions#gsap#video-composition#hyperframes
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill hyperframes-junainfinity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/junainfinity/osmDesign/tree/main/skills/hyperframes
Command: npx skills add https://github.com/junainfinity/osmDesign --skill hyperframes-junainfinity

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hyperframes/producer, sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

HyperFrames provides a local-first, scriptable workflow to author HTML-based video compositions, enabling predictable exports, reproducible timelines, and offline previews.

Core Features & Use Cases

  • Deterministic GSAP-driven timelines for multi-scene video compositions.
  • Frontmatter-driven entry points that define a skill's name, description, and load instructions for activation.
  • CLI-backed operations (init, lint, preview, render, transcribe, tts) to bootstrap, validate, and export video assets.
  • Use cases include prototyping video sequences, generating captioned content, and exporting finished renders and assets for templates.

Quick Start

Create a HyperFrames video composition from your prompt and export the project for local rendering.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I build HTML video compositions with deterministic GSAP timelines?▼

HTML video compositions with deterministic GSAP timelines are built by defining multi-scene sequences and frontmatter-driven entry points. This approach ensures reproducible timelines and predictable exports for local-first design workflows.

What is the best way to preview and render HTML video projects locally?▼

The best way to preview and render HTML video projects locally is using CLI-backed operations. Commands like init, preview, and render bootstrap, validate, and export finished video assets directly to your local file system.

Does HyperFrames support adding captions and text-to-speech to video exports?▼

HyperFrames supports adding captions and text-to-speech to video exports through dedicated CLI tasks. The transcribe and tts commands generate captioned content and integrate audio outputs into the final local video composition.

Can I use frontmatter to define entry points for HTML video rendering?▼

Frontmatter is used to define entry points for HTML video rendering by specifying the skill's name, description, and load instructions. This structure drives activation and ensures deterministic timeline execution across scenes.

Do I need sharp and @hyperframes/producer installed to export video assets?▼

The sharp and @hyperframes/producer dependencies are required to process and export video assets. They handle local-first image processing and project compilation to generate ready-to-render outputs.

Related Skills

Explore More Design & Creative Skills→
Ard2pArd2p

aif

Analyze a project tech stack, install skills from skills.sh, and configure MCP servers.

Community
Advanced
FAeN399FAeN399

hello-world

Create, validate, lint, analyze, and migrate Claude Skills via CLI.

Community
Basic
PrEEtPatEl44PrEEtPatEl44

hyperframes

Orchestrates research-to-video workflows with HTML/GSP-based rendering and Japanese text formatting.

Community
Advanced
brittaniebuffiecsubrittaniebuffiecsu
1

hyperframes

Render HTML compositions to MP4/WebM videos with HyperFrames.

Community
Advanced