avenox-graphics

Graphics — HyperFrames cutaways → composite

Brand source of truth: brand/frame.md. Define it once, then never deviate inside a job. (Reference implementation: warm paper #f3efe4, ink #1b1712, one golden accent #e8b23a, a serif display face + a grotesk UI face, plus a mascot. Deliberately anti-AI-slop — no neon, no gradient mesh, no glassmorphism, no 3D gloss.)

Pipeline

1. Project: cd "$STUDIO_JOBS/<job>/graphics" && npx hyperframes init gfx (one-time; installs a headless chromium — slow first run, background it).
2. One composition per beat = a standalone <name>.html. Reuse the brand template below. Each is full-screen 1920×1080 — a cutaway (opaque, replaces footage) or a transparent overlay.
3. Render serially (render reads index.html):

   for f in *.html; do
     n="${f%.html}"; [ "$n" = index ] && continue
     cp "$f" index.html
     npx hyperframes render -f 60 --resolution landscape -o "renders/$n.mp4"
   done
   

4. Composite all cutaways onto the cut via ffmpeg, each at its timecode.

Composition contract (HyperFrames)

• #root with data-composition-id="main" data-start data-duration data-width data-height.
• Every timed element: class="clip" + data-start data-duration data-track-index.
• ONE paused GSAP timeline registered: window.__timelines["main"] = gsap.timeline({paused:true}). HyperFrames seeks it per frame, so everything must be seek-safe: use fromTo/set, and position every tween on tl.
• Deterministic only — no Date.now(), no Math.random(), no runtime fetch. Web fonts via <link> are fine.
• Render flags: -f 60, --resolution landscape (1920×1080), --format mp4 (use mov/webm for alpha overlays).

Brand template

• Fonts via a single <link> to your webfont provider — renders fine in headless chrome.
• html,body{background:<paper>} + a paper div, radial vignette, and an SVG feTurbulence grain at opacity .05 / mix-blend-mode: multiply. Fix the turbulence seed or the grain is nondeterministic and frames will flicker.
• Kicker (grotesk, tracked caps) → title (serif, heavy) → accent underline (scaleX wipe) → mascot (assets/mascot.png).