Hyperframes Motion Director

HyperFrames Motion Director

Use this skill to behave as an AI motion director, cinematic designer, and production QA lead for HyperFrames video work. The goal is to first produce a concise brief/design proposal for approval, then produce the video only after the user confirms the direction.

HyperFrames handles HTML/CSS/JS rendering. This skill handles the production discipline around it.

Core Principle

Work from the final viewing experience backward:

1. What should the viewer remember? 2. What is the underlying metaphor, not the surface content? 3. Which background image or visual stage gives the frame depth and meaning? 4. Which frame proves the visual direction is strong? 5. Which beat carries the hook, reveal, proof, and CTA? 6. Which motion choices guide attention through those beats? 7. Which validation proves the video will render deterministically?

Do not begin by writing animation code. First make the intended still frames and timing legible.

House Style

Default to one strict style unless the user explicitly overrides it:

• Deep black background #050505.
• Minimal cinematic lighting, high contrast, large negative space, low brightness.
• White, gray, and warm gold only. Use warm gold as a restrained accent, not a wash.
• Premium magazine-cover composition: one dominant symbol or phrase, not a cluster of explanatory graphics.
• Subtle paper grain, shallow depth of field, volume haze, thin rim light, local metallic highlights.
• Text, image, composition, and color must express one point together.
• Default to a generated or supplied background image stage for new videos. It must create depth, metaphor, or product context; it must not be decorative wallpaper.

Forbidden by default:

• Ordinary illustration, ecommerce banner composition, icon piles, generic tech dashboards, neon cyberpunk, multicolor palettes, gradient clutter, decorative particles, explain-the-concept diagrams, and busy collage.
• Drawing the article surface. Always draw the essence metaphor.

Background And Motion Rule

For new video work, plan background imagery by default. Do not generate it during Phase 1. After confirmation, use Codex Image Gen for needed project-bound bitmap assets unless the user supplied strong assets or the confirmed direction is intentionally pure kinetic typography.

Treat each frame as three coordinated layers:

1. Background image as stage: atmosphere, depth, light, metaphor, or product context. 2. Typography as message: readable hierarchy, fixed safe zones, controlled line counts, no accidental overlap with busy image regions. 3. Motion as attention direction: one primary motion idea per scene, one optional support motion, and enough stillness after each important reveal.

Use references/motion-background-system.md for image counts, text-over-image layout, motion grammar, and review gates.

Two-Phase Rule

Always split new video work into two phases:

Phase 1: Brief / Design Proposal

Produce a compact proposal and stop for user confirmation. Do not generate images, create animation code, render video, or build a full HyperFrames composition before confirmation.

The proposal must include:

• Essence: core viewpoint, largest conflict, emotional center, amplified keyword, visual metaphor.
• Structure: center symbol / huge title / person anchor / huge number.
• Format: platform, aspect ratio, pixel size, duration, FPS, safe margins.
• Image decision: whether generated bitmap images are needed, what each image should be, and what must stay in HyperFrames.
• Background plan: image role, subject position, quiet text zone, crop risks, and whether Codex Image Gen will be used after confirmation.
• Typography: title/support/CTA scale, line-height, letter-spacing, maximum lines, overflow handling.
• Layout: dominant visual mass, grid/alignment, crop-safe zones, mobile overlay risks.
• Motion: main reveal, background motion, transition style, hold times, easing, audio hit plan, and what must remain still.
• Risk gates: what could make it look cheap, unreadable, noisy, or off-style.

End Phase 1 with a clear confirmation request. Production starts only after the user confirms, revises, or explicitly says to proceed.

Phase 2: Production

After confirmation, create or update the production artifacts, generate needed images, implement HyperFrames composition files, validate, snapshot, render, and write review outputs as the task requires.

When To Use

Use this skill for:

• HyperFrames video compositions.
• Product launch videos, website-to-video projects, article-to-video pieces, keynote reveals, social motion videos, or YouTube-ready motion pieces.
• Kinetic typography, large animated text, typewriter sequences, restrained logo lockups, and transition-heavy motion videos.
• HTML/CSS/GSAP/Lottie/Three.js motion graphics intended to render as MP4.
• Requests like "cinematic metaphor video", "article-to-video", "product reveal", "make this landing page into a video", "music synced", "big text animation", or "launch film".
• Editing an existing HyperFrames motion video where the user wants targeted changes without breaking the rest of the video.

Do not use this skill for simple video copywriting without production, ordinary landing pages, static posters, generic ad copy, or editing raw MP4 footage without code.

Operating Modes

New Video

Phase 1 creates or updates:

1. BRIEF_DESIGN_PROPOSAL.md

After user confirmation, create or update:

1. DESIGN.md 2. STORYBOARD.md 3. Background, symbol, texture, product, or anchor image assets when the confirmed direction needs bitmap source material. 4. HyperFrames composition files. 5. REVIEW_REPORT.md 6. REVIEW_PACK.md for handoff.

Use BEAT_MAP.json only when music, voiceover, or exact timing matters. Use MOTION_MAP.json when GSAP choreography, background parallax, focus pulls, masks, or scene transitions are complex enough to need a separate map.

Use the templates in templates/.

Existing Video Edit

First read the actual project files. Treat the existing composition as the current spec. Do not invent colors, fonts, selectors, timings, or easing values.

Map the user's request to the smallest artifact that should change:

• Copy or CTA issue: update STORYBOARD.md and the relevant text nodes.
• Visual style issue: update DESIGN.md and relevant CSS variables.
• Scene composition issue: update the scene HTML/CSS.
• Timing or rhythm issue: update STORYBOARD.md, optional BEAT_MAP.json, and timeline positions.
• Motion issue: update only the relevant GSAP timeline.
• Stability issue: update code and rerun validation.

After editing, report exactly what changed and which validation steps ran.

Required Workflow

1. Intake

Extract or infer:

• Source article, topic, or product theme.
• Goal and CTA.
• Audience.
• Platform and aspect ratio.
• Duration.
• Product or offer.
• Required proof points.
• Tone and style.
• Available assets.
• Hard constraints.

If details are missing, make conservative assumptions and write them into the brief. Do not block unless the missing item prevents production.

Read references/workflow.md when planning a full video.

1.5. Essence Extraction

Before design, extract:

• Core viewpoint.
• Largest conflict.
• Emotional center.
• The keyword that deserves visual amplification.
• One visual metaphor that can carry the whole video.

Translate the abstract idea into a restrained symbol. Examples: AI replacement becomes an erased human silhouette; anxiety becomes a thread about to snap; time becomes a countdown in darkness; growth becomes light inside a crack; information overload becomes data fragments pulled into a black hole; long-termism becomes the only distant lamp; platform migration becomes a black obelisk or data tower; automation becomes documents entering a silent machine.

2. Approval Brief

Create BRIEF_DESIGN_PROPOSAL.md from templates/BRIEF_DESIGN_PROPOSAL.template.md or present the same structure in the response.

Keep it short and decisive. It is a production contract, not a brainstorm. Stop after this proposal and ask for confirmation.

3. Design System

Create DESIGN.md from templates/DESIGN.template.md.

