mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
WaterrrForeverandClaude Opus 4.8
d0f0ec29e7
* feat(hyperframes-creative): add frame-preset library Add a library of ready-made visual frame presets (claude, biennale-yellow, blockframe, blue-professional, bold-poster, broadside, capsule, cartesian, cobalt-grid, coral, creative-mode, daisy-days, editorial-forest, …), each with a FRAME.md spec, a frame-showcase.html, and a per-preset caption-skin.html. Registered in the creative design-spec so workflows can remix a preset onto brand tokens. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(hyperframes-media): shared TTS/BGM/SFX audio engine Add a shared audio engine under hyperframes-media (scripts/audio.mjs + lib/ tts.mjs, bgm.mjs, sfx.mjs, heygen.mjs) plus a bundled SFX pack and manifest. Workflows resolve this engine by path (../../hyperframes-media/scripts/ audio.mjs) for text-to-speech, background music, and sound effects, so audio is authored once and reused across skills instead of duplicated per workflow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(skills): gate render on user review; refresh router, core, general-video - hyperframes-cli: render is now user-gated — preview opens Studio (the timeline editor where the user can hand-edit anything, not just watch); never auto-render once checks pass, pause at preview and render only after approval. - hyperframes (router): tighten the entry SKILL.md description + routing. - hyperframes-core: rewrite SKILL.md and add script-format.md + storyboard-format.md references for the script-driven authoring architecture. - general-video: tidy the fallback-workflow description and routing table. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * style(hyperframes-creative): reformat frame-preset showcase HTML Run the HTML formatter over the frame-showcase.html files (indentation, self-closing void tags, one CSS declaration per line). Formatting only — no content or markup changes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(hyperframes-media): correct wait-bgm field mapping and guard credential parse Two correctness fixes from review (#1632): - wait-bgm.mjs read audioMeta.bgm_path / audioMeta.bgm_enabled, but audio.mjs writes the path nested as bgm.path and the flag as bgm_pending. The detached generate path (Lyria/MusicGen) therefore always saw an empty path and exited status: disabled, silently dropping the music track even while generation was running. Read audioMeta.bgm?.path and gate on bgm_pending. - heygenCredential() had an unguarded JSON.parse despite documenting that it never throws — a malformed ~/.heygen credentials file crashed the engine at startup instead of degrading to no-credential. Wrap the parse and return null. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * chore(hyperframes): add router tag to entry skill metadata Fold the router metadata tag into the foundation rewrite of the entry SKILL.md. This file is owned by this PR (the full router rewrite); keeping the tag tweak here — instead of a separate edit on the pre-rewrite version in another PR — avoids a guaranteed merge conflict between the two. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
10 KiB
10 KiB
Design Spec — frame.md / design.md
The single source of truth for what a design spec is, how to find it, and how to read it. Other references defer here for resolution + format; the consumption contract ("brand, not layout") lives in video-composition.md.
What frame.md is
frame.md is the frame-scale design system for a video / hyperframes project — the video-first companion to design.md (which is written for web / static pages). Same file format as design.md; it reframes the brand with the frame as the unit.
A spec is YAML frontmatter + a markdown body, and the two layers are not equal:
- Frontmatter is the normative layer —
colors,typography,spacing,componentsare the real, machine-readable values. Quote them verbatim (exact hex, font family, weight); never invent or round them. - Prose is context — the
##sections (Overview, The Frame, Composition Rules, …) carry intent, when-to-use, and constraints the tokens can't hold. Read them for judgment, not for values.
Resolving which spec to read
Precedence — read the first that exists, ignore the rest:
frame.md → design.md → DESIGN.md
SPEC=$(ls frame.md design.md DESIGN.md 2>/dev/null | head -1)
frame.mdis the preferred spec for video / hyperframes projects and wins when more than one exists.frame.mdis always lowercase — there is noFRAME.mdvariant. (design.mdandDESIGN.mdare genuinely different files on Linux; a frame-preset ships an uppercaseFRAME.mdtemplate, adopted as lowercaseframe.md— see "Starting from a preset" below.)
Load the spec once, in Step 1; every later step (expansion, authoring, adherence) consumes the already-loaded spec rather than re-resolving it.
Starting from a preset (optional)
Optionally seed frame.md from a ready-made frame-preset in [../frame-presets/](../frame-presets/) — a fixed set, each shipping a FRAME.md template a workflow's design step copies in and overlays with brand tokens. Referencing a preset is not required; a bespoke or picker-generated spec is equally valid.
| Preset | Look | Pick when |
|---|---|---|
[biennale-yellow](../frame-presets/biennale-yellow/FRAME.md) |
Literary-editorial catalogue — warm parchment ground, single deep indigo ink, solar yellow as radial bloom / panel / tile underprint, Instrument Serif 400 display (tight, negative-tracked) + Archivo body + JetBrains Mono data, strict rectangles (0 rounded corners), 1px hairline rules as sole border, no shadows | confident / atmospheric / restrained; a product that wants museum-catalogue elegance and editorial authority |
[blockframe](../frame-presets/blockframe/FRAME.md) |
Maximalist neobrutalist — 4px black borders, 8px hard offset shadows, five candy pastels, Inter 800–900 uppercase, square corners, tilted decorations | bold / punchy / playful-loud; a product that wants to feel confident and graphic |
[blue-professional](../frame-presets/blue-professional/FRAME.md) |
Consulting-grade restraint — warm cream canvas, single saturated cobalt (#1e2bfa) accent only, Space Grotesk + Inter typography, soft tinted cards (4% fill / 20% border / 10–14px radius) with NO shadows, pill chrome (100px), 3-step gray text ladder, cobalt progress bar | measured / executive-readable / premium-signal; a product that wants investment-research rigor and refined restraint |
[bold-poster](../frame-presets/bold-poster/FRAME.md) |
Populist editorial poster — Shrikhand display tilted −6°..+2°, Libre Baskerville serif body, Space Grotesk mono chrome, four colors only (white / brown-black ink / tomato red / off-white), double-border grids (3px+1.5px), red leftbar cards, red em-dash bullets, stacked text-shadow on red display, square corners | powerful / printed / restrained; a product that wants editorial authority and vintage gravitas |
[broadside](../frame-presets/broadside/FRAME.md) |
Protest-poster system — two-register flat plane (ink-black / fire-orange), massive lowercase Barlow 900 treated as graphic primitive, IBM Plex Mono chrome (uppercase, 0.14em), fire-orange sole accent, 1px hairlines, sharp corners, no shadow | bold / typographic / declarative; a product that wants presence and authority |
[capsule](../frame-presets/capsule/FRAME.md) |
Playful editorial — every container a pill (2px ink outline), cream canvas, nine candy accents, Bodoni Moda + Space Grotesk, soft offset shadows, floating-pill wallpaper | friendly / soft / editorial; a product that wants warmth and approachability |
[cartesian](../frame-presets/cartesian/FRAME.md) |
Museum-catalog editorial — 1px taupe hairline grid, five warm-stone palette (#EDE8E0 / #E2DBD1 / #1A1A1A / #5A5A5A / #8A8178), Playfair Display 400 + Inter, sharp corners, compass-drafted geometric rings, zero shadow / zero fill | sparse / literary / restrained; a product that wants quiet authority and editorial rigor |
[claude](../frame-presets/claude/FRAME.md) |
Warm-editorial brand book — warm cream paper (never pure white), terracotta coral (#CC785C) as scarce voltage, hairline ink elevation (no heavy shadow), EB Garamond serif display + Inter body + JetBrains Mono index / code on a warm-navy code surface, sentence-case display, ✱ coral spike | considered / literary / developer-facing; a code change, launch, or doc that wants editorial calm and a first-class code surface |
[cobalt-grid](../frame-presets/cobalt-grid/FRAME.md) |
Modernist two-color risograph — cream paper, electric cobalt ink, permanent graph-paper grid (10% cobalt), top/bottom cobalt hairlines, Newsreader 400 serif + Hanken Grotesk + DM Mono, 0° corners, pixel-glitch column + QR-block patches | restrained / systemic / editorial; a product that wants clarity and measured authority |
[coral](../frame-presets/coral/FRAME.md) |
Bold editorial magazine — three solid surfaces (coral fire / ink black / warm cream) meeting at hard edges, 45° diagonal hatch on coral, Bebas Neue + Inter tracked caps, zero shadows/radius (circles 50%), oversized wallpaper numerals and giant marks | bold / structuralist / editorial; a product that wants graphic confidence and hard-edged confidence |
[creative-mode](../frame-presets/creative-mode/FRAME.md) |
Neo-brutalist editorial — cream canvas, 4px ink borders, hard offset shadows (no blur), four accents rationed two-to-three, Archivo Black uppercase at 0.92 line-height, JetBrains Mono taxonomy, Space Grotesk body, square corners save one pill chip | sparse / graphic / punchy-restrained; a product that wants editorial presence and geometric confidence |
[daisy-days](../frame-presets/daisy-days/FRAME.md) |
Cheerful picture-book — 3px charcoal outlines, 6/4px hard offset shadows (no blur), nine sunny-garden pastels (cream + turquoise/soft-pink/butter/mint/lavender/peach/sky + coral accent), Fredoka One + Quicksand, generous radii (20–50px), hand-drawn SVG ornament layer (daisies/stars/suns/clouds/rainbows) | playful / childlike / sticker-sheet kawaii; a product that wants warmth and whimsy |
[editorial-forest](../frame-presets/editorial-forest/FRAME.md) |
Serif-led literary-editorial — green / pink / cream editorial triad, Source Serif 4 weight 500 (opsz) for display + JetBrains Mono 500 uppercase chrome, flat paper depth (no shadows), 2px hairline rules, 6/8px card radii, monogram circle stamp | spacious / restrained / editorial; a product that wants quiet confidence and literary tone |
Each preset folder also ships a frame-showcase.html — a preview contact sheet of its frame treatments; open it to see the look, never include it in a project.
Consuming it
How to apply the spec to a frame — strict on brand (hex, fonts, weight relationships, Do's / Don'ts), free on layout — is the consumption contract in [video-composition.md](video-composition.md) ("The Design Spec Is Brand, Not Layout"). Read it before choosing colors or writing HTML; this doc only covers finding and parsing the spec.