/hyperframes-motion-director

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.
• 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.

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.
• Literal article-surface drawings when a metaphor would be clearer.
• PPT-like sequencing: static title cards, repeated fade-up scenes, identical centered layouts, empty black fades, or text pasted over wallpaper.

Premium Product Promo Rule

For product, tool, CLI, SaaS, API, skill, template, workflow, or system promos, black cinematic style is only the base layer. It is not enough.

Visual components are mandatory for premium product promos. Do not proceed to implementation with only a background image, big titles, scan lines, and one symbol. That produces a single-note film. A premium promo needs a reusable component library that makes the product feel real.

A product promo with no visual components is blocked. A "visual component" is a visible, reusable product-specific surface with content slots, style rules, state, motion interaction, and a snapshot proof. Generic text boxes, isolated labels, decorative borders, floating lines, background gradients, and unanchored icons do not count.

The film must build a product proof ecosystem:

• Product proof artifacts: commands, UI surfaces, output cards, screenshots, generated examples, module labels, theme stacks, provider chips, numbers, validations, reports, or before/after states.
• Component library: command card, output/draft card, stat block, module chip group, provider chip group, proof card, product frame, anchored route/signal, theme/output stack, CTA badge, or equivalent product-specific surfaces.
• Icon and decorative system: marks, chips, rails, brackets, glows, fragments, panels, shadows, and texture must be named, reusable, and tied to meaning.
• Motion interactions: each major component must reveal a product state change, not only enter the scene.
• Copy ladder: pain -> mechanism -> proof -> confidence -> CTA. If a line could fit any product, rewrite it.

Content-derived product visual component coverage:

• Derive the component count from source phrases, product mechanisms, proof claims, and actions. Do not target a fixed number such as 4, 6, or 12.
• Include a concrete product surface when the claim depends on a real or faithful product state.
• Include taxonomy components only when the source contains modules, providers, features, themes, modes, or statuses.
• Include a final action component when the film has a CTA.
• Show the important mechanism or proof components early enough that the first half is not only titles and atmosphere.
• Every product component defines role, source, content slots, visual state, motion interaction, snapshot timestamp, and deletion test.
• Every visible product component must perform an action: type, route, fan, assemble, reveal, scan, validate, transform, count, lock, export, publish, save, collapse, or hand off. Static placement alone d