The design system must specify typography, color, spacing, density, metaphor symbol, background-image system, generated-image plan, text-over-image rules, and motion personality. This prevents downstream steps from improvising a new visual language.

Read references/visual-standard.md before judging visual quality, typography, layout, or motion. Read references/motion-background-system.md before deciding image count, background roles, animation grammar, or text-over-image treatment.

4. Storyboard And Copy

Create STORYBOARD.md from templates/STORYBOARD.template.md.

Default short motion arc:

Hook -> Tension -> Metaphor Reveal -> Proof -> CTA

For a 10 second no-voiceover kinetic typography video, keep text sparse. One idea per beat is usually enough.

Choose the structure from the material:

• Center symbol: trends, insight, AI, platform, philosophy.
• Huge title: conflict, suspense, emotion, viewpoint.
• Person anchor: tutorial, interview, personal brand, methodology.
• Huge number: growth, milestone, data shock.

Every beat needs:

• Timing.
• Screen text or visual action.
• Hero frame timestamp.
• Layout and visual hierarchy.
• Background image state and text-safe zone.
• Motion direction.
• Attention target and stillness/hold requirement.
• Transition out.
• Audio or rhythm notes when relevant.
• Quality note.
• Metaphor role: what part of the abstract idea this frame carries.

Read references/audio-sync.md when music, sound design, voiceover, beat hits, or captions matter.

5. Visual Asset Plan

If the confirmed proposal calls for bitmap assets, generate or source them before HyperFrames implementation. For new videos, default to at least one background image stage unless the brief explicitly justifies a pure-code or supplied-asset approach:

• Generate only the images needed for the background stage, center symbol, texture, or product/person/object anchor.
• Give each image one role: stage, symbol, texture, anchor, or transition plate.
• Specify quiet text zones, focal subject position, crop-safe regions, and forbidden content before generation.
• Keep each generated image sparse enough to compose in HyperFrames.
• Avoid baked-in explanatory text unless exact title text is required.
• Save project-bound generated images into the project asset folders before referencing them.

Use Codex Image Gen by default for needed bitmap source images after confirmation. HyperFrames owns typography, timing, compositing, masks, parallax, focus pulls, and motion.

6. Layout Before Animation

Build static hero frames first. A frame should already work as a poster before motion is added.

For each scene, verify:

• Main message is readable at the target platform size.
• Background image has a clear role and does not fight the text.
• Text sits in a designed quiet zone, not on high-frequency detail.
• Text does not overlap or leave safe margins.
• Text containers have max width, max lines, and overflow behavior.
• Long words, Chinese/English mixed text, and CTA labels cannot escape their boxes.
• Font sizes are fixed per breakpoint; do not scale text with viewport width.
• Hierarchy is clear.
• The scene has one dominant idea.
• The scene has one dominant visual mass and no unowned decoration.
• CTA or brand lockup is not visually weak.
• The metaphor is understandable without icon labels.
• The frame obeys the house style: black, sparse, cinematic, white/gray/warm gold.

Only add GSAP or other motion after layout works.

7. Motion

Read references/visual-standard.md and references/motion-background-system.md before adding animation.

Use motion to clarify sequence and emphasis. Avoid applying the same y-plus-opacity entrance to every element. Give major text enough hold time to be read.

Before animating each scene, answer:

• What is the attention target?
• Which background, symbol, text, or product layer moves first?
• Which elements must remain still so the viewer can read?
• Where is the stillness after the reveal?
• How does this motion change meaning rather than add noise?

For GSAP in HyperFrames:

• Use a paused timeline.
• Register timelines for HyperFrames control.
• Use explicit position parameters for timing.
• Keep timeline construction synchronous and deterministic.

Read references/hyperframes-stability.md before rendering.

Create optional MOTION_MAP.json from templates/MOTION_MAP.template.json only when selectors, labels, timing, easing, and transitions would otherwise become hard to review.

8. Validation

Run the strongest available checks for the project. Prefer:

npx hyperframes doctor
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot <composition> --at <times>

If the project or installed HyperFrames version uses different command syntax, inspect the local package docs or CLI help and adapt.

Validation is not optional for final delivery. If a command cannot run because dependencies are missing, state that clearly and still perform any available static checks.

For local deterministic checks, use bundled scripts where helpful:

node scripts/check_assets.mjs <project-dir>
node scripts/score_artifacts.mjs <project-dir>

9. Render

Use a draft render for review and a higher-quality or Docker render for final delivery when available:

npx hyperframes render --quality draft --output renders/draft.mp4
npx hyperframes render --quality standard --output renders/review.mp4
npx hyperframes render --docker --quality high --output renders/final.mp4

Adjust flags to match the installed CLI.

10. Review Report

Create REVIEW_REPORT.md from templates/REVIEW_REPORT.template.md.

The report should include:

• Output files.
• Validation status.
• Snapshot timestamps.
• Watch notes by time range.
• Issues.
• Recommended next edit.

Create REVIEW_PACK.md with scripts/build_review_pack.mjs <project-dir> when outputs, snapshots, and reports exist.

Quality Gates

Before claiming the video is ready:

• New video work received user confirmation after BRIEF_DESIGN_PROPOSAL.md before production began.
• The artifact chain exists or the skipped artifacts are explained.
• If the task asked to build a video, a scaffold or composition source exists, not only prose.
• Static hero frames are coherent before animation.
• Text fits inside safe margins on the target aspect ratio.
• Text overflow, max lines, responsive layout, and crop-safe areas are explicitly handled.
• At least one meaningful transition connects scenes in a multi-scene video.
• Important copy has enough hold time to read.
• Background imagery exists by default for new videos or the pure-code/supplied-asset exception is explained.
• Each generated image has a role, quiet text zone, and local project path before it is referenced.
• Motion uses a clear attention target, a limited motion budget, and at least one still hold after important reveals.
• Typography avoids lazy defaults and documents type scale, line height, and hierarchy.
• The essence extraction exists and every visual choice supports it.
• The final visual language obeys the house style unless the user explicitly changed it.
• The video avoids forbidden generic styles: noisy collage, ecommerce banner, icon pile, neon tech clutter, and multicolor effects.
• The composition uses deterministic timing.
• HyperFrames validation or the best available substitute has run.
• Snapshots at hero frames have been captured or the blocker is reported.
• A review pack exists or the missing render/snapshot blocker is reported.
• The final answer names outputs and remaining risks.

Hard Stability Rules

Do not use:

• Wall-clock animation state such as Date.now() for render-critical motion.
• Unseeded Math.random() for render-critical visuals.
• setTimeout, setInterval, or requestAnimationFrame as the source of truth for main animation timing.
• Asynchronous construction of core timelines.
• Render-time network requests for required assets.
• Manual video.play(), video.pause(), or uncontrolled media time changes.
• Infinite animation repeats in a render timeline.

Use seeded randomness, fixed duration, fixed fps, fixed dimensions, local assets, and explicit timeline positions.

References

• Read references/workflow.md for the full production workflow.
• Read references/visual-standard.md when judging style, typography, layout, and motion.
• Read references/audio-sync.md when timing to music, voiceover, or captions.
• Read references/hyperframes-stability.md before implementing or debugging render behavior.

Templates

