Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
無料GitHub で公開
hyperframes-creative
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`.
インストール方法を見る含まれるファイル（79）
- SKILL.md6.4 KB
- frame-presets/biennale-yellow/caption-skin.html8.1 KB
- frame-presets/biennale-yellow/frame-showcase.html34.1 KB
- frame-presets/biennale-yellow/FRAME.md17.4 KB
- frame-presets/blockframe/caption-skin.html8.3 KB
- frame-presets/blockframe/frame-showcase.html37.9 KB
- frame-presets/blockframe/FRAME.md15.9 KB
- frame-presets/blue-professional/caption-skin.html8.2 KB
- frame-presets/blue-professional/frame-showcase.html38.2 KB
- frame-presets/blue-professional/FRAME.md16.8 KB
- frame-presets/bold-poster/caption-skin.html8.6 KB
- frame-presets/bold-poster/frame-showcase.html31.6 KB
- frame-presets/bold-poster/FRAME.md15.6 KB
- frame-presets/broadside/caption-skin.html8.4 KB
- frame-presets/broadside/frame-showcase.html33.1 KB
- frame-presets/broadside/FRAME.md15.9 KB
- frame-presets/capsule/caption-skin.html8.3 KB
- frame-presets/capsule/frame-showcase.html42.0 KB
- frame-presets/capsule/FRAME.md16.8 KB
- frame-presets/cartesian/caption-skin.html8.2 KB
- frame-presets/cartesian/frame-showcase.html34.5 KB
- frame-presets/cartesian/FRAME.md16.9 KB
- frame-presets/cobalt-grid/caption-skin.html8.7 KB
- frame-presets/cobalt-grid/frame-showcase.html45.9 KB
- frame-presets/cobalt-grid/FRAME.md16.9 KB
- frame-presets/code-editorial/caption-skin.html8.3 KB
- frame-presets/code-editorial/fonts/EBGaramond-400.woff221.2 KB
- frame-presets/code-editorial/fonts/EBGaramond-700.woff222.5 KB
- frame-presets/code-editorial/fonts/Inter-400.woff223.1 KB
- frame-presets/code-editorial/fonts/Inter-700.woff223.8 KB
- frame-presets/code-editorial/fonts/JetBrainsMono-400.woff220.7 KB
- frame-presets/code-editorial/fonts/JetBrainsMono-700.woff221.4 KB
- frame-presets/code-editorial/fonts/OFL-eb-garamond.txt4.4 KB
- frame-presets/code-editorial/fonts/OFL-inter.txt4.4 KB
- frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt4.4 KB
- frame-presets/code-editorial/frame-showcase.html42.7 KB
- frame-presets/code-editorial/FRAME.md20.1 KB
- frame-presets/coral/caption-skin.html8.3 KB
- frame-presets/coral/frame-showcase.html35.6 KB
- frame-presets/coral/FRAME.md18.5 KB
- frame-presets/creative-mode/caption-skin.html8.3 KB
- frame-presets/creative-mode/frame-showcase.html37.8 KB
- frame-presets/creative-mode/FRAME.md19.1 KB
- frame-presets/daisy-days/caption-skin.html8.4 KB
- frame-presets/daisy-days/frame-showcase.html41.3 KB
- frame-presets/daisy-days/FRAME.md17.0 KB
- frame-presets/editorial-forest/caption-skin.html8.3 KB
- frame-presets/editorial-forest/frame-showcase.html36.0 KB
- frame-presets/editorial-forest/FRAME.md16.6 KB
- palettes/bold-energetic.md417 B
- palettes/clean-corporate.md410 B
- palettes/dark-premium.md389 B
- palettes/jewel-rich.md394 B
- palettes/monochrome.md454 B
- palettes/nature-earth.md399 B
- palettes/neon-electric.md380 B
- palettes/pastel-soft.md392 B
- palettes/warm-editorial.md411 B
- references/audio-reactive.md3.0 KB
- references/beat-direction.md13.3 KB
- references/composition-patterns.md5.6 KB
- references/data-in-motion.md1.2 KB
- references/design-adherence.md1.4 KB
- references/design-picker.md11.9 KB
- references/design-spec.md10.3 KB
- references/house-style.md4.9 KB
- references/motion-principles.md9.1 KB
- references/narration.md3.4 KB
- references/prompt-expansion.md5.6 KB
- references/story-spine.md4.1 KB
- references/storyboard-recipe.md7.3 KB
- references/typography.md14.1 KB
- references/video-composition.md4.2 KB
- references/visual-styles.md11.7 KB
- scripts/contrast-report.mjs20.8 KB
- scripts/extract-audio-data.py7.0 KB
- scripts/package-loader.mjs14.1 KB
- scripts/package-loader.test.mjs4.2 KB
- templates/design-picker.html43.1 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
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 scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count.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
- If a project has a design spec, read it first and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence
frame.md→design.md→DESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once inreferences/design-spec.md— resolve and load per that doc. - If no design spec exists and the user asks for visual direction, choose a route:
- Ready-made frame-preset (optional) →
frame-presets/(adopt aFRAME.mdasframe.md; seereferences/design-spec.md) - Named style or mood →
references/visual-styles.md - Fast defaults →
references/house-style.md - Interactive selection →
references/design-picker.md
- Ready-made frame-preset (optional) →
- For multi-scene work, plan beats and rhythm before writing HTML →
references/beat-direction.md. For scene transitions, jump tohyperframes-animation/transitions/. - For motion-heavy work, read
references/motion-principles.md(high-level guardrails), then go tohyperframes-animationfor atomic rules.
Routing
| Topic | Read |
|---|---|
Adopt a ready-made frame-preset as frame.md (optional) | frame-presets/ · references/design-spec.md |
| Default palettes, motion, typography, lazy defaults to question | references/house-style.md |
| Named style presets, mood-to-style routing | references/visual-styles.md |
| Palette-specific color tokens | palettes/*.md |
| Composition patterns — PiP, text-behind-subject, title card, slide show | references/composition-patterns.md |
| Stats / infographic presentation | references/data-in-motion.md |
| Structured expansion for open-ended prompts | references/prompt-expansion.md |
| Video-medium density, scale, color, frame composition | references/video-composition.md |
| Per-beat direction, rhythm planning, transition timing | references/beat-direction.md |
| Post-authoring spec verification (colors, type, corners, spacing, depth) | references/design-adherence.md |
| High-level motion guardrails and GSAP-quality rules | references/motion-principles.md |
| Font selection, pairings, rendered-video type guardrails | references/typography.md |
| Story doctrine — hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals | references/story-spine.md |
| Script pacing, tone, openings, number pronunciation | references/narration.md |
| Precomputed audio bands mapped to motion | references/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.
contrast-report.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
Run with explicit paths, for example:
python <SKILL_DIR>/scripts/extract-audio-data.py <audio-file>
Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.
Boundaries
- Do not override
hyperframes-coretechnical 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.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
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/hyperframes6万2026年10月10日 更新
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
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/hyperframes6万2026年10月10日 更新