Hyperframes Motion Reel

ショーリール品質（Behance / OFFF / Awwwards級）のモーショングラフィックス動画を HyperFrames（HTML + GSAP + SVG + Canvas、Apache-2.0）で制作する。remotion-motion-reel の HyperFrames 版で、Remotion の Company License が不要な構成。テーマ・素材（キャラクター画像、音声など）から世界観・コピー・デザインシステム・タイムライン・サウンドを補完し、120BPM/60fps で拍同期した映像を実装・レンダリングまで行う。「HyperFramesでかっこいい動画」「ライセンスフリーでモーショングラフィックス」「ショーリールをHTMLで」などの依頼時に使用。

161 stars 24 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Sunwood-ai-labs/hyperframes-motion-reel-skill --skill hyperframes-motion-reel

Manual install

git clone --depth 1 https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill.git /tmp/hyperframes-motion-reel-skill
mkdir -p ~/.claude/skills
cp -r /tmp/hyperframes-motion-reel-skill/. ~/.claude/skills/hyperframes-motion-reel

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# ROLE

あなたは世界トップクラスのモーションデザイナー兼クリエイティブコーダーです。
ユーザーから与えられたテーマや指示を解釈し、その世界観を最大限に拡張した、ダイナミックで洗練された **モーショングラフィックス動画** を制作してください。

単なる説明動画ではありません。
Behance / OFFF / Awwwards / モーションデザインスタジオのショーリールに掲載できるレベルを目指し、
「この数秒だけで、この人のモーションデザイン能力が伝わる」
と思わせる作品にしてください。

# USER INPUT

以下のユーザー指示を、動画全体のテーマ・世界観・コピー・モーション表現へ変換してください。

```
$ARGUMENTS
```

（引数が空の場合は、会話中のユーザー指示を USER INPUT として扱う。素材パスが指定されていれば、画像・音声・既存コードを実際に確認してから設計に入る。既存の Remotion プロジェクトを移植する依頼なら、このスキルではなく `/hyperframes` → `remotion-to-hyperframes` ルートを使う。）

# WHY HYPERFRAMES（ライセンス）

- **HyperFrames**（npm `hyperframes`）は **Apache-2.0**。個人・企業規模を問わず商用利用も無料。
- 参考：Remotion は独自ライセンスで、個人・従業員3人以下の営利企業・非営利団体は無料だが、**従業員4人以上の営利企業は有償の Company License** が必要。
- このスキルの成果物は HyperFrames + GSAP（無料・商用可）+ 素の HTML/CSS/SVG/Canvas + Node.js 標準機能のみで構成し、ライセンス上の追加コストが発生しない構成を保つ。有償ライセンスが必要なライブラリを持ち込まない。

# PARAMETERS

以下はデフォルト値です。USER INPUT や会話中の指示で指定があれば上書きしてください（例：「30秒で」「縦長」「BPM 140」「4K」）。

| パラメータ | デフォルト | 備考 |
|---|---|---|
| `DURATION_SEC`（尺） | 15 | 指定なしでボイス素材がある場合は、ボイス長＋余韻に合わせて拍単位で決めてよい |
| `FPS` | 60 | `npx hyperframes render --fps 60` で指定（CLI デフォルトは 30） |
| `BPM` | 120 | |
| `WIDTH × HEIGHT` | 1920 × 1080（16:9） | 縦長指定なら 1080 × 1920（9:16）、正方形なら 1080 × 1080 |
| 出力形式 | MP4 / H.264 | |

派生値：
- `TOTAL_FRAMES = DURATION_SEC × FPS`（デフォルト 900）
- `SEC_PER_BEAT = 60 / BPM`（デフォルト 0.5 秒 = 30 フレーム）

以下の本文中の「15秒」「900フレーム」「30フレーム」「1920×1080」は、すべてこのパラメータに読み替えてください。

Read the full skill on GitHub

Details

Skill name: hyperframes-motion-reel
Repository: Sunwood-ai-labs/hyperframes-motion-reel-skill
License: MIT
Repo updated: 29 September 2026

FAQ

What does the Hyperframes Motion Reel skill do?