Use the templates in templates/ for production artifacts:

• BRIEF_DESIGN_PROPOSAL.template.md
• DESIGN.template.md
• STORYBOARD.template.md
• REVIEW_REPORT.template.md

Optional templates:

• BEAT_MAP.template.json
• MOTION_MAP.template.json

Local Skill Checks

This skill includes deterministic utility scripts:

node scripts/check-structure.mjs
node scripts/create_project.mjs <target-dir>
node scripts/check_assets.mjs <project-dir>
node scripts/score_artifacts.mjs <project-dir>
node scripts/build_review_pack.mjs <project-dir>

check-structure.mjs checks the skill package. The other scripts help with project scaffolding, local asset checks, artifact scoring, and review pack generation.

Repository Guidelines

Project Structure & Module Organization

This repository is an agent skill for directing HyperFrames cinematic motion-video production work.

• SKILL.md contains the primary agent instructions and quality gates.
• templates/ holds production artifact templates such as BRIEF_DESIGN_PROPOSAL.template.md, DESIGN.template.md, STORYBOARD.template.md, REVIEW_REPORT.template.md, and optional BEAT_MAP / MOTION_MAP templates.
• references/ contains supporting guidance for workflow, the unified visual standard, audio sync, and render stability.
• scripts/ contains Node.js helpers for scaffolding projects and validating skill structure or production artifacts.
• evals/ stores trigger prompts and evaluation cases.

Build, Test, and Development Commands

Use Node.js 18 or newer.

node scripts/check-structure.mjs

Verifies the skill has all required files and key SKILL.md terms.

node scripts/create_project.mjs ./my-motion-film

Creates a HyperFrames motion production scaffold with the four core artifacts, asset folders, review folders, and placeholders. Use --with-timing for BEAT_MAP.json and --with-motion for MOTION_MAP.json.

node scripts/check_assets.mjs <project-dir>
node scripts/score_artifacts.mjs <project-dir>

Checks a generated project for asset readiness and the slim four-artifact production chain.

For implemented HyperFrames compositions, also run the strongest available local CLI checks, for example npx hyperframes validate and npx hyperframes snapshot <composition> --at <times>.

Rendered video outputs and generated project assets belong in generated project folders, not in this skill repository.

Coding Style & Naming Conventions

Scripts use modern JavaScript modules (import syntax) and .mjs filenames. Keep helper scripts dependency-light and deterministic. Use two-space indentation in Markdown lists and JSON templates where practical. Template outputs should use uppercase artifact names such as BRIEF_DESIGN_PROPOSAL.md and REVIEW_REPORT.md; template files should keep the .template.md or .template.json suffix.

Testing Guidelines

There is no formal test framework yet. Treat node scripts/check-structure.mjs as the release gate for this skill. When changing project-scaffold behavior, run create_project.mjs into a temporary directory and then run asset and artifact checks against that directory.

Commit & Pull Request Guidelines

The current history uses Conventional Commit style, for example docs: initialize motion director skill. Keep commits terse and scoped: docs:, fix:, feat:, or chore:. Pull requests should describe what changed, why it changed, which validation commands ran, and include screenshots only when README visuals or rendered review assets changed.

Agent-Specific Instructions

Do not start animation code before reading SKILL.md and the relevant files in references/. For new video work, preserve the two-phase gate: BRIEF_DESIGN_PROPOSAL.md first, user confirmation second, then production through DESIGN.md, STORYBOARD.md, optional generated images, validation, snapshots, render, and REVIEW_REPORT.md. BEAT_MAP.json and MOTION_MAP.json are optional only when timing or choreography complexity justifies them.

Changelog

All notable changes to this project will be documented in this file.

[2.0.0] - 2026-06-04

Changed

• Renamed the internal skill slug from video-ad-director to hyperframes-motion-director to match the public HyperFrames Motion Director positioning.
• Updated install guidance, eval metadata, and structure checks to enforce the new internal slug.
• Renamed the GitHub repository target to geekjourneyx/hyperframes-motion-director.

[1.2.0] - 2026-06-04

Changed

• Repositioned the public project name from Video Ad Director to HyperFrames Motion Director.
• Calibrated README, skill description, agent guidance, scaffold wording, workflow references, and evaluation prompts around HyperFrames cinematic motion-video production instead of video advertising.
• Added structure-check guards to prevent public documentation from drifting back to the deprecated Video Ad Director / video-ad-only framing.

[1.1.0] - 2026-06-03

Added

• Added the default background-stage production rule for new video work, including generated, supplied, and pure-code exceptions.
• Added references/motion-background-system.md to define background image roles, image count guidance, text-over-image rules, motion budget, and visual review gates.
• Added background-stage, text-safe-zone, attention-target, stillness, and motion-purpose fields across the brief, design, storyboard, motion map, and review templates.
• Added stricter artifact scoring for background source, quiet text zones, motion budget, still holds, transition midpoint snapshots, and review verdicts.
• Added strict asset-check mode and composition file scanning to catch remote or missing render assets before final delivery.

Changed

• Calibrated the core skill flow around three coordinated layers: background as stage, typography as message, and motion as attention direction.
• Updated the production workflow, visual standard, README, and scaffold README guidance to reflect the new background and motion gates.
• Tightened scaffold check commands so generated projects point back to this skill's helper scripts.

Validation

• Ran node scripts/check-structure.mjs.
• Ran syntax checks for the changed helper scripts.
• Generated a temporary project scaffold with timing and motion templates.
• Ran strict asset checks against the temporary scaffold.
• Confirmed blank templates score 0/100 as expected until production fields are filled.

[1.0.2] - 2026-06-02

Fixed

• Quoted SKILL.md frontmatter description to prevent YAML parsing errors from the workflow: first... colon sequence.
• Added a frontmatter guard to scripts/check-structure.mjs so unquoted : sequences are caught before release.

[1.0.1] - 2026-06-02

Changed

• Calibrated all docs around the slim two-phase workflow: BRIEF_DESIGN_PROPOSAL.md first, user confirmation second, then production.
• Reduced the default production chain to four core artifacts: BRIEF_DESIGN_PROPOSAL.md, DESIGN.md, STORYBOARD.md, and REVIEW_REPORT.md.
• Made BEAT_MAP.json and MOTION_MAP.json optional artifacts generated only with --with-timing or --with-motion.
• Replaced separate visual review references with one unified references/visual-standard.md.
• Removed obsolete README image assets and duplicate legacy planning templates.
• Updated scaffold, asset check, structure check, review pack, artifact scoring, README, AGENTS, and eval prompts to prevent drift back to the old artifact chain.

[1.0.0] - 2026-06-02

Added

• Initial video-ad-director agent skill for directing HyperFrames video ad productions.
• Production workflow covering intake, planning, design, storyboard, timing, motion, validation, render, and review.
• Initial template set for planning, design, storyboard, timing, motion, and review artifacts.
• Reference guides for workflow, visual quality, audio sync, HyperFrames stability, and review handoff.
• Node.js helper scripts for project scaffolding, structure checks, asset checks, artifact scoring, and review-pack assembly.
• README with installation, usage, and repository structure guidance.
• Contributor guide in AGENTS.md.
• MIT license.

