hyperframes

仓库创建 2026年7月27日最近提交 21 小时前SkillHot 收录 16 小时前

这个 Skill 做什么

把 HTML 当成视频的源文件，做标题卡、社媒覆层、带字幕的说话头视频、音频驱动的视觉效果，最后导出为 MP4/WebM（用 FFmpeg 捕帧编码）。想把网页、文本或动画化的文字/图标转成视频、需要字幕与音频同步或要 TTS 旁白时特别合适。优势在于用 HTML+GSAP 做时间线，设计可控且易复用。

▸ 展开 SKILL.md 英文原文

Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.

✓ ClawHub 收录

Stars

Forks

仓库内 Skill

积累中

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/trojan-lord/hermes-cuso/main/skills/creative/hyperframes/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/trojan-lord/hermes-cuso/main/skills/creative/hyperframes/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# HyperFrames

HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The HyperFrames engine captures the page frame-by-frame and encodes to MP4/WebM with FFmpeg.

**Complement to `manim-video`:** Use `manim-video` for mathematical/geometric explainers (equations, 3B1B-style). Use `hyperframes` for motion-graphics, talking-head with captions, product tours, social overlays, shader transitions, and anything driven by real video/audio media.

## When to Use

- User asks for a rendered video from text, a script, or a website
- Animated title cards, lower thirds, or typographic intros
- Capt

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有