Vance IngallsandClaude Opus 4.8
fcff442ab7
* docs(skills): prefer frame.md over design.md for video specs Skills now look for a design spec in precedence order frame.md → design.md → DESIGN.md when reading. frame.md is the preferred spec for video/hyperframes projects (same format as design.md) and wins if more than one exists. Read-path mentions updated across SKILL.md, house-style.md, prompt-expansion.md, video-composition.md, and dynamic-techniques.md. Creation flows (design picker, visual-styles) still output design.md; website-to-video skill untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs(skills): resolve frame.md/design.md consistency gaps from review Address partial-migration contradictions flagged in review: - video-composition.md: abstract the section header and intro line (line 3, "## The Design Spec Is Brand, Not Layout") so a reader does not hit design.md-only language before the abstracted body - SKILL.md references index: "the design spec as brand not layout" (line 472), "generating a design spec" (line 480), and the Step 1 conceptual aside (line 37) - Note frame.md is always lowercase (no FRAME.md fallback) in the precedence note; switch prompt-expansion prerequisite to the same frame.md -> design.md -> DESIGN.md arrow notation Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3.6 KiB
Video Composition
Video frames are not web pages. These rules apply to every composition regardless of brand, style, or design spec.
The Design Spec Is Brand, Not Layout
The design spec (frame.md or design.md) defines what the brand looks like: colors, fonts, personality, constraints. It does NOT define how to compose a video frame. Use brand colors at video-appropriate intensity — not at web-UI opacity.
Strict from the spec: hex values (including background color), font families, weight relationships, Do's and Don'ts. If the user chose a light canvas, use a light canvas. If they chose dark, use dark. Do not override their palette.
Adapt for video: type sizes, spacing, decorative opacity, border weight, component treatments. A web UI card at border: 1px solid #e2e3e6 with box-shadow: 0 2px 4px rgba(0,0,0,0.06) is invisible on video. The brand color is sacred; the application is yours.
Density
A beat with 3 elements looks empty. A beat with 8-10 feels alive.
Every scene needs:
- Background texture — radial glow, oversized ghost type, color panel, grain, grid. Never solid flat color.
- Midground content — the actual message. Cards, stats, code blocks, images.
- Foreground accents — dividers, labels, data bars, registration marks, monospace metadata. The details that make it feel produced, not generated.
Aim for 8-10 visual elements per scene. Two of those should be decorative elements the user didn't ask for — you add them because empty frames look broken.
Color Presence
Muted is fine. Flat is not. Every scene should have at least one color that pulls the eye.
- Brand accent should be VISIBLE — not a 5% opacity glow lost in compression. 15-25% for atmospheric, full saturation for focal elements.
- Light canvases work differently than dark. On dark: accent glows pop naturally. On light: use bolder borders (2px+ solid), stronger structural elements (rules, dividers), and full-saturation accent hits. Light backgrounds need texture (subtle grain, patterns) to avoid the "blank slide" feel. Don't switch to dark — make light cinematic.
- Tint neutrals toward the brand hue. Dead gray reads as undesigned.
Scale
Web sizes are invisible on video. Everything scales up.
| Element | Web | Video |
|---|---|---|
| Headlines | 32-48px | 64-120px |
| Body text | 14-16px | 28-42px |
| Labels | 12px | 18-24px |
| Decorative opacity | 3-8% | 12-25% |
| Borders | 1px | 2-4px |
| Padding | 16-32px | 60-140px |
If you're writing a font-size under 24px in a video composition, justify it. If you're writing decorative opacity under 10%, it's invisible.
Motion Intensity
Subtle reads as static at 30fps. Err toward more movement than feels safe.
- Every decorative element should have ambient motion: breathe, drift, pulse, orbit. Static decoratives feel dead.
- Vary motion per scene — don't repeat the same ambient pattern.
- Scene entrances should use 3+ different eases and directions. If every element enters from
y: 30, opacity: 0, the scene has no choreography.
Frame Composition
- Two focal points minimum. The eye needs somewhere to travel.
- Fill the frame. Hero text: 60-80% of frame width.
- Anchor to edges. Pin content to left/top or right/bottom. Centered-and-floating is a web layout pattern.
- Split frames. Data panel left, content right. Top bar with metadata, full-width below. Zone-based layouts over centered stacks.
- Structural elements. Rules, dividers, border panels. They create visual paths and animate well (
scaleX: 0→1).