version: "1.0.0" name: creating-ui-driven-motion-videos description: Turns writing, products, workflows, or abstract ideas into a tailored UI-driven motion-graphics video. Use when the requested deliverable is a scripted, storyboarded, rendered video rather than an interface animation.

Create a UI-Driven Motion Video

Create a narrative, visual system, and rendered video that fit the source rather than forcing every subject into one template.

Scope first

Resolve the central message, audience, source facts, protected terminology, language, duration, aspect ratio, and requested audio/captions/media. Ask only when missing information would materially change the outcome. If unspecified, use a sensible landscape short-video default and state it.

Load only tools and references needed for the deliverable:

• Load the available HyperFrames project/core/CLI guidance needed to inspect, author, validate, or render the actual project; do not load every related skill by default.
• Read reference/article-analysis.md for article-heavy or conceptually dense sources.
• Read reference/storyboard-patterns.md when choosing among narrative structures or checking template repetition.
• Read reference/style-system.md when defining a new visual direction.
• Research catalogs/examples only when the local project and supplied references do not answer a specific design or API question. Inspect a small relevant set, not a fixed quota.

Workflow

1. Extract the thesis, argument arc, concrete examples, emotional progression, and the relationship best explained visually.
2. Develop enough genuinely different directions to make a sound choice. Present them only when the user asked to choose; otherwise select one and briefly record why it fits.
3. Write a screen-first script with readable copy, purposeful beats, visual action, transitions, and timing. Preserve facts and exact product terms; do not invent claims or metrics.
4. Storyboard composition, hierarchy, continuity, and state changes. Motion should explain comparison, transformation, relationship, accumulation, or viewpoint—not merely decorate UI chrome.
5. Implement to the installed HyperFrames contract. Keep the timeline seek-safe, avoid competing CSS/GSAP transforms, preserve visible text for localization, and use overlap exceptions only when intentional.
6. Verify proportionally during iteration. For the user-requested full video outcome, always run composition checks, inspect representative frames across every beat, run available keyframe/layout diagnostics, render the requested format, verify media metadata, and inspect the full rendered video.

Report the chosen direction, output path, resolution, duration, frame rate, codec, checks run, and any unverified audio/visual concern.