{"id":"b854a6c5-d7a9-4b22-a472-1e57f9987a41","slug":"hyperframes-motion-director","kind":"skill","name":"hyperframes-motion-director","summary":"Agent Skill for Chinese-first HyperFrames motion-video production from articles, products, websites, and README files.","owner":"geekjourneyx","repoUrl":"https://github.com/geekjourneyx/hyperframes-motion-director","license":"AGPL-3.0","licenseTier":"strong-copyleft","trust":"community","stars":457,"match":null,"fewStars":false,"format":"skill","createdAt":null,"addedAt":"2026-10-14T06:23:02.969Z","logoUrl":"https://avatars.githubusercontent.com/u/24422856?u=4e2cae90fdc8fa45e3067cbc56b862300f40765a&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","files-documents"],"tags":["hyperframes","video-generation","video-production","article-to-video","image-generation","motion-video","website-to-video","chinese-first"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-14T06:23:26.917Z","sample":false,"url":"https://conduits.dev/tools/hyperframes-motion-director","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"<div align=\"center\">\n\n# HyperFrames Motion Director\n\n**An Agent Skill for planning, producing, and reviewing HyperFrames motion videos.**\n\n<img src=\"skills/hyperframes-motion-director/assets/banner.png\" alt=\"HyperFrames Motion Director\" width=\"100%\">\n\n[![License: AGPL-3.0](https://img.shields.io/badge/License-AGPL--3.0-blue.svg)](./LICENSE)\n[![Agent Skill](https://img.shields.io/badge/Agent%20Skill-HyperFrames-c96442.svg)](./skills/hyperframes-motion-director/SKILL.md)\n[![Node.js](https://img.shields.io/badge/Node.js-18%2B-141413.svg)](https://nodejs.org/)\n\n</div>\n\n## What It Is\n\nHyperFrames Motion Director is an Agent Skill for turning a product story, article, README, website, or launch message into a structured HyperFrames motion-video production.\n\nIt 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.\n\nThe skill keeps production in two phases:\n\n1. Create a brief/design proposal and wait for confirmation.\n2. Generate assets, build the composition, validate snapshots/renders, and write a review report.\n\n## Install\n\n```bash\nnpx skills add geekjourneyx/hyperframes-motion-director\n```\n\n## Use\n\nAfter installation, ask your Agent for a HyperFrames motion video, product launch film, article-to-video piece, or kinetic typography promo.\n\nExample:\n\n```text\nTurn this README into a 12-second Chinese vertical HyperFrames promo.\nStart with the brief/design proposal and wait for confirmation.\n```\n\n## Local Development\n\nCreate a motion-video production scaffold from this repository:\n\n```bash\nnode skills/hyperframes-motion-director/scripts/create_project.mjs ./my-motion-film\n```\n\nCreate a project with timing and motion maps:\n\n```bash\nnode skills/hyperframes-motion-director/scripts/create_project.mjs ./my-motion-film --with-timing --with-motion\n```\n\n## Outputs\n\nThe scaffold creates four core production files:\n\n```text\nBRIEF_DESIGN_PROPOSAL.md  Direction, format, visual plan, motion plan\nDESIGN.md                 Visual system, asset rules, layout contracts\nSTORYBOARD.md             Beats, screen copy, timing, transitions\nREVIEW_REPORT.md          Checks, snapshots, issues, remaining risks\n```\n\nIt also creates three design-engineering contracts:\n\n```text\nSCENE_SCHEMA.json         Structured scenes, slots, layout contracts, timing, snapshots\nVECTOR_TEMPLATES.json     Approved SVG scene systems, icon/decor rules, rejection tests\nMOTION_PRIMITIVES.json    Approved GSAP/SVG/CSS motion vocabulary, plugin policy, selection rules\n```\n\nOptional files:\n\n```text\nBEAT_MAP.json             Music, voiceover, or exact timing map\nMOTION_MAP.json           GSAP choreography and transition map\n```\n\n## What It Enforces\n\n<img src=\"skills/hyperframes-motion-director/assets/features.png\" alt=\"Background, typography, and motion layers\" width=\"100%\">\n\n- A confirmed brief before implementation.\n- Chinese vertical-video defaults, with documented overrides for other platforms.\n- Image Gen assets with a clear role, quiet text zone, crop-safe area, and local path.\n- Background and component counts derived from the actual story, product mechanism, and proof needs rather than a fixed quota.\n- Exact supplied style sources inspected directly, with a clear boundary between visual language and product narrative.\n- Independent vertical background plates plus source-driven component sheets, with separate hero generations added when needed.\n- Asset libraries checked for narrative-anchor, product-proof, and transition-carrier roles, plus distinct component combinations.\n- Named transparent cutouts, dark/light contact-sheet review, and a manifest that records accepted assets and revisions.\n- Text-over-background layout contracts before animation.\n- Scene schema, vector template, and motion primitive contracts before implementation.\n- GSAP choreography contracts: labels, position parameters, plugin registration, transform aliases, and performance rules.\n- Motion that guides attention instead of repeating static slide patterns.\n- Final-MP4 checks for composite-layer ownership, visible transparent-asset bounds, exported font fit, and entry/hold/exit frames.\n- Validation, snapshots, and review notes before final delivery.\n- Compact artifact writing: no self-talk, generic pitch language, or unrelated commentary.\n\n## Validate This Skill\n\nCheck the skill package:\n\n```bash\nnode skills/hyperframes-motion-director/scripts/check-structure.mjs\n```\n\nCheck a generated project:\n\n```bash\nnode skills/hyperframes-motion-director/scripts/check_assets.mjs <project-dir>\nnode skills/hyperframes-motion-director/scripts/check_assets.mjs <project-dir> --strict\nnode skills/hyperframes-motion-director/scripts/check_assets.mjs <project-dir> --require-premium-assets\nnode skills/hyperframes-motion-director/scripts/validate_image_assets.mjs <project-dir>\nnode skills/hyperframes-motion-director/scripts/validate_artifacts.mjs <project-dir>\nnode skills/hyperframes-motion-director/scripts/validate_design_engineering.mjs <project-dir>\n```\n\nFor implemented HyperFrames compositions, also run the strongest checks supported by the local HyperFrames CLI, such as validate, inspect, snapshot, and render.\n\n## Releases\n\nStable 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.\n\nSee [RELEASING.md](RELEASING.md) for the complete release procedure and recovery rules.\n\n## Repository Structure\n\n```text\nskills/hyperframes-motion-director/SKILL.md      Main Agent Skill instructions\nskills/hyperframes-motion-director/templates/    Brief, design, storyboard, review, schema, vector, motion maps\nskills/hyperframes-motion-director/references/   Workflow, visual standards, design engineering, GSAP choreography, layout, audio sync, stability\nskills/hyperframes-motion-director/scripts/      Project scaffold and validation helpers\nskills/hyperframes-motion-director/evals/        Trigger prompts and evaluation cases\nskills/hyperframes-motion-director/assets/       Skill and README visual assets\n```\n\n## Author\n\n- Website: [jieni.ai](https://jieni.ai)\n- GitHub: [geekjourneyx](https://github.com/geekjourneyx)\n- X: [@seekjourney](https://x.com/seekjourney)\n- WeChat Official Account: 极客杰尼\n\n## License\n\n[GNU Affero General Public License v3.0](./LICENSE)\n"}