Vance Ingalls
22f0e6a5cd
## What Major skill infrastructure update: design.md support, shared video-composition references, and creative direction patterns extracted from website-to-hyperframes into the base hyperframes skill. ## Changes ### design.md Integration (lightweight) - Step 0a reads any format design.md (YAML, prose, tables) — no format mandate - Brand colors/fonts are strict; video layout adapts per video-composition.md - Font warning gate: warns user if design.md names fonts without local .woff2 files - Design picker generates spec-compliant design.md with YAML frontmatter + prose - Picker generates contextual options from user's prompt (3-4 architectures, 5-6 palettes, 3 type pairings) ### Shared Video References (extracted from website-to-hyperframes) - `video-composition.md` — density, scale, color presence, frame composition rules. Light canvas guidance (don't override user palette). **Always read.** - `beat-direction.md` — per-beat planning (concept → mood → choreography verbs → transition), rhythm templates by video type - `techniques.md` — 11 visual techniques with code patterns (SVG drawing, Canvas 2D, kinetic type, Lottie, etc.) - `narration.md` — pacing, tone, script structure, number pronunciation, hooks - `motion-principles.md` — gained image motion treatment + load-bearing GSAP rules ### Claude Design Transfer Brief (6 gaps applied) 1. Discovery step for exploratory requests (audience, platform, priority, variations) 2. Anti-scope-creep: "build what was asked, every element earns its place" 3. Read-source discipline: "read actual files, don't guess" 4. Rhythm planning: declare scene rhythm before implementing 5. Variations as first-class output for exploratory requests 6. Two-phase verification: fast checks block, slow checks parallel ### Prompt Expansion Updated - Uses beat-direction format (concept → mood → verbs → depth layers) - Rhythm declaration before scene breakdown - References video-composition.md and beat-direction.md ### Key Design Decision **design.md = brand truth, not video layout spec.** Background color is strict from design.md (don't switch light to dark). Video-composition rules teach how to make any palette work cinematically. ## Files Changed (16) **New shared references:** - `skills/hyperframes/references/video-composition.md` - `skills/hyperframes/references/beat-direction.md` - `skills/hyperframes/references/techniques.md` - `skills/hyperframes/references/narration.md` **Updated:** - `skills/hyperframes/SKILL.md` — discovery, anti-scope-creep, rhythm, variations, two-phase verify, new references - `skills/hyperframes/references/prompt-expansion.md` — beat-direction format - `skills/hyperframes/references/motion-principles.md` — image treatment + GSAP rules - `skills/hyperframes/references/design-picker.md` — contextual generation - `skills/hyperframes/visual-styles.md` — YAML token blocks per preset - `skills/hyperframes/house-style.md` — design.md precedence - `skills/hyperframes/templates/design-picker.html` — spec-compliant output - `skills/website-to-hyperframes/references/*` — now reference shared files ## Test plan - [x] Design picker generates and serves correctly - [x] Picker output is spec-compliant design.md - [x] Composition built from picker design.md renders in Studio - [x] Before/after eval: 4 topics × 2 versions showing skill guidance impact - [x] Light canvas compositions respect user palette (don't switch to dark) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
3.6 KiB
Video Composition
Video frames are not web pages. These rules apply to every composition regardless of brand, style, or design.md.
design.md Is Brand, Not Layout
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 design.md: 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).