What It Is

HyperFrames Motion Director is an Agent Skill for turning a product story, article, README, website, or launch message into a structured HyperFrames motion-video production.

It defaults to Chinese-first vertical promo videos: 9:16, 1080x1920, concise screen copy, controlled visual assets, readable hold frames, and a review step before delivery.

The skill keeps production in two phases:

1. Create a brief/design proposal and wait for confirmation.
2. Generate assets, build the composition, validate snapshots/renders, and write a review report.

Install

npx skills add geekjourneyx/hyperframes-motion-director

Use

After installation, ask your Agent for a HyperFrames motion video, product launch film, article-to-video piece, or kinetic typography promo.

Example:

Turn this README into a 12-second Chinese vertical HyperFrames promo.
Start with the brief/design proposal and wait for confirmation.

Local Development

Create a motion-video production scaffold from this repository:

node skills/hyperframes-motion-director/scripts/create_project.mjs ./my-motion-film

Create a project with timing and motion maps:

node skills/hyperframes-motion-director/scripts/create_project.mjs ./my-motion-film --with-timing --with-motion

Outputs

The scaffold creates four core production files:

BRIEF_DESIGN_PROPOSAL.md  Direction, format, visual plan, motion plan
DESIGN.md                 Visual system, asset rules, layout contracts
STORYBOARD.md             Beats, screen copy, timing, transitions
REVIEW_REPORT.md          Checks, snapshots, issues, remaining risks

It also creates three design-engineering contracts:

SCENE_SCHEMA.json         Structured scenes, slots, layout contracts, timing, snapshots
VECTOR_TEMPLATES.json     Approved SVG scene systems, icon/decor rules, rejection tests
MOTION_PRIMITIVES.json    Approved GSAP/SVG/CSS motion vocabulary, plugin policy, selection rules

Optional files:

BEAT_MAP.json             Music, voiceover, or exact timing map
MOTION_MAP.json           GSAP choreography and transition map

What It Enforces

• A confirmed brief before implementation.
• Chinese vertical-video defaults, with documented overrides for other platforms.
• Image Gen assets with a clear role, quiet text zone, crop-safe area, and local path.
• Background and component counts derived from the actual story, product mechanism, and proof needs rather than a fixed quota.
• Exact supplied style sources inspected directly, with a clear boundary between visual language and product narrative.
• Independent vertical background plates plus source-driven component sheets, with separate hero generations added when needed.
• Asset libraries checked for narrative-anchor, product-proof, and transition-carrier roles, plus distinct component combinations.
• Named transparent cutouts, dark/light contact-sheet review, and a manifest that records accepted assets and revisions.
• Text-over-background layout contracts before animation.
• Scene schema, vector template, and motion primitive contracts before implementation.
• GSAP choreography contracts: labels, position parameters, plugin registration, transform aliases, and performance rules.
• Motion that guides attention instead of repeating static slide patterns.
• Final-MP4 checks for composite-layer ownership, visible transparent-asset bounds, exported font fit, and entry/hold/exit frames.
• Validation, snapshots, and review notes before final delivery.
• Compact artifact writing: no self-talk, generic pitch language, or unrelated commentary.

Validate This Skill

Check the skill package:

node skills/hyperframes-motion-director/scripts/check-structure.mjs

Check a generated project:

node skills/hyperframes-motion-director/scripts/check_assets.mjs <project-dir>
node skills/hyperframes-motion-director/scripts/check_assets.mjs <project-dir> --strict
node skills/hyperframes-motion-director/scripts/check_assets.mjs <project-dir> --require-premium-assets
node skills/hyperframes-motion-director/scripts/validate_image_assets.mjs <project-dir>
node skills/hyperframes-motion-director/scripts/validate_artifacts.mjs <project-dir>
node skills/hyperframes-motion-director/scripts/validate_design_engineering.mjs <project-dir>

For implemented HyperFrames compositions, also run the strongest checks supported by the local HyperFrames CLI, such as validate, inspect, snapshot, and render.

Releases

Stable tags publish GitHub Releases automatically after the tagged source passes the repository checks. A main push also repairs the newest stable tag when its Release is missing.

See RELEASING.md for the complete release procedure and recovery rules.

Repository Structure

skills/hyperframes-motion-director/SKILL.md      Main Agent Skill instructions
skills/hyperframes-motion-director/templates/    Brief, design, storyboard, review, schema, vector, motion maps
skills/hyperframes-motion-director/references/   Workflow, visual standards, design engineering, GSAP choreography, layout, audio sync, stability
skills/hyperframes-motion-director/scripts/      Project scaffold and validation helpers
skills/hyperframes-motion-director/evals/        Trigger prompts and evaluation cases
skills/hyperframes-motion-director/assets/       Skill and README visual assets

Author

• Website: jieni.ai
• GitHub: geekjourneyx
• X: @seekjourney
• WeChat Official Account: 极客杰尼

License

GNU Affero General Public License v3.0