skills.rest
riipandi
riipandiCOMMUNITY
Explore all skills by this author →
Website𝕏@riipandiGitHub

hyperframes-cli

Renders HTML compositions into MP4 videos using HyperFrames CLI and iOS-native frame capture.

1|Updated Jun 20, 2026
Search Tags:#ffmpeg#mp4#gsap#video rendering#hyperframes#html animation#website-to-video
One-click install
npx skills add https://github.com/riipandi/minis-skills --skill hyperframes-cli-riipandi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-cli
Source: https://github.com/riipandi/minis-skills/tree/main/hyperframes-cli
Command: npx skills add https://github.com/riipandi/minis-skills --skill hyperframes-cli-riipandi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Rendering HTML/GSAP animation compositions into video normally requires Chrome and Puppeteer, which are unavailable on iOS. This Skill provides the full HyperFrames CLI workflow plus an iOS-native renderer that captures frames via minis-browser-use and encodes them with FFmpeg. ## Core Features & Use Cases - CLI Workflow: Scaffold, lint, preview, render, transcribe, and generate TTS for HyperFrames video projects via npx commands. - iOS-Native Rendering: hf-render.py locks the browser viewport to composition size, seeks frame-by-frame through the animation, captures Retina screenshots, and encodes MP4 with FFmpeg — no Chrome required. - Website-to-Video Pipeline: A 7-step guided workflow that captures any URL's design tokens, assets, and text, then produces a scripted, storyboarded, narrated promotional video. - Use Case: Capture a product landing page, generate a 30-second narrated product demo video with brand-accurate colors and fonts, and render it to MP4 entirely on an iPhone. ## Quick Start Run the environment check script, then ask the assistant to render the HyperFrames project in your workspace to an MP4 using hf-render.py.

Frequently Asked Questions about hyperframes-cli

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

FAQPage Schema
How do I render a HyperFrames composition to MP4 on iOS?▼

Run hf-render.py with the project directory: python3 hf-render.py <project_dir>. It sets the browser viewport to the composition size, seeks through each frame via window.__hf, captures screenshots, and encodes them with FFmpeg into an MP4.

How do I turn a website into a video with HyperFrames?▼

Follow the 7-step website-to-video workflow: capture the site's screenshots and design tokens, write DESIGN.md and SCRIPT.md, build a storyboard, generate voiceover with TTS, build compositions per beat, then lint, snapshot, and render to MP4.

Why does npx hyperframes render fail on iOS?▼

The standard render command requires Puppeteer and Chrome, which are unavailable on iOS. Use the Minis-native hf-render.py script instead, which relies on minis-browser-use and FFmpeg rather than a Chrome instance.

What does a HyperFrames composition need for rendering to work?▼

The index.html must expose window.__hf with a duration getter and a seek(t) function, register timelines in window.__timelines, use fixed width/height matching data-width/data-height, and avoid viewport meta tags and CSS transform centering.

Why do I get black frames at the end of my rendered video?▼

Black frames occur when GSAP animations with repeat extend past the declared DURATION, so the timeline outlives the render window. Calculate repeats so all tweens end within DURATION, for example using Math.floor((DURATION - offset) / tweenDuration) - 1.

What dependencies does the HyperFrames CLI environment require?▼

It requires Node.js 22 or later, FFmpeg for video encoding, minis-browser-use for browser control on Minis, and the hyperframes composition skill. Run scripts/check-env.py to verify everything and use --fix to auto-install missing pieces.

Related Skills

Explore More Design & Creative Skills→
gmolikegmolike

animejs

Registers Anime.js animations as seek-driven instances inside HyperFrames compositions.

Community
Intermediate
HellKaiser45HellKaiser45

doc

Read, edit, and render DOCX files to PNG previews with python-docx.

Community
Intermediate
Pixazo-AIPixazo-AI

gemini-voice

Generates speech from text and transcribes audio via the Gemini Voice API on Pixazo.

Official
Intermediate
vibe-motionvibe-motion
236

hyperframes-cli

Manage HyperFrames project scaffolding, validation, preview, rendering, and cloud deployment workflows.

Official
Advanced