Trigger Prompt Set

Use these prompts later for trigger and non-trigger evaluation of the skill description.

Should Trigger

1. "Use HyperFrames to create a 10 second black cinematic metaphor launch video for our AI app, with big typography, a product reveal, music hits, and a final CTA." 2. "Make this landing page into a 15 second HyperFrames motion video. I want it to feel premium, not like a template." 3. "I need a kinetic typography short with GSAP, sparse black-background frames, warm-gold rim light, and a clean transition into the logo." 4. "Can you direct a short product reveal video in HyperFrames and give me the storyboard, beat map, snapshots, and render checklist?" 5. "The HyperFrames render works but the motion video feels cheap. Help me improve the typography, motion, transitions, and review process." 6. "Build a 9:16 social motion video from this SaaS copy using HTML/CSS motion graphics and make sure it validates before render." 7. "Turn our product screenshots into a launch-film style motion sequence with restrained cinematic pacing." 8. "I want a music-synced YouTube motion piece with bold text hits and a CTA, rendered from HTML and GSAP." 9. "Review my HyperFrames motion project and only change the title timing and CTA layout without rewriting the whole thing." 10. "Create a motion-video production workflow skill for polished HyperFrames shorts." 11. "Start a real HyperFrames project folder for a premium launch film, including brief/design proposal, design spec, storyboard, snapshots folder, renders folder, and review report. Only add beat map or motion map if needed." 12. "I have a rendered HTML/GSAP video but it feels like a template. Diagnose typography, hero frames, transitions, and make a targeted edit plan." 13. "Build a review pack for this HyperFrames motion video so the client can inspect snapshots, watch notes, blockers, and next edit." 14. "Turn this article into a black-background cinematic metaphor video. Do not draw the surface topic; extract the core conflict and make a HyperFrames motion piece." 15. "Use image generation for the center symbol, then compose the final HyperFrames motion video with sparse typography, dark cinematic lighting, and snapshots."

Should Not Trigger

1. "Write three YouTube ad scripts for my product, no video production needed." 2. "Explain the difference between Remotion and HyperFrames." 3. "Edit this existing MP4 file and remove the background noise." 4. "Create a static launch poster in HTML." 5. "Build a normal SaaS landing page with React and Tailwind." 6. "Generate a list of catchy CTA phrases for an ad campaign." 7. "Summarize HyperFrames documentation for me." 8. "Make a simple CSS typewriter effect for a website hero." 9. "Convert this Markdown article to a WeChat post." 10. "Design a brand color palette, no video or motion." 11. "Install HyperFrames and tell me whether it is better than Remotion, but don't make a video." 12. "Write a GSAP timeline for a website hero animation that will never be rendered as video." 13. "Make a project management checklist for a generic video shoot with cameras and actors."

<div align="center">

HyperFrames Motion Director

面向 HyperFrames 的电影感动效视频制作工作流

  

</div>

---

这是什么

HyperFrames Motion Director 是一个用于制作 HyperFrames 动效视频和电影感短片的 agent skill。它把文章、主题、产品、官网或发布信息，先转成可确认的 brief/design 方案；用户确认后，才进入背景图/主视觉生成、HyperFrames 制作、验证、快照、渲染和审查报告。

输入："把这篇关于 AI 替代焦虑的文章做成 12 秒宣传片，不要画机器人办公室，要画本质隐喻"
输出：先给一份可确认的黑底极简电影风 brief/design 方案；确认后再生成设计规范、分镜、必要图片、HyperFrames composition 和审查报告

它适用于产品发布片、官网转视频、文章转视频、观点短片、字幕驱动产品视频、动效字体短片、音乐节拍同步 motion graphics，以及需要清晰 CTA 的宣传视频。

默认风格是严格的黑底电影隐喻风：#050505 极深黑背景，白/灰/暖金三色，高对比，大留白，电影打光，纸张颗粒，浅景深，体积雾，细窄轮廓光，局部金属质感。它不做普通插画、电商 Banner、图标堆、廉价科技感、多色渐变或解释性信息图。

---

核心能力

这个 skill 强调先确认方向，再制作视频；默认先规划背景图舞台，再做静态关键帧，再做动画；先验证排版、安全边界、时间线和渲染稳定性，再交付成片。

核心能力：

• 提炼文章或主题的核心观点、最大冲突、情绪重心、关键词和视觉隐喻。
• 将抽象观点转译为克制符号，例如被擦除的人影、即将断裂的细线、黑暗倒计时、裂缝里的微光、被吸入黑洞的数据碎片。
• 自动选择中心符号、超大标题、人物锚点或巨大数字作为主结构。
• 判断是否需要生成图片；需要时先生成视觉素材，再用 HyperFrames 负责字体、构图、动效、节奏和最终渲染。
• 把背景图、文字和动画绑定在一起：背景图负责舞台和隐喻，文字负责清晰信息，动画负责引导视线。

---

工作流程

工作方式是从最终观看体验倒推：观众要记住什么，文章的本质隐喻是什么，视频尺寸和文字布局是否成立，哪些图片需要生成，哪些元素必须留给 HyperFrames 排版和动画，哪些验证能证明画面不溢出、不跑版、可确定渲染。

当前核心规则：新视频默认要有背景舞台；背景图负责空间和隐喻，文字负责清晰信息，动画负责引导视线。

---

前置依赖

使用前请确认本机具备：

• Node.js 18 或更高版本。
• 可通过 npx 执行 skills 和 hyperframes CLI。
• 已安装或可使用 HyperFrames 官方 skill。

npx skills add heygen-com/hyperframes

---

安装 HyperFrames Motion Director

推荐通过 skills CLI 安装本 skill：

npx skills add https://github.com/geekjourneyx/hyperframes-motion-director

使用 skill 本身不需要额外依赖。仓库中的辅助脚本使用 Node.js。

---

快速开始

手动使用 HyperFrames CLI

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

命令含义：

• npx hyperframes init my-video：初始化一个 HyperFrames 视频项目。
• npx hyperframes preview：在浏览器中预览，并支持 live reload。
• npx hyperframes render：渲染输出 MP4。

使用本仓库脚手架补齐生产文档

HyperFrames Motion Director 负责把“要做什么视频”拆成可审查的制片文档和验证链路。创建一个生产项目：

node scripts/create_project.mjs ./my-motion-film

然后按顺序填写生成的文档：

BRIEF_DESIGN_PROPOSAL.md
DESIGN.md
STORYBOARD.md
REVIEW_REPORT.md

BEAT_MAP.json 和 MOTION_MAP.json 只在音乐/旁白/复杂 GSAP 时间线需要时生成。

发布 skill 或检查项目结构时运行：

node scripts/check-structure.mjs
node scripts/check_assets.mjs <project-dir>
node scripts/check_assets.mjs <project-dir> --strict
node scripts/score_artifacts.mjs <project-dir>

如果已经实现 HyperFrames composition，继续运行当前项目支持的最强验证命令：

npx hyperframes doctor
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot <composition> --at <times>

---

仓库结构

