Home / All Skills / Content & Media Creation / motion-design-systems
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · saranambiar/hyperframes-video-agent-skills

motion-design-systems

Reusable visual and motion design systems for agent-created videos, including premium motion language, glassmorphism, chart/data storytelling, CTA layouts, logo rows, table frames, color tokens, and brand consistency. Use when a video scene needs polished visual direction, Apple/VisionOS-style motion, enterprise design, theme cleanup, reusable components, or reference-image final-frame matching.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandWrite FileDual-pass Audit
Author saranambiarGitHub saranambiar/hyperframes-video-agent-skills ↗Stars 48License Apache-2.0（仓库根 LICENSE 为 Apache License Version 2.0；GitHub API license.spdx_id = Apache-2.0）Commit f6b043d9fd
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Establish visual systems before animating: background & lighting, primary & neutral colors, typography & type scale, component materials, shadow styles, motion language, and forbidden appearances—these seven items must be defined before taking action.

skills/motion-design-systems/SKILL.md
Define these before animating:
What this does: Converts 'visual direction' into an actionable system checklist, preventing endless rework caused by changing colors and type scales while animating.

When no brand system exists, provide a set of conservative defaults (warm white background, black body text, single accent color, soft shadows, modest corner radii, generous negative space, direct callouts, minimal decoration), and explicitly ban another set of defaults (blue-purple gradients, neon lines, dark sci-fi dashboards).

skills/motion-design-systems/SKILL.md
Do not default to blue/purple gradients, neon lines, or dark sci-fi dashboards.
What this does: Serves as the skill's primary 'taste criterion'—adding typical 'AI default looks' to a forbidden list, replacing vague advice like 'be tasteful' with an explicit negative list.

Keep the motion vocabulary small and repetitive (camera push/wipe, path drawing, material scale, blur-to-clear, specular sweep, shimmer, particle drift, gentle hold), emphasizing that reusing the same small vocabulary creates coherence across multiple scenes.

skills/motion-design-systems/SKILL.md
Repeating a small motion vocabulary makes multi-scene videos feel coherent.
What this does: Attributes multi-scene consistency to vocabulary reuse rather than single-shot acrobatics, providing an engineering approach to a unified visual feel across a video series.

Pair an easing whitelist (power2.out / power3.out / expo.out / sine.inOut) alongside a forbidden list (bounce/rebound, neon, sci-fi HUDs, generic SaaS explainer clichés), unless explicitly requested by the user.

skills/motion-design-systems/SKILL.md
- Use ease curves that settle naturally: `power2.out`, `power3.out`, `expo.out`, `sine.inOut`.
What this does: Translates 'premium feel' into concrete easing function selections and exclusions; references/premium-motion.md further outlines 'commonly failing' approaches.

Chart storytelling follows a strict reveal sequence: establish axes & labels first → draw lines from left to right → plot points only when the curve reaches them → place labels close to target objects (no legends unless requested) → reveal gap fills only after both curves establish the gap.

skills/motion-design-systems/SKILL.md
- Points appear only when the line reaches them.
What this does: Hardcodes the chronological sequence of data storytelling to eliminate common pitfalls like premature points, early fills, and detached legends that lose the audience (mapping directly to Failure Modes in references).

Theme replacement is a search engineering process rather than modifying a single variable: scan CSS variables, raw hex values, RGB/RGBA, SVG fill/stroke, canvas/WebGL constants, inline styles, and duplicated start/carryover frames; keep logos, product screencasts, real product screenshots, and user reference images untouched.

skills/motion-design-systems/SKILL.md
Do not recolor logos or product-demo footage unless explicitly requested.
What this does: Exhaustively outlines the search surface for theme cleanup while exempting assets that must never be recolored—the most error-prone step in brand videos.

Troubleshoot lack of polish in strict sequence: scale → spacing → color consistency → motion timing → and typography last, directly delivering conclusive assessments.

skills/motion-design-systems/SKILL.md
Most "not premium" complaints come from oversized elements, too many colors, or uncontrolled motion.
What this does: Turns subjective complaints into a prioritized diagnostic checklist, preventing the reflex of swapping fonts whenever something 'does not look premium enough'.

2Core Capabilities

