hyperframes-creative

HyperFrames Creative

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 density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene). > > 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.

Workflow

1. If a project has a design spec, read it first — precedence frame.md → design.md → DESIGN.md. frame.md is the preferred spec for video/hyperframes projects and wins if more than one exists (same format as design.md); it is always lowercase, no FRAME.md variant, while design.md and DESIGN.md are different files on Linux. Treat it as brand truth: colors, fonts, spacing, tone, and constraints.
2. If no design spec exists and the user asks for visual direction, choose a route:

• Named style or mood → references/visual-styles.md
• Fast defaults → references/house-style.md
• Interactive selection → references/design-picker.md

1. For multi-scene work, plan beats and rhythm before writing HTML → references/beat-direction.md. For scene transitions, jump to hyperframes-animation/transitions/.
2. For motion-heavy work, read references/motion-principles.md (high-level guardrails), then go to hyperframes-animation for atomic rules.

Routing

Scripts

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

Run from the repo root with explicit paths, for example:

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animation analysis (animation-map.mjs) lives in hyperframes-animation/scripts/.

Boundaries

• Do not override hyperframes-core technical rules.
• Do not require a design system for a minimal technical composition.
• Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
• Keep recipe references task-specific; do not read every reference for simple edits.