How do I install the Hyperframes Motion Reel skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Sunwood-ai-labs/hyperframes-motion-reel-skill --skill hyperframes-motion-reel. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Hyperframes Motion Reel popular?

It lives in Sunwood-ai-labs/hyperframes-motion-reel-skill, which has 161 GitHub stars and 24 forks.

Related skills

Hbg Life Simulation

150

Mr-funny/hbg-life-simulation

Create Chinese HBG “模拟人生 / 人生副本” narrative videos with a consistent comic IP, a rapid multi-life opening, continuous natural-speed narration, synchronized short captions, dense static manga storyboards, audible fixed-level BGM, alternating zoom/pan motion in HyperFrames, and a consent-gated localhost-only account-backed Images API through CLIProxyAPI as the preferred image channel. Use for 模拟人生、人生副本、统一主角漫画、快闪职业开头、旁白配图、静态漫画分镜、zoom 推拉、左右平移、Edge TTS、字幕压制、本地反代自己的 Codex 账号、CLIProxyAPI，或把长篇中文人生故事组装成视频。

Images, Video & Audio27

Ruic Motion Reel

175

HRuiCcc/RuiC-motion-reel

用代码生成 15 秒动态图形（Motion Graphics）成片，默认交付 1920×1080 / 30fps：自研渲染引擎（超采样矢量/文字 + bloom/色差/颗粒）、真 3D 点云渲染、丝网印/riso 四色分色、代码合成配乐，画面与音乐全部由代码产出、不用任何外部美术素材、不用 AE。视觉语言有 16 张牌，默认随机抽一张（轻的、非 3D 的、编辑排版/手绘/纸艺/标本那类一样做），不默认做最炫的那一支。当用户说「用代码做个动效视频/动态图形/motion graphics」「生成一条 15 秒作品集样片/产品片/宣传短片」「按某种风格做视频」「给某个品牌/产品做一条片子」「复刻某条动效片的风格」，或要改已有片子的品牌、配色、节奏、镜头时使用。触发词：动效视频、动态图形、motion graphics、作品集样片、产品片、15 秒视频、1080p30、代码生成视频、ruic-motion-reel。

Images, Video & Audio17

Khan Explainer

149

haiderfarooq3/khan-explainer

Use when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, an

Images, Video & Audio31

Podcast to Article

192

orange2ai/podcast-to-article

把多人对谈或单人访谈的播客逐字稿（字幕 / ASR 转写 / 妙记导出 / 英文播客）整理成能直接发的长文（实录体）。流程是：清稿 → 要点梳理 → 定主线 → 换轴成文（用原文）→ 人名校准 → 精简 → 自检。 Use when: 用户给出播客逐字稿、字幕、SRT、录音转写，要求整理成文章、实录、公众号长文、要点稿、长文；或说「播客转文章」「把录音变成文章」「这期整理成一篇」「Next Token 那种格式」「对谈整理成文」「访谈转文章」。 podcast transcript to article, interview transcript to essay.

Images, Video & Audio11

HTML to Video

166

wx4766/html-to-video

把 HTML/Canvas 动画逐帧渲染成 MP4（可配乐、可出 GIF、可出透明层）。当用户说「用代码做视频」「HTML 转视频」「导出 MP4/GIF」「做个动态图解/宣传片/数据动画」「逐帧渲染」时使用。自带渲染器与 11 个开箱即用模板（含多镜头讲解片、竖屏 9:16、前后对比、流程图、字幕卡）、图标/人物/运镜素材库，支持透明输出、外部字幕时间轴与 JSON 镜头表，装好依赖后一条命令出片。

Images, Video & Audio13

Workrally

179

Tencent/workrally

WorkRally CLI (workrally) — 面向 AI Agent 的 AIGC 漫剧视频创作全流程工具集。支持 AI 生图、AI 生视频、视频提示词优化、画布生音频/音乐、混元 3D 模型生成、AI 生音频、项目/剧集/场次/分镜的完整 CRUD、资产库、媒资管理、无限画布、文件上传下载等。Use when user asks to generate images, generate videos, generate audio, generate music, generate 3d, optimize video prompts, manage projects, series, shots, upload files, download assets, manage materials, or interact with WorkRally platform via command line.

Images, Video & Audio24

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.