SKILL.md                         skill 主指令、确认门和质量门
templates/                       确认方案、设计、分镜、审查报告和可选节拍/运动图模板
references/                      工作流、统一视觉标准、音频同步和稳定性指南
scripts/create_project.mjs       新建 HyperFrames 动效视频项目脚手架
scripts/check-structure.mjs      skill 发布前结构检查
scripts/check_assets.mjs         项目资源检查
scripts/score_artifacts.mjs      本质隐喻、风格门和生产文档评分
scripts/build_review_pack.mjs    汇总产物、快照、渲染和审查报告
references/motion-background-system.md  背景图、图文关系和动效预算规则
evals/                           触发词和评测用例

---

许可证

MIT — 可自由使用、修改和分发。

---

关于作者

Audio Sync

Use this reference when a video mentions music, beat hits, voiceover, captions, sound design, or rhythmic motion.

Principle

Major visual events should land on intentional audio or rhythm moments. Minor visual texture may react to audio, but the main story should not depend on uncontrolled audio analysis.

Beat Map

Create BEAT_MAP.json for music-synced or tightly timed videos.

Include:

• fps
• duration_seconds
• audio_source
• beats
• hits
• scene_ranges
• snapshot_times
• notes

Manual beat maps are acceptable. Do not claim waveform analysis happened unless it actually happened.

Structural Hits

Use hits for:

• First title impact.
• Product reveal.
• Proof/stat reveal.
• Scene transition.
• CTA lockup.

Avoid placing every word on a hit. That feels mechanical and removes breathing room.

Voiceover Timing

If voiceover exists:

• Script first.
• Generate or import audio.
• Transcribe or manually time phrases.
• Use phrase timestamps as scene boundaries.
• Keep on-screen text shorter than spoken text.

If transcription is unavailable, use manual phrase timing and mark it as an assumption.

Captions

Caption-led videos need readability first:

• Keep caption chunks short.
• Avoid putting captions over busy product UI.
• Keep caption position stable unless movement is part of the design.
• Do not animate captions so much that they become hard to read.

Micro-Reactivity

Audio-reactive motion is useful for:

• Subtle glow.
• Background texture.
• Small scale pulse.
• Light opacity breathing.

It should not control:

• Main copy timing.
• Scene duration.
• CTA readability.
• Product reveal timing.

Sync Review

Review in three passes:

1. Silent pass: can the story be followed without audio? 2. Audio pass: do major events land with the track? 3. Frame pass: are hit frames readable rather than just flashy?

If a beat lands but the frame is unreadable, timing is not actually successful.

HyperFrames Stability

HyperFrames rendering is frame-based and should be deterministic. A composition that previews once is not necessarily safe to render. Build timelines so any frame can be captured independently and consistently.

Deterministic Contract

For render-critical visuals:

• Use fixed width, height, fps, and duration.
• Use local assets or assets guaranteed to exist before rendering.
• Use seeded randomness if randomness is needed.
• Use explicit timeline times.
• Build timelines synchronously before rendering starts.
• Keep media timing controlled by HyperFrames/runtime expectations.

GSAP Pattern

Use paused timelines:

const tl = gsap.timeline({ paused: true });

tl.from(".title", {
  y: 80,
  opacity: 0,
  duration: 0.8,
  ease: "expo.out"
}, 0.2);

window.__timelines = window.__timelines || {};
window.__timelines["root"] = tl;

Prefer absolute position parameters so timing can be reviewed and adjusted:

tl.to(".product", { scale: 1, opacity: 1, duration: 0.7 }, 2.4);
tl.to(".stat", { y: 0, opacity: 1, duration: 0.5 }, 5.8);

Avoid

Do not use these for main animation timing:

• Date.now()
• Unseeded Math.random()
• setTimeout
• setInterval
• requestAnimationFrame
• Asynchronous timeline creation
• Runtime network fetches for required assets
• Infinite repeats such as repeat: -1
• Manual video.play() or uncontrolled currentTime changes

These can make frame capture inconsistent or unavailable when rendering frames out of real-time order.

Asset Discipline

Before rendering:

• Confirm required images, videos, audio, and fonts exist locally or are vendored.
• Avoid depending on remote fonts at render time.
• Use stable file names.
• Prefer explicit dimensions for images/video containers.
• Include fallbacks only when they preserve layout.

Validation Commands

Use the installed CLI's syntax. Start with:

npx hyperframes doctor
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot <composition> --at <times>

If a command fails because of missing dependencies, report the blocker and continue with checks that can run.

Snapshot Strategy

Capture:

• First frame.
• Each scene's hero frame.
• Each transition midpoint.
• CTA lockup.
• Any frame where dense text or product imagery appears.

Snapshots catch layout and readability issues earlier than full review renders.

Common Failure Diagnosis

• Preview works but render differs: check time-dependent code and asynchronous timeline setup.
• Text cut off: inspect bounding boxes, safe margins, fixed container sizes, responsive font rules.
• Missing image or font: check asset paths and render-time network calls.
• Transition cuts to empty frame: remove premature exit animation or move transition earlier.
• Motion feels random: replace implicit timing with explicit positions and beat-map timestamps.

Motion And Background System

Use this when planning generated images, text-over-image layouts, GSAP choreography, or visual review.

Why Videos Look Cheap

Most weak motion videos fail for the same reasons:

• Text floats on a flat or generic background.
• The background is wallpaper, not a stage for the idea.
• Motion adds activity but does not guide attention.
• Too many elements compete for hero status.
• Paused frames do not work as posters.

The fix: background creates the world, typography carries the message, motion directs the eye.

Default Image Rule

For new videos, assume at least one background image stage is needed. Exceptions must be written in the brief:

• Strong supplied product, UI, logo, or footage assets already carry the scene.
• The direction is intentionally pure kinetic typography.
• The task is a narrow edit of an existing composition.

Do not generate images in Phase 1. Plan them. After confirmation, use Codex Image Gen by default for generated bitmap assets and move final project-bound files into assets/images/.

Image Count

If two images do the same job, remove one.

Image Roles

Each image gets exactly one primary role:

• Stage: atmosphere, depth, and light.
• Symbol: the central metaphor.
• Texture: grain, haze, material, or light falloff.
• Anchor: product, person, logo, UI, or real object.
• Transition plate: mask, wipe, focus pull, or morph source.

Reject images that are only decoration.

Text Over Image

• Reserve a quiet text zone before generating or cropping.
• Keep the focal subject away from title and CTA zones.
• Use local treatment behind text: vignette, shadow plate, gradient mask, blur, or desaturation.
• Put small proof text only on calm image areas.
• If the text needs a card to survive, regenerate, recrop, or simplify the image.

Motion Rules

Default arc:

World appears -> Title lands -> Metaphor reveals -> Proof locks -> CTA holds

Motion budget:

• One primary motion idea per scene.
• One optional support motion for atmosphere or transition.
• Background motion stays slow: push, parallax, focus pull, or light sweep.
• Text settles before it must be read.
• Important reveals need stillness after impact.
• Multi-scene transitions should overlap or share an anchor; avoid empty black gaps.

Prefer mask reveal, clip reveal, rim-light sweep, focus pull, parallax, cross-dissolve, scale settle, or morph-to-logo.

Avoid repeated y + opacity, linear primary reveals, infinite loops, decorative particles, random icons, and moving text during reading time.