01Reusable component library patterns: glass cards/panels, logo rows, CTA lockups, table frames, chart axes-lines-labels-nodes-gap fills, spheres/rings/particles/character tags; parameterized via CSS custom properties or JS constants to avoid hardcoded one-off colors
02Theme tokens and cleanup checklist: provides ready-to-use :root token samples (warm white background #f7f3ec, ink black #111111, accent orange #ef6f22, glass fill and stroke), accompanied by search targets and exclusion objects
03Reference image alignment checklist (10 items): object count, relative position, scale, font weight, line width, corner radius, background warmth, shadow softness, label positioning, and final frame readability
04Card and layout dimension discipline: explicitly define sizes, decouple title hierarchy from card hierarchy, make cards smaller than intuitive defaults, leave clearance for subtitles, re-verify final frames with subtitles, avoid nested cards, and avoid chart labels that necessitate legends
05Chart storytelling reference (narrative sequence, tight curve-labeling rules, five failure modes, and six mandatory proof frame captures)
06Premium motion reference: effective approaches (slow camera drift, foreground/background parallax, material emergence, path stroke reveals, shimmer after primary motion settles, living hold frames) vs. commonly failing approaches (pure opacity reveals on physical objects, generic SaaS dashboards, dark neon HUDs, arbitrary non-narrative ornamentation)
07Visual intake checklist (audience & context, brand & forbidden colors, video type: product demo/launch video/UGC/commercial/enterprise explainer, reference image as exact final frame or moodboard, restrained vs. high energy, typography brand matching requirements)

3External Dependencies

KindDependency / Endpoint
packageGSAP 缓动函数名（power2.out / power3.out / expo.out / sine.inOut）——本件把缓动选择写成判据，实现落在 GSAP 生态；除此外不点名任何 CLI、端点或远程包

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Execute local scripts or commands: (No scripts inside this skill directory) The host modifies components/composition files and theme tokens within the project and extracts proof frames per documentation; concrete commands reside in hyperframes-scene.
  • 本地工作目录: File read/write & artifact generation: Project-internal component/composition file modifications (CSS custom properties, tokens, SVG fill/stroke, gradients, shadows).
Audit Notes: The skill directory contains only SKILL.md and three reference files (pure instructions, no executables); its behavior covers local read/write (modifying project-internal components/compositions/theme tokens, capturing proof frames) and visual interpretation of reference images without invoking any CLI, accessing networks, or reading credentials, qualifying for Blue tier 'Local read/write only'. **No assets sent to external services**: full scans of the skill directory confirm zero http(s):// endpoints, zero fetch/requests, and zero token/env accesses; it is even the only skill in the family that names no CLIs or endpoints (the only library semantics present are GSAP easing function names). Uniform tier evaluation across all nine sister skills: directories contain only SKILL.md (+ references), behaviors are local read/write and local CLI, with zero endpoints, zero credentials, and zero external asset transmissions.

5Second-Pass Verification

  • [ok] 「零外部依赖」是否成立 — 目录扫描无 URL、无 CLI 名、无包名引用（仅出现 GSAP 缓动函数名，属实现建议而非调用）。这是本族唯一连本地 CLI 都不点名的 skill。
  • [ok] 默认视觉系统与禁止项是否都可判定 — 默认值是具体对象（暖白底、黑主文字、单强调色、柔和阴影、保守圆角、大量负空间、直接标注），禁止项是具体风格（蓝紫渐变、霓虹线、暗色科幻仪表盘、卡片套卡片、需要图例的标签）——可勾选，不依赖主观裁量。
  • [ok] 缓动白名单是否与 GSAP 实际函数名一致 — power2.out / power3.out / expo.out / sine.inOut 均为 GSAP 标准 ease 名称（格式为 <ease>.<type>），可原样传给 ease 参数。
  • [ok] 三份 references 是否都被 SKILL.md 点名且存在 — SKILL.md 点名 references/premium-motion.md 与 references/theme-tokens.md 以及 references/chart-storytelling.md；三份文件在 pin 内均存在，无悬空引用、无未点名文件。
  • [discrepancy] 「用 proof frame 验证主题变更」是否有可执行支撑 — SKILL.md 只要求用受影响场景与下一场景承载帧的 proof frame 验证，未点名抽帧工具；实际抽帧在仓库层 scripts/extract_proof_frames.py 与同族 render-qa-and-surgical-changes 里。只加载本件时验证动作缺少具体命令（设计层与工具层分离的必然结果，非缺陷但需注意）。
  • [ok] 与 hyperframes-scene-builder 是否有重复或冲突判据 — 本件的规则全部是视觉与动效语言层面（色、材质、缓动、图表揭示顺序、尺寸），未涉及组合根、时间线注册、渲染命令等实现契约；scene-builder 也只提共享设计 token 放在文件顶部，二者互补不冲突。

6Verdict & Scenarios

  • Breaks down 'taste' into verifiable checklists (seven system definitions + ten reference alignment points + four-tier recovery priorities), making subjective evaluations auditable
  • Uses a negative default list to block stereotypical AI-generated aesthetics (blue-purple gradients, neon, dark sci-fi HUDs, SaaS dashboards, nested cards)
  • Provides a deterministic reveal order for chart data storytelling, directly addressing five common failure modes (premature plotting, early gap fills, retrofitted legends, etc.)
  • Exhaustively defines the search surface for theme cleanups (including SVG fill/stroke, canvas constants, duplicated carryover frames) and protects untouched assets (logos, screen recordings, real screenshots, reference images)
  • Delivers conclusive attribution and triage order, turning 'not premium enough' into a systematic diagnostic workflow instead of arbitrary font changes
    • Best for: Ideal for: Scenarios requiring 'visual direction' rather than merely 'being renderable'—establishing visual systems and tokens, implementing glassmorphism and premium motion, crafting charts and data storytelling, building CTA/logo-row/table-frame components, cleaning up theme colors, matching final frames to reference images, and maintaining multi-scene brand consistency. Also serves as an aesthetic baseline for product launches, enterprise explainers, and demo videos.
    Not for: Not suitable for: 1. Scenarios needing concrete implementation contracts and render execution commands (use hyperframes-scene-builder instead); 2. Scenarios lacking reference images or brand constraints where only rapid drafting is desired (the intake upfront cost here is relatively high); 3. Styles demanding dark modes, neon, sci-fi HUDs, or high-energy rapid cuts—requires explicitly overriding defaults; 4. Expecting 'one-click automated theme changes' (this provides criteria and search checklists; actual scanning and replacement rely on workspace scripts and manual verification).
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload motion-design-systems.tar.gz
    sha256: 39a1199550b8d94b…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit f6b043d9fd.