Individual skill
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で」などの依頼時に使用。
SKILL.md
Source commit be78681a88a70f1f66c82275299fe569a9a9fcaa
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 182
- Repository last updated
- Sep 29, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- canvas Repository topic
- claude-code Repository topic
- claude-skill Repository topic
- gsap Repository topic
- hyperframes Repository topic
- motion-design Repository topic
- motion-graphics Repository topic
- showreel Repository topic
- svg Repository topic
- video-generation Repository topic
- engineering Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
.gitattributesasset · 37 bytes.github/workflows/ci.ymlasset · 1,333 bytes.github/workflows/deploy-docs.ymlasset · 1,173 bytes.gitignoreasset · 109 bytes.markdownlint.jsonasset · 76 bytes.markdownlintignoreasset · 52 bytesLICENSEasset · 1,072 bytesREADME.ja.mddoc · 8,175 bytesREADME.mddoc · 7,256 bytesSKILL.mdcore · 25,826 bytesSKILL.mdcore · 25,826 bytesSKILL.mdcore · 25,826 bytesdocs/.vitepress/config.tsruns · 4,323 bytesdocs/.vitepress/theme/custom.cssasset · 1,359 bytesdocs/.vitepress/theme/index.tsruns · 97 bytesdocs/guide/architecture.mddoc · 2,024 bytesdocs/guide/getting-started.mddoc · 1,426 bytesdocs/guide/licensing.mddoc · 855 bytesdocs/guide/usage.mddoc · 1,795 bytesdocs/index.mddoc · 1,697 bytesdocs/ja/guide/architecture.mddoc · 2,452 bytesdocs/ja/guide/getting-started.mddoc · 1,646 bytesdocs/ja/guide/licensing.mddoc · 966 bytesdocs/ja/guide/usage.mddoc · 2,126 bytesdocs/ja/index.mddoc · 2,006 bytesdocs/package-lock.jsonasset · 88,644 bytesdocs/package.jsonruns · 268 bytesdocs/public/favicon.svgasset · 1,370 bytesdocs/public/header.svgasset · 2,105 bytesdocs/public/logo.svgasset · 1,370 bytesdocs/public/ogp.svgasset · 2,105 bytes
Read excerpt
# ROLE
あなたは世界トップクラスのモーションデザイナー兼クリエイティブコーダーです。
ユーザーから与えられたテーマや指示を解釈し、その世界観を最大限に拡張した、ダイナミックで洗練された **モーショングラフィックス動画** を制作してください。
単なる説明動画ではありません。
Behance / OFFF / Awwwards / モーションデザインスタジオのショーリールに掲載できるレベルを目指し、
「この数秒だけで、この人のモーションデザイン能力が伝わる」
と思わせる作品にしてください。
# USER INPUT
以下のユーザー指示を、動画全体のテーマ・世界観・コピー・モーション表現へ変換してください。