HyperFrames Motion Director skill
A skill that turns an article, README or website into a vertical HyperFrames promo video: brief and approval first, then assets, build and review
- 470 ★ on the repository
- Last commit
- AGPL-3.0
Extended access
Why this level
- Node.js scripts create the project scaffold and files on disk, and HyperFrames runs the render
- For assets the agent calls an image generator that may send your brief to an external service
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/hyperframes-motion-directorDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Node.js scripts create the project scaffold and files on disk, and HyperFrames runs the render
- For assets the agent calls an image generator that may send your brief to an external service
This is third-party code. Review the repository files before installing.
What it does
HyperFrames Motion Director runs the agent through two phases of video production. In the first it writes a short brief with a design proposal and waits for your confirmation. In the second it prepares assets, builds the composition, checks frames and the render and writes a report. HyperFrames does the rendering, while the skill handles direction, assets, layout and acceptance. By default the skill makes a Chinese vertical 9:16 video at 1080 by 1920 and holds a strict style: a black #050505 background, white, gray and restrained gold, one dominant phrase or symbol per frame. Unless you override it, the skill avoids banner-style illustration, multicolor palettes and icon piles. For videos about a product it demands proof on screen: commands, cards, output previews or numbers. The create_project.mjs script scaffolds BRIEF_DESIGN_PROPOSAL.md, DESIGN.md, STORYBOARD.md and REVIEW_REPORT.md plus the contracts SCENE_SCHEMA.json, VECTOR_TEMPLATES.json and MOTION_PRIMITIVES.json. The check_assets.mjs, validate_image_assets.mjs, validate_artifacts.mjs and validate_design_engineering.mjs scripts check the scaffold and the finished project. The composition needs strong still frames first, and only then is the GSAP animation written.
Who it is for. For product makers, developers and content creators who produce short promo videos from an article, README or landing page and want a controlled process with checks.
Good fit when
- You need a 12-second vertical video from a project README and want to approve the brief first
- You want to turn an article or a product launch into a promo with kinetic typography and on-screen proof
- The project already runs on HyperFrames and you need checks of assets, frames and fonts before rendering
- The video must sync precisely with music or voiceover: the optional BEAT_MAP.json is there for that
Not a fit when
- HyperFrames is not installed: the skill does not render video itself and relies on its validate, snapshot and render commands
- You need a widescreen or non-standard video: the vertical defaults must be overridden explicitly
- You need quick cuts of finished footage with no new design: the skill is built for direction from scratch
- The design must be colorful and busy: the strict default style has to be switched off in the request
Example request
Turn this README into a 12-second Chinese vertical HyperFrames promo. Start with the brief and design proposal and wait for my confirmationLimitations
- Node.js 18 or newer and HyperFrames itself are required. The skill provides direction and checks, and HyperFrames renders the video.
- For frame design the skill requires assets with roles: background plates, component cutouts and asset maps. An image generator available to the agent produces them.
- The default language and format are Simplified Chinese and 9:16 at 1080 by 1920. State other settings in the request.
- Licensed under AGPL-3.0: use in a network service brings source-disclosure obligations.
How to disable. Delete the hyperframes-motion-director folder from the agent's skills directory. Video projects it created live in the folders you passed to create_project.mjs and stay untouched.
FAQ
How do I install HyperFrames Motion Director?
Run npx skills add geekjourneyx/hyperframes-motion-director. Afterwards ask the agent for a HyperFrames video from an article, README or website.
Why does the agent ask first and render nothing?
The skill splits production into two phases. The agent first writes a brief and a design proposal and waits for your confirmation, and only then prepares assets, builds the composition and renders.
What is the default video format?
Vertical 9:16 at 1080 by 1920 in Simplified Chinese. State another format or language in the request, since a platform may demand other settings.
How do I scaffold a project by hand?
Run node skills/hyperframes-motion-director/scripts/create_project.mjs ./my-motion-film. The --with-timing and --with-motion flags add timing and motion maps.
Which checks run before the video is delivered?
The check_assets.mjs, validate_image_assets.mjs, validate_artifacts.mjs and validate_design_engineering.mjs scripts check the assets and the project contracts. For the built composition the skill asks to run HyperFrames validate, snapshot and render commands and compare entry, hold and exit frames.
Discussion
No questions or reviews yet.
Related
SkillsSkills and CLI from HeyGen: the agent writes HTML compositions and renders them into MP4 videos, captions, motion graphics and decks
A skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates
A director skill: it interviews you about a video idea and turns it into a second-by-second shot script for HyperFrames
A skill that makes your agent film a short product video: concept, edit, sound and render on Remotion or HyperFrames
A director skill for stick-figure videos: from a topic or text it prepares a storyboard proposal and ten-second clip prompts in one of four visual styles
A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| HyperFrames Motion Director (this entry) | no | 470 | |
| HyperFrames | no | 74,938 | HeyGen's official skills and CLI that write compositions and render video |
| Motion Video Skill | no | 130 | makes 1080p videos synced to beats with voiceover and karaoke subtitles |
README in short
The README describes the skill as a tool for planning, producing and reviewing HyperFrames videos. It gives a one-command install, an example request, the structure of a created project, the list of requirements the skill enforces, check commands, the release procedure and the repository layout. AGPL-3.0 license.
README badge
Original SKILL.md
--- name: hyperframes-motion-director description: "Direct and produce Chinese-first cinematic motion videos with HyperFrames. Use this skill when the user wants a rendered promo film, article-to-video piece, product launch film, website-to-video piece, keynote reveal, kinetic typography sequence, text/icon transition promo, music-synced motion graphic, HTML/CSS/SVG/GSAP video, short-form vertical video, or a landing page/product story turned into motion. Default to Simplified Chinese, vertical 9:16, and 1080x1920 unless the user or platform clearly requires another format. The skill enforces a two-phase workflow: brief first, confirmation second, then assets, composition, validation, snapshots, render, and review report." --- # HyperFrames Motion Director Use this skill to turn a vague video request into a reviewable HyperFrames production. First produce a concise brief/design proposal. Continue to assets, composition, snapshots, render, and review only after the user confirms the direction. HyperFrames handles rendering. This skill handles direction, assets, layout, motion planning, and delivery checks. When the film promotes a concrete product, tool, skill, CLI, app, API, workflow, template library, or creative system, treat the work as a premium product promo, not only a cinematic metaphor short. The video must show product proof: commands, cards, screenshots, output previews, modules, numbers, chips, icons, marks, or workflow states that make the claim visible. ## Core Principle Work from the final viewing experience backward: 1. What should the viewer remember? 2. What metaphor carries the point? 3. Which image stage gives the frame depth, context, or tension? 4. Which frame proves the visual direction is strong? 5. Which movement makes the viewer keep watching? 6. Which beat carries the hook, reveal, proof, and CTA? 7. Which motion choices guide attention through those beats? 8. Which visual objects compress meaning better than more words? 9. Which validation proves the video will render deterministically? Start with legible still frames and timing. Write animation code only after the frame plan works. A strong still frame is a gate. The finished video should lose meaning when reduced to screenshots; otherwise the motion is only presentation polish. ## 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. Keep warm gold as a restrained accent. - Magazine-cover composition: one dominant symbol or phrase, no explanatory clusters. - Subtle paper grain, shallow depth of field, volume haze, thin rim light, local metallic highlights.