Communitygithub.com

heygen-com/hyperframes

HyperFrames レジストリからブロックとコンポーネントを検索、インストール、配線します。手動でビジュアルを作成する前に、このスキルを使用して、既存の約400のアイテムを活用してください。

hyperframes とは？

このスキルは、HyperFrames のレジストリにアクセスし、再利用可能なブロック（独立したサブコンポジション）とコンポーネント（エフェクトスニペット）を検索、インストール、配線するための CLI ツールです。`hyperframes add <name>` でアイテムをインストールし、`hyperframes catalog` でカタログを検索できます。検索は、キーワードベースのランキング（デフォルト）と、オプションでオンデバイスの意味ベースのランキングをサポートします。インストール後、ブロックは `data-composition-src` を使用してホストコンポジションに配線され、コンポーネントは HTML/CSS/JS スニペットとして直接ペーストされます。また、レジストリに新しいアイテムを貢献するためのワークフロー（アイデア→スキャフォールド→検証→PR）も提供します。このスキルは、HyperFrames プラグイン内でもスタンドアロンでも使用でき、プラグインの場合は事前のセットアップ手順に従う必要があります。ギャップレポート機能により、カタログにない必要なエフェクトを報告することができ、レジストリの改善に貢献します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-registry
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

プラグインインストール: セットアップやフレッシュネスコマンドの前に、このスキルが HyperFrames プラグイン内にある場合は、プラグイン実行ルール に従ってください。スタンドアロンインストールの場合は、以下の更新手順に従ってください。

HyperFrames レジストリ

レジストリは、hyperframes add <name> でインストール可能な再利用可能なブロックとコンポーネントを提供します。

  • ブロック — 独立したサブコンポジション（独自の寸法、持続時間、タイムラインを持ちます）。ホストコンポジションで data-composition-src を介してインクルードします。
  • コンポーネント — エフェクトスニペット（独自の寸法はありません）。ホストコンポジションの HTML に直接ペーストします。

クイックリファレンス

hyperframes add data-chart              # ブロックをインストール
hyperframes add grain-overlay           # コンポーネントをインストール
hyperframes add captions                # captions タグが付いたすべてのブロックをインストール
hyperframes add shimmer-sweep --dir .   # 特定のプロジェクトをターゲットにする
hyperframes add data-chart --json       # マシンリーダブルな出力
hyperframes add data-chart --no-clipboard  # クリップボードをスキップ (CI/ヘッドレス)

インストール後、CLI は書き込まれたファイルと、ホストコンポジションにペーストするスニペットを表示します。スニペットは開始点です — ブロックを配線するときは、data-composition-id（ブロックの内部コンポジション ID と一致する必要があります）、data-start、data-track-index 属性を追加する必要があります。

位置引数は、最初に正確なアイテム名として解決されます。アイテムが一致せず、値がタグである場合、コマンドはそのタグを持つすべてのブロックをインストールします。レジストリの依存関係は、要求されたアイテムの前にインストールされます。hyperframes add はブロックとコンポーネントに対してのみ機能します。例については、代わりに hyperframes init <dir> --example <name> を使用してください。

インストール場所

デフォルトでは、ブロックは compositions/<name>.html にインストールされます。コンポーネントはデフォルトで compositions/components/<name>.html にインストールされます。

これらのパスは hyperframes.json で設定可能です：

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

詳細については、install-locations.md を参照してください。

ブロックの配線

ブロックは独立したコンポジションです — ホスト index.html で data-composition-src を介してインクルードします：

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

主要な属性：

  • data-composition-src — ブロック HTML ファイルへのパス
  • data-composition-id — ブロックの内部 ID と一致する必要があります
  • data-start — ブロックがホストタイムラインに表示されるタイミング（秒）
  • data-duration — ブロックが再生される時間
  • data-width / data-height — ブロックのキャンバスサイズ
  • data-track-index — レイヤー順序（大きいほど前面）

詳細については、wiring-blocks.md を参照してください。

コンポーネントの配線

コンポーネントはスニペットです — その HTML をコンポジションのマークアップに、CSS をスタイルブロックに、JS をスクリプト（ある場合）にペーストします：

  1. インストールされたファイルを読む (例: compositions/components/grain-overlay.html)
  2. HTML 要素をコンポジションの <div data-composition-id="..."> にコピーする
  3. <style> ブロックをコンポジションのスタイルにコピーする
  4. <script> コンテンツがあれば、コンポジションのスクリプト（タイムラインコードの前）にコピーする
  5. コンポーネントが GSAP タイムライン統合を公開している場合（スニペットのコメントブロックを参照）、それらの呼び出しをタイムラインに追加する

詳細については、wiring-components.md を参照してください。

ディスカバリー

CLI を主要なディスカバリーインターフェースとして使用してください。ブラウジングする前に意図で検索してください： レジストリには目視でスキャンできるよりも多くのアイテムが登録されているため、リストして名前やタグでマッチさせるのは遅い方法であり、著者の表現があなたの表現と異なる場合に失敗します。