Prompt Requirements

Every generated-image plan should state:

• Role and aspect ratio.
• Focal subject position.
• Quiet text zone.
• Lighting direction and contrast.
• Palette and forbidden colors.
• No baked-in text unless required.
• No fake logos, labels, explanatory icons, diagrams, watermark, or decorative clutter.

Review Gate

Reject the work if:

• There is no background plan or explicit exception.
• The background could be swapped without changing meaning.
• Text readability depends on luck.
• Motion can be removed without changing the story.
• More than one layer tries to be the hero.
• The hero frame is not pause-worthy.

Visual Standard

Use this as the single visual reference for proposal, layout, motion, and review.

Style Lock

• Background: #050505.
• Palette: white, gray, restrained warm gold.
• Mood: low-brightness cinematic, high contrast, large negative space.
• Texture: subtle paper grain, shallow depth of field, volume haze, thin rim light, local metallic highlights.
• Composition: one dominant symbol or phrase per frame.
• Background imagery: default for new videos unless a supplied-asset or pure-code exception is documented. It must function as stage, symbol, texture, anchor, or transition plate.

Do not use ordinary illustration, ecommerce banner layout, icon piles, generic neon tech, multicolor palettes, busy collage, decorative particles, or explanatory diagrams.

Metaphor First

Do not draw the surface topic. Extract:

• Core viewpoint.
• Largest conflict.
• Emotional center.
• Keyword to amplify.
• Visual metaphor.

The metaphor must be legible without labels. If the viewer needs icon captions to understand the frame, the frame is too literal or too noisy.

Typography And Layout

• Use one huge title, one quiet support line, and one CTA/brand lockup.
• Default maximums: title 1-2 lines, support text 1-2 lines, CTA 1 line, one proof/stat cluster.
• Use fixed font sizes per breakpoint. Do not scale font size with viewport width.
• Default letter spacing is 0; tracking is allowed only for small all-caps labels.
• Set max width, max lines, line-height, and overflow behavior for every text block.
• Long words, mixed Chinese/English copy, subtitles, and CTA labels must not escape their containers.
• Keep safe margins platform-specific: larger center-safe zones for 9:16, calmer bottom spacing for 16:9.
• Use no more than two type families unless brand assets require it. Avoid default-looking display typography when the title is the hero.

Background Images

• The background must either carry meaning, create spatial depth, ground the product, or disappear behind the message.
• Reserve a quiet text zone in the image crop. Type should not sit on high-frequency texture, bright edges, faces, product seams, or accidental tangents.
• Use vignette, mask, blur, shadow plate, darkening, or desaturation locally behind text before considering a card.
• Generated images must not include baked-in text, fake UI, fake logos, labels, explanatory icons, watermarks, or random decoration unless specifically required.
• More images are not better. Use one strong image stage for short motion videos; use 2-4 only when the story truly changes visual worlds.

Motion

Motion should reveal meaning, not decorate the frame.

Use slow push, subtle parallax, focus pull, rim-light reveal, mask wipe, or clip reveal. Avoid repeated y + opacity entrances, empty fades between scenes, restless motion, and decorative effects.

Typical timing:

• Premium reveal: 0.8-1.6s, expo.out or sine.inOut.
• Title hold: 0.6-1.2s after entrance.
• Proof/stat hold: 0.8-1.5s.
• CTA hold: 1.0s or more.

Motion budget:

• One primary motion idea per scene.
• One optional support motion for atmosphere, focus, or transition.
• Background motion should be slow and camera-like.
• Text must become still before the viewer needs to read it.
• At least one signature motion moment per video is enough; every element trying to be special looks cheap.

Review Gate

Reject the work if:

• It skips user confirmation after BRIEF_DESIGN_PROPOSAL.md.
• It looks like a banner, infographic, icon cluster, or generic tech poster.
• It has no background-image plan or explicit pure-code/supplied-asset reason.
• The background image is interchangeable wallpaper, fights the text, or needs a card to rescue readability.
• It has more than one dominant message in a frame.
• Text overlaps, clips, shrinks unpredictably, or falls outside safe margins.
• The first readable frame appears too late.
• The metaphor is surface-level or needs labels.
• All elements move at once, motion repeats the same entrance pattern, or important text never settles.
• The video passes render checks but fails still-frame review.

Production Workflow

This workflow turns a vague motion-video request into a reviewable HyperFrames production. Follow it in order for new videos. For edits, change only the affected stage.

The default creative direction is a black-background cinematic metaphor film. Do not draw the surface topic. Extract the essence of the article, theme, product, or argument, then build a restrained symbol that carries the point.

New videos need a background stage by default. It can be generated, supplied, or pure code, but any exception must be written in the brief. The background is not decoration; it creates space, carries metaphor, protects text readability, or grounds the product.

New video work is two-phase: first produce a brief/design proposal and wait for user confirmation; only then produce images, HyperFrames source, snapshots, renders, and review artifacts.

1. Intake

Capture the minimum viable production brief:

• Source article, theme, or product idea.
• Goal: what should the viewer do after watching?
• Audience: who is this for?
• Platform: YouTube, Shorts, LinkedIn, landing page hero, paid ad, internal demo.
• Aspect ratio and resolution: default to 16:9 1920x1080 unless the platform implies otherwise.
• Duration: default to 10-15 seconds for cinematic motion video or kinetic typography.
• Product or offer: what is being promoted?
• Proof: what can be truthfully claimed?
• Style: default to black cinematic metaphor unless the user explicitly overrides it.
• Assets: logo, screenshots, product footage, audio, fonts, brand colors.
• Hard constraints: required text, forbidden claims, legal copy, language, accessibility.

When details are missing, write assumptions instead of stalling. Ask only if the missing detail changes the whole production.

1.5. Essence Extraction

Before design, extract:

• Core viewpoint.
• Largest conflict.
• Emotional center.
• The keyword that deserves visual amplification.
• A visual metaphor that can carry the video.

Translate abstract meaning into one restrained visual symbol:

• AI replacement -> erased human silhouette.
• Anxiety -> a thin line about to snap.
• Time -> countdown suspended in darkness.
• Growth -> micro-light inside a crack.
• Information overload -> data fragments pulled into a black void.
• Long-termism -> a single distant lamp.
• Platform migration -> black obelisk or data tower.
• Automation -> documents entering a silent machine.

Reject literal surface drawings unless the user explicitly asks for them.

2. Brief Design Proposal

Before any implementation, produce BRIEF_DESIGN_PROPOSAL.md or the equivalent response structure:

• Essence and metaphor.
• Structure choice.
• Platform, aspect ratio, pixel size, duration, FPS, safe margins.
• Image generation decision, including default background image role or the explicit reason it is not needed.
• Typography, layout, overflow handling, and mobile crop handling.
• Motion plan and risk gates.

Stop here and ask for confirmation. Do not generate images or write composition code until the user confirms.

3. Design System

The design system prevents style drift.

Define:

