Guide the visual and storytelling choices for HyperFrames videos, including colors, fonts, composition, narration, and pacing. Use existing brand specifications or choose a visual style to give scenes a consistent look and rhythm.
中文简介正在准备中。当前显示英语简介。
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
安装前可以查看交给 AI 代理的指令内容。
Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
Brand, pacing, style, narration, and composition direction. Use after the technical contract from hyperframes-core is in place.
For motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-animation — this skill is intentionally non-animation.
Read these two FIRST for any non-trivial composition — they override web instincts:
references/house-style.md— "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.references/video-composition.md— video-medium scale, depth, and foreground detail. It explains how to avoid empty web-page layouts without imposing a universal element count.Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
frame.md → design.md → DESIGN.md) and how to parse it (frontmatter = normative, prose = context) are defined once in references/design-spec.md — resolve and load per that doc.frame-presets/ (adopt a FRAME.md as frame.md; see references/design-spec.md)references/visual-styles.mdreferences/house-style.mdreferences/design-picker.mdreferences/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.| Topic | Read |
|---|---|
Adopt a ready-made frame-preset as frame.md (optional) | frame-presets/ · references/design-spec.md |
| Default palettes, motion, typography, lazy defaults to question | references/house-style.md |
| Named style presets, mood-to-style routing | references/visual-styles.md |
| Palette-specific color tokens | palettes/*.md |
| Composition patterns — PiP, text-behind-subject, title card, slide show | references/composition-patterns.md |
| Stats / infographic presentation | references/data-in-motion.md |
| Structured expansion for open-ended prompts | references/prompt-expansion.md |
| Video-medium density, scale, color, frame composition | references/video-composition.md |
| Per-beat direction, rhythm planning, transition timing | references/beat-direction.md |
| Post-authoring spec verification (colors, type, corners, spacing, depth) | references/design-adherence.md |
| High-level motion guardrails and GSAP-quality rules | references/motion-principles.md |
| Font selection, pairings, rendered-video type guardrails | references/typography.md |
| Story doctrine — hook language, value-before-evidence, storyboard-as-proposal, source-traceable visuals | references/story-spine.md |
| Script pacing, tone, openings, number pronunciation | references/narration.md |
| Precomputed audio bands mapped to motion | references/audio-reactive.md |
scripts/contrast-report.mjs — inspect contrast warnings from rendered frames.scripts/extract-audio-data.py — pre-extract audio bands for audio-reactive compositions.scripts/package-loader.mjs — support script for bundled creative tooling.contrast-report.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
Run with explicit paths, for example:
python <SKILL_DIR>/scripts/extract-audio-data.py <audio-file>
Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.
hyperframes-core technical rules.还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Create a 12-second title animation in HyperFrames, where sweeping leaves reveal two headlines. Customize typography, leaf counts, sweep speed, background color, and the breeze moving the leaves that remain on the text.
中文简介正在准备中。当前显示英语简介。
Plan subtitles as layers over a video, deciding which spoken phrases to omit, show normally, or emphasize behind the subject. The guidance preserves full-frame composition and limits large embedded words to occasional key moments.
中文简介正在准备中。当前显示英语简介。
Turn a weekly Markdown changelog into a branded video project with animated interface examples, Annie narration, captions, and background music. The workflow selects key updates and builds a 45–60 second square video, with rendering performed on request.
中文简介正在准备中。当前显示英语简介。
Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.
中文简介正在准备中。当前显示英语简介。
Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.
中文简介正在准备中。当前显示英语简介。
Design scene transitions and animated text using matched movement direction and speed across cuts. The catalog provides concrete settings for zooms, blur, word-by-word transitions, staggered entrances, and repositioning groups of elements.
中文简介正在准备中。当前显示英语简介。