# ビートが実行すべき内容に対してカタログ全体をランキング
npx hyperframes catalog --query "reveal a headline one line at a time"
npx hyperframes add caption-clip-wipe

検索はローカルで実行され、何も送信しません。デフォルトでは、アイテムの名前、タイトル、説明と共有される語彙に基づいてランキングするため、あなたの単語を再利用するアイテムのみが見つかります； --on-device は、1回限りのモデルダウンロード後、代わりに意味に基づいてランキングします。--json を使用すると、エンベロープはどの階層が応答したかを示すため、ランキングが行われたと想定するのではなく、それを確認してください。

ビデオの言語に関係なく、常に英語でクエリを実行してください。 カタログは英語で書かれており、両方の階層もそのようにインデックスを作成します（オンデバイスモデルも英語のみです）。別のスクリプトでのクエリは検索可能な用語を生成せず、何も返しません。これは、ブリーフ、キャプション、ナレーションがすべてその言語で書かれている日本語や中国語のプロジェクトでは間違えやすく、クエリが自然にその言語で書かれてしまいます。動作 を英語で説明し、オンスクリーンのコピーはビデオが必要とする任意の言語で書いてください。クエリが No searchable words in query を返した場合、これは欠落コンポーネントではなくこのルールの問題であり、ギャップレポートの価値はありません。

インストール可能性はランキングの後（前ではない）に適用されます：ベクターが運ぶがこのレジストリが提供できない名前は結果から削除され、dropped でカウントされます。したがって、dropped がゼロでない場合、それらは異なる世代であることを意味します。オフライン階層、同意ゲート、古いインデックスを更新する方法については、/hyperframes-cli を参照してください。

検索ではなく、ブラウズまたはフィルタリングする場合：

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

通常のテーブルモードと --json モードはマッチのみをリストします；選択した名前を hyperframes add <name> でインストールしてください。--human-friendly はインタラクティブピッカーを開き、選択したアイテムをすぐにインストールします。CI やエージェントワークフローでは、--json の後に明示的に add を使用することを推奨します。

カタログにないものを報告する

検索結果に該当するものがなく、手動でエフェクトを作成する場合は、その前に以下のように報告してください：

npx hyperframes feedback --search-miss "<実行したクエリ>" --wanted "<必要な動作>" --tier on-device

catalog --query はこの行を事前入力して出力し、--json はそれを report_gap として保持します — そのため、何も適合しないと判断した時点で既に手元にあります。

結果のどれも要件を満たさない場合は、どちらの階層でも報告してください。 オンデバイス階層が応答したかどうかを待たないでください：同意済みの 33 MB のダウンロードが必要なため、明示的にオプトインしない限り、エージェントの実行は words に基づいています。on-device にゲートをかけると、ほとんどすべてのレポートが沈黙します。--tier 値はそれに伴って移動するため、語彙のミスと意味のミスを区別できます。あなたが想像したアイテム名ではなく、必要なエフェクトを説明してください：返ってくるのは構築する価値のある動作のリストであり、存在しないアイテムに名前を付けても何も学べません。これはクエリをどこかに送信する唯一のパスであり、まさにそれが検索が単独で行うことではなく、別個の意図的なコマンドである理由です。評価は含まれず、評価メトリクスにも到達しません。

これがカタログ全体の需要シグナルです。これをスキップすると、直面したギャップはインストール数のカウントから推測されることになり、誰もインストールできない動作を見ることはできません。

CLI が設定されたレジストリに到達できない場合、フォールバックとして生のマニフェストを検査してください：

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

CLI が到達できないレジストリは、ディスカバリーのためにカタログを空にしません：再検証に失敗した場合でも、以前にフェッチされたマニフェストは 24 時間の更新ウィンドウを超えて提供され続けるため、catalog と catalog --query はディスク上の最後のコピーに対してリストおよびランキングを続けます。

昨日インストールしたアイテムであっても、add は依然としてネットワークを必要とします。 マニフェストのみがキャッシュされ、アイテムの実際のファイルはインストールのたびにフェッチされます。したがって、オフラインでは検索でき、アイテムが何であるかを確認できますが、ファイルのフェッチでインストールは失敗します。ユーザーにオフラインインストールを約束しないでください。

各アイテムの registry-item.json には、名前、タイプ、タイトル、説明、タグ、寸法（ブロックのみ）、持続時間（ブロックのみ）、ファイルリストが含まれています。

タイプとタグによるフィルタリングの詳細については、discovery.md を参照してください。

新しいブロックまたはコンポーネントの貢献

新しいレジストリアイテム（キャプションスタイル、VFX ブロック、トランジション、ローワーサード、または再利用可能なコンポーネント）を作成し、アップストリーム PR として出荷する場合 — 既存のものをインストールするのではなく — contributing.md のアイデア → スキャフォールド → ビルド → 検証 → プレビュー → 出荷の完全なワークフローに従ってください。コピーペースト可能なスターターテンプレート（キャプション / VFX / コンポーネント / registry-item.json）は templates.md にあります。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community