• Background and foreground color. Default to #050505, white/gray, and restrained warm gold.
• Accent color and whether any warm rim glow is allowed. Avoid colorful gradients by default.
• Display and body typography.
• Safe margins.
• Layout grid or placement logic.
• Background image system: role, crop, focal subject, quiet text zone, contrast treatment, and local asset path plan.
• Text-over-image rules: where type may sit, how the image will be darkened/blurred/desaturated behind text, and what crop is forbidden.
• Component patterns such as title card, product frame, proof stat, and CTA.
• Motion personality and motion budget.
• Do and don't rules.
• The central metaphor symbol and how it is lit.
• Any generated image assets needed before HyperFrames composition.

If the user's product already has a brand system, respect it only where it does not destroy the requested cinematic metaphor. If not, use the strict house style and document the choice.

4. Storyboard And Copy

For short motion videos, script is compression. Put copy directly in the storyboard so text, timing, layout, and motion stay together.

Default short motion structures:

10s: Hook -> Tension -> Metaphor Reveal -> CTA
15s: Hook -> Tension -> Metaphor Reveal -> Proof -> CTA
30s: Pattern interrupt -> Conflict -> Metaphor Reveal -> Proof -> Outcome -> CTA

For no-voiceover videos, script means screen text and timing. Every beat should have one job.

Choose structure by material:

• Center symbol for trends, insight, AI, platform, or philosophy.
• Huge title for conflict, suspense, emotion, or sharp viewpoint.
• Person anchor for tutorial, interview, personal brand, or methodology.
• Huge number for growth, milestone, or data shock.

5. Storyboard Detail

The storyboard is where direction happens. Do not skip it.

Every beat should specify:

• Start and end time.
• Main message.
• Hero frame timestamp.
• Metaphor role.
• Layout and hierarchy.
• Motion.
• Transition out.
• Audio/rhythm note.
• Quality risk.

The hero frame is the timestamp where the scene best communicates its idea. If that frame is weak as a still image, the scene is not ready for animation.

6. Visual Asset Planning

If the metaphor needs generated bitmap source material, plan images before implementation. For new video work, default to one background stage unless a pure-code or supplied-asset exception is written in the brief.

• Background stage: atmosphere, depth, light, metaphor, or product context.
• Center symbol.
• Background texture or atmosphere.
• Optional person/object anchor.
• Any vertical key visual for 9:16 work.
• Any horizontal key visual for 16:9 work.

Generated images should be sparse. Avoid baked-in text unless exact text is required. Compose final titles, captions, masks, crops, parallax, focus pulls, and timing in HyperFrames.

Each planned/generated image must specify:

• Role: stage, symbol, texture, anchor, or transition plate.
• Source: supplied, official, generated, or fallback pure-code.
• Aspect ratio and target size.
• Focal subject location.
• Quiet text zone.
• Local output path.
• Forbidden content: no text, fake logos, icons, labels, diagrams, decorative clutter, or watermark unless required.

Use Codex Image Gen by default after user confirmation when a generated bitmap is needed. Do not reference project-bound generated images until they have been moved into the project asset folders.

7. Optional Beat Map

Use BEAT_MAP.json when timing matters.

Include:

• FPS.
• Duration.
• Beat/hit timestamps.
• What should happen on each hit.
• Optional narration word timings.

Do not pretend automatic audio analysis has happened unless it actually has. Manual hit maps are acceptable for MVP work.

8. Static Build

Build static scene layouts before animation.

Check:

• Copy is legible.
• Visual hierarchy is obvious.
• Background image has one clear role and is not generic wallpaper.
• Text is placed on a planned quiet zone, not over high-frequency details.
• Local contrast treatment is present where text crosses imagery.
• Safe margins hold.
• Text has max width, max lines, explicit overflow behavior, and stable breakpoints.
• Long words, mixed Chinese/English copy, CTA labels, and subtitles do not escape their containers.
• The composition does not depend on motion to make sense.
• Product or brand appears with enough weight.
• The metaphor can be understood without explanatory icon labels.
• The frame obeys the house style: black, sparse, cinematic, white/gray/warm gold.
• No ordinary illustration, ecommerce banner, icon pile, generic neon tech, multicolor palette, or busy collage appears.

9. Motion Build

Add animation only after static layouts are strong.

Motion should:

• Order attention.
• Reveal the metaphor.
• Clarify cause and effect.
• Reinforce audio hits.
• Transition between ideas.
• Avoid decorative noise.

Motion budget:

• One primary motion idea per scene.
• One optional secondary motion for atmosphere or focus.
• Background motion should be slow push, parallax, focus pull, or light sweep only.
• Main text should settle before it needs to be read.
• Important reveals need a still hold, not continuous drift.
• Scene transitions should overlap or share an anchor; do not cut through empty black unless the black frame is the point.

10. Validate

Run HyperFrames checks or the closest available substitute:

npx hyperframes doctor
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot <composition> --at <times>

For dense videos, snapshot hero frames and transition frames. A video can render while still failing visually; snapshots catch this earlier.

11. Render And Review

Render a draft before final:

npx hyperframes render --quality draft --output renders/draft.mp4
npx hyperframes render --quality standard --output renders/review.mp4

Use Docker/high quality for final delivery if available and appropriate.

Finish with REVIEW_REPORT.md:

• What was produced.
• Which checks passed.
• Which checks could not run.
• Watch notes by time range.
• Remaining risks.
• The next best edit.

Editing Protocol

When revising, do not rewrite the whole composition unless the user asks for a new direction.

Map feedback to the smallest change:

• "Make it punchier" usually means timing, transition, or copy density.
• "More premium" usually means less clutter, stronger type, longer holds, fewer effects.
• "More clear" usually means script or hierarchy.
• "The product gets lost" means layout, contrast, or product scale.
• "Music doesn't hit" means beat map and timeline positions.

After revising, rerun validation relevant to the changed layer.

Brief Design Proposal

Essence

• Core viewpoint:
• Largest conflict:
• Emotional center:
• Keyword to amplify:
• Visual metaphor:
• Surface content to avoid:

Structure Choice

• Selected structure: center symbol / huge title / person anchor / huge number
• Why this structure:

Format

• Platform:
• Aspect ratio:
• Pixel size:
• Duration:
• FPS:
• Safe margins:
• Crop / overlay risks:

Visual Direction

• Background: #050505
• Palette: white / gray / restrained warm gold
• Center symbol:
• Lighting:
• Texture:
• Forbidden visuals:

Image Generation Decision

• Generate images: yes / no
• Default background stage: generated / supplied / pure-code exception
• Background role: stage / symbol / texture / anchor / transition plate
• Background source:
• Focal subject position:
• Quiet text zone:
• Crop / overlay risk:
• Codex Image Gen after confirmation: yes / no
• Image 1:
• Image 1 role:
• Image 1 required size / aspect:
• Image 2:
• Image 2 role:
• Image 2 required size / aspect:
• What stays in HyperFrames:
• No baked-in text unless required:
• Forbidden image content:

Typography And Layout

• Title scale:
• Support text scale:
• CTA / brand scale:
• Max title lines:
• Max support lines:
• Line height:
• Letter spacing:
• Max text width:
• Overflow handling:
• Mobile crop handling:
• Text-over-image contrast treatment:

Motion Plan

• Opening reveal:
• Background motion:
• Main attention target:
• Transition style:
• Hold times:
• Easing:
• Audio hit plan:
• What must stay still:
• Motion budget:

Risk Gates

• Cheapness risk:
• Readability risk:
• Noise risk:
• Style drift risk:
• Technical risk:

Confirmation Needed

Confirm this direction before image generation, HyperFrames implementation, snapshots, or render.

Design System

Overview

3-4 sentences describing the essence metaphor, why it fits the brief, and how the frame will feel as a premium cinematic magazine cover.

Metaphor System

• Core viewpoint:
• Visual metaphor:
• Dominant symbol:
• Symbol meaning:
• What must stay implicit:
• What must not appear:

Colors

• Background: #050505 deep black.
• Foreground: white / light gray.
• Accent: restrained warm gold only.
• Secondary: dark graphite / soft gray.
• Gradient / glow policy: no colorful gradients; use only subtle warm edge light or metallic glint when it supports the metaphor.

Typography

• Display font: premium high-contrast serif or restrained cinematic grotesk, chosen for the theme.
• Body font: quiet neutral sans.
• Number / technical font: only if the structure uses a huge number or data shock.
• Type scale: one huge title, one quiet support line, one CTA/brand lockup.
• Font weight policy: avoid too many weights; title must dominate.
• Line height: tight but not colliding for display text; comfortable for support text.
• Letter spacing: default 0; use tracking only for small all-caps labels.

Layout

• Aspect ratio:
• Safe margins:
• Grid / alignment: one dominant symbol or title with large negative space.
• Density: sparse; every visible element must earn its place.
• Hero frame rules: must work as a poster without replay; no explanatory icon clusters.

Background Image System

• Default background stage: generated / supplied / pure-code exception
• Background role:
• Background source:
• Local asset path:
• Crop rules:
• Focal subject:
• Quiet text zone:
• Contrast treatment behind text:
• Forbidden content:

Text Over Image

• Title placement:
• Support placement:
• CTA placement:
• Maximum line counts:
• Overflow fallback:
• Mixed Chinese / English fallback:
• Minimum contrast rule:
• When to regenerate or recrop the image:

Components

• Center symbol:
• Title card:
• Product frame:
• Proof / stat moment:
• Caption:
• CTA / brand lockup:

Motion Personality

• Default ease: sine.inOut, expo.out, or similarly controlled cinematic easing.
• Default entrance duration: deliberate, usually 0.8-1.6s for premium reveals.
• Camera behavior: slow push, parallax, or controlled reveal; no restless motion.
• Transition energy: hide scene replacement and land on a readable hero frame.
• Audio hit behavior: structural hits only for title, symbol reveal, proof, and CTA.
• Motion budget: one primary motion idea per scene and one optional support motion.
• Background motion: slow push / parallax / focus pull / light sweep / none.
• Text stillness: major copy must settle before it needs to be read.
• Signature motion moment:
• Repeated animation pattern to avoid:

Image Generation Plan

• Key visual 1:
• Key visual 1 role / size / quiet zone:
• Key visual 2:
• Key visual 2 role / size / quiet zone:
• Texture / atmosphere:
• Texture role / size:
• Prompt constraints:
• Codex Image Gen output path after confirmation:
• Do not include text in generated images unless exact text is required.

Do

• Draw the essence metaphor, not the article surface.
• Use black, white, gray, and warm gold only.
• Keep one dominant idea per frame.
• Use paper grain, volume haze, shallow depth of field, rim light, and restrained metallic detail.

Don't

• Do not use ordinary illustration, ecommerce banner layout, icon piles, generic neon tech, multicolor palettes, or busy collage.
• Do not decorate empty space.
• Do not explain the metaphor with labels.

Accessibility / Readability

• Contrast:
• Minimum text size:
• Mobile crop concerns:

Review Report

Output

• Draft render:
• Review render:
• Final render:
• Snapshot directory:

Validation

Snapshot Notes

Required snapshots: first frame, each hero frame, each transition midpoint, CTA frame, and any frame with dense text or product imagery.

Watch Notes

Quality Score

Style Gate

• Essence metaphor is clear:
• Surface-topic illustration avoided:
• Background image or pure-code exception is verified:
• Background role supports meaning rather than decoration:
• Text sits in a safe quiet zone:
• Black / white / gray / warm gold only:
• One dominant symbol or title per frame:
• Motion has a clear attention target:
• Motion is not repeated template fade/slide:
• Important text settles before it must be read:
• No ecommerce banner, icon pile, neon tech, multicolor palette, or busy collage:
• Generated images saved locally and composed in HyperFrames:
• Poster-frame verdict passed for hero frames:

Issues

1.

Recommended Next Edit

The smallest next edit that would improve the video most.

Remaining Risks

List anything that could not be verified.

Storyboard

Global Timing

• Duration:
• FPS:
• Aspect ratio:
• Audio source:
• Beat map:
• Chosen structure: center symbol / huge title / person anchor / huge number
• Visual metaphor:

Beat 1 - Hook

• Timing:
• Screen text / visual:
• Hero frame timestamp:
• Metaphor role:
• Background / main visual state:
• Text-safe zone:
• Attention target:
• Layout:
• Visual hierarchy:
• Motion:
• Motion purpose: reveal / transition / emphasis / hold
• Must stay still:
• Still hold duration:
• Transition out:
• Transition midpoint snapshot:
• Audio / rhythm:
• Quality risk:
• Poster-frame verdict:

Beat 2 - Reveal

• Timing:
• Screen text / visual:
• Hero frame timestamp:
• Metaphor role:
• Background / main visual state:
• Text-safe zone:
• Attention target:
• Layout:
• Visual hierarchy:
• Motion:
• Motion purpose: reveal / transition / emphasis / hold
• Must stay still:
• Still hold duration:
• Transition out:
• Transition midpoint snapshot:
• Audio / rhythm:
• Quality risk:
• Poster-frame verdict:

Beat 3 - Proof

• Timing:
• Screen text / visual:
• Hero frame timestamp:
• Metaphor role:
• Background / main visual state:
• Text-safe zone:
• Attention target:
• Layout:
• Visual hierarchy:
• Motion:
• Motion purpose: reveal / transition / emphasis / hold
• Must stay still:
• Still hold duration:
• Transition out:
• Transition midpoint snapshot:
• Audio / rhythm:
• Quality risk:
• Poster-frame verdict:

Beat 4 - CTA

• Timing:
• Screen text / visual:
• Hero frame timestamp:
• Metaphor role:
• Background / main visual state:
• Text-safe zone:
• Attention target:
• Layout:
• Visual hierarchy:
• Motion:
• Motion purpose: reveal / transition / emphasis / hold
• Must stay still:
• Still hold duration:
• Transition out:
• Transition midpoint snapshot:
• Audio / rhythm:
• Quality risk:
• Poster-frame verdict:

Visual Asset Breakdown

• Generated image 1:
• Generated image 1 role / size / local path:
• Generated image 2:
• Generated image 2 role / size / local path:
• Generated texture / atmosphere:
• Background stage:
• HyperFrames-only elements:
• Exact local asset paths:

Snapshot Plan

Capture hero frames and transition midpoints. Each snapshot must prove black-background cinematic style, readable hierarchy, background/text relationship, and metaphor clarity.