hyperframes-creative

作成者: heygen-com

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

HyperFrames Creative

Brand, pacing, style, narration, and composition direction. Use after the technical contract from hyperframes-core is in place.

For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-animation — this skill is intentionally non-animation.

Read these two FIRST for any non-trivial composition — they override web instincts:

  • references/house-style.md — "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.
  • references/video-composition.md — video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).

Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.

Workflow

  1. If a project has a design spec, read it first — precedence frame.mddesign.mdDESIGN.md. frame.md is the preferred spec for video/hyperframes projects and wins if more than one exists (same format as design.md); it is always lowercase, no FRAME.md variant, while design.md and DESIGN.md are different files on Linux. Treat it as brand truth: colors, fonts, spacing, tone, and constraints.
  2. If no design spec exists and the user asks for visual direction, choose a route:
    • Named style or mood → references/visual-styles.md
    • Fast defaults → references/house-style.md
    • Interactive selection → references/design-picker.md
  3. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.
  4. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.

Routing

TopicRead
Default palettes, motion, typography, lazy defaults to questionreferences/house-style.md
Named style presets, mood-to-style routingreferences/visual-styles.md
Palette-specific color tokenspalettes/*.md
Composition patterns — PiP, text-behind-subject, title card, slide showreferences/composition-patterns.md
Stats / infographic presentationreferences/data-in-motion.md
Structured expansion for open-ended promptsreferences/prompt-expansion.md
Video-medium density, scale, color, frame compositionreferences/video-composition.md
Per-beat direction, rhythm planning, transition timingreferences/beat-direction.md
Post-authoring spec verification (colors, type, corners, spacing, depth)references/design-adherence.md
High-level motion guardrails and GSAP-quality rulesreferences/motion-principles.md
Font selection, pairings, rendered-video type guardrailsreferences/typography.md
Script pacing, tone, openings, number pronunciationreferences/narration.md
Precomputed audio bands mapped to motionreferences/audio-reactive.md

Scripts

  • scripts/contrast-report.mjs — inspect contrast warnings from rendered frames.
  • scripts/extract-audio-data.py — pre-extract audio bands for audio-reactive compositions.
  • scripts/package-loader.mjs — support script for bundled creative tooling.

Run from the repo root with explicit paths, for example:

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.

Boundaries

  • Do not override hyperframes-core technical rules.
  • Do not require a design system for a minimal technical composition.
  • Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
  • Keep recipe references task-specific; do not read every reference for simple edits.

heygen-comのその他のスキル

hyperframes-cli
heygen-com
HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
developmenttestingapi
hyperframes-animation
heygen-com
HyperFramesのアニメーション知識全般 — アトミックモーションルール、マルチフェーズシーンブループリント、シーン遷移、広範なモーションデザイン技法、および7つのランタイムアダプター(GSAPデフォルト、Lottie、Three.js、Anime.js、CSSキーフレーム、Web Animations API、TypeGPU)。あらゆるモーションやアニメーションタスクに使用:2~4のルールを選んで構成するか、ブループリントを読み込むか、ランタイム固有のAPI(例:GSAPイージング/Lottieプレイヤー/Three.jsミキサー)を参照。HyperFramesネイティブ:単一の一時停止タイムライン、シークセーフ、...
creativedevelopmentdesign
hyperframes-core
heygen-com
HyperFrames HTML構成契約。構成構造、データ属性、クリップ、トラック、サブ構成、変数、メディア再生、決定論的レンダリングルール、および最小限のレンダリング可能なプロジェクトの検証に使用します。
developmentmediacreative
hyperframes-media
heygen-com
HyperFramesコンポジション向けのアセット前処理 — マルチプロバイダーTTS(HeyGen / ElevenLabs / Kokoroローカル)、マルチプロバイダーBGM(Google Lyria / ローカルMusicGen)、Whisper文字起こし、背景除去、キャプション作成。npx hyperframes tts、bgm、transcribe、remove-background、voice/provider選択、music-moodプロンプト、captions / subtitles / lyrics / karaoke / per-word stylingに使用。
mediaaudiovideo
hyperframes-registry
heygen-com
HyperFrames構成にレジストリブロックとコンポーネントをインストールして配線します。hyperframes addの実行時、ブロックやコンポーネントのインストール時、インストールしたアイテムをindex.htmlに配線する時、またはhyperframes.jsonを操作する時に使用します。addコマンド、インストール場所、ブロックサブ構成の配線、コンポーネントスニペットのマージ、レジストリ検出、そして新しいブロックやコンポーネントを作成して上流に貢献する方法(アイデア→スキャフォールド→検証→PR)をカバーします。
developmentapicode-review
general-video
heygen-com
カスタムHyperFrames HTMLビデオ合成オーサリングにおいて、専門的なワークフローが適合しない場合のフォールバックとして使用します。長尺またはマルチシーンの作品、ブランド/サイズルリール、モンタージュ、タイトルカード、モーションポスター(任意の長さ)、スタティックループ、および任意の長さやフォーマットの自由形式の合成をカバーします。製品プロモーション(product-launch-video)、一般的なウェブサイトからビデオへのキャプチャ(website-to-video)、トピック解説(faceless-explainer)、GitHub PRビデオ(pr-to-video)、既存映像のキャプション付けなどには使用しません。
videocreativemedia
motion-graphics
heygen-com
ユーザーが短く、デザイン主導のモーショングラフィックを求める場合に使用します。モーションそのものがメッセージとなるもの:キネティックタイポグラフィ、統計や数字のカウントアップ、チャート/データビジュアライゼーションの演出、ロゴスティング、ブランドロックアップ、ローワーサード、コールアウト、ソーシャルオーバーレイ、アニメーション付き見出し/ツイート/ニュースアイテム、モーションポスター、または素早いページキャプチャのハイライト。通常10秒未満、最大約30秒で、ナレーションの流れやボイスオーバー、実写の被写体はありません。MP4または透明オーバーレイでレンダリング可能。長尺、複数シーン、ナレーション付き、ブランドリールなどの作品には使用しません。
creativevideodesign
hyperframes-read-first
heygen-com
動画、アニメーション、モーショングラフィック、解説動画、タイトルカード、オーバーレイ、字幕付き動画、商品プロモーション、ウェブサイト動画、PR・チェンジログ動画、データモンタージュ、モーションポスター、またはHyperFrames HTMLコンポジションの作成、生成、編集、アニメーション化、レンダリングを依頼する場合は、ここから始めてください。ユーザーがHyperFramesに完成したMP4/ウェブ動画の作成やレンダリング、ワークフローの選択、またはプロダクトローンチ動画、顔出しなし解説動画、ウェブサイトから動画への変換などのルーティングを希望する場合、他の動画・アニメーションスキルよりも先に使用してください。
creativevideomedia