From 18af61f803ac674b2fa1e208d60d73513fbf79fe Mon Sep 17 00:00:00 2001
From: Florentine Flach <florentineflach@MacBook-Pro-4.local>
Date: Tue, 16 Jun 2026 18:30:28 +0200
Subject: [PATCH 1/2] feat(outro): add parameterized outro system for
 @derblasseschimmer Reels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduces a one-command editorial outro pipeline that produces consistent,
brand-accurate results without manual iteration. Eliminates ~40 min of
per-Reel trial-and-error by automating luminance detection, color selection,
and HyperFrames rendering.

New files:
- helpers/make_outro.py — 7-step wrapper: frame extract → ffprobe luminance
  → config inject → HyperFrames PNG-sequence render → still composite
  (no zoompan) → final MP4 assembly with 30ms audio fade → verify frames
- helpers/check_luminance.py — standalone luminance checker for manual use
- templates/outro/outro_template.html — parametrized GSAP template; reads
  window.__OUTRO_CONFIG__, auto-selects text/veil colors from luminance
  (HELL >65 → espresso on cream; DUNKEL <40 → alabaster on espresso; mid → white)

SKILL.md: three new anti-patterns derived from this session:
- zoompan on static stills → integer stepping = stutter; use static still + GSAP veil
- Never design overlay colors without measuring luminance first
- Veil easing must be power2.out (never power2.in — starts too slowly)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 SKILL.md                            |   3 +
 helpers/check_luminance.py          | 104 ++++++++++++
 helpers/make_outro.py               | 252 ++++++++++++++++++++++++++++
 templates/outro/outro_template.html | 198 ++++++++++++++++++++++
 4 files changed, 557 insertions(+)
 create mode 100644 helpers/check_luminance.py
 create mode 100644 helpers/make_outro.py
 create mode 100644 templates/outro/outro_template.html

diff --git a/SKILL.md b/SKILL.md
index fa4b776d..605ae03f 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -320,3 +320,6 @@ Things that consistently fail regardless of style:
 - **Editing before confirming the strategy.** Never.
 - **Re-transcribing cached sources.** Immutable outputs of immutable inputs.
 - **Assuming what kind of video it is.** Look first, ask second, edit last.
+- **`zoompan` für statische Outro-Hintergründe.** Ganzzahl-Stepping verursacht sichtbares Ruckeln. Statisches Still verwenden — Bewegung kommt vom GSAP-Veil in HyperFrames.
+- **Overlay-Design ohne vorherige Luminanzmessung.** Nie raten. Immer `ffprobe signalstats` oder `check_luminance.py` vor dem ersten Farbentscheid ausführen. Konsequenz: cremefarbener Text auf hellem Footage (unsichtbar).
+- **Veil-Animation mit `power2.in`.** Startet träge — "langweilig fürs Auge". Immer `power2.out` für den Cream-Veil (sofort merklich hell, dann sanft auslaufen). Dauer 3.5s, nicht 7s.
diff --git a/helpers/check_luminance.py b/helpers/check_luminance.py
new file mode 100644
index 00000000..7efbbf3e
--- /dev/null
+++ b/helpers/check_luminance.py
@@ -0,0 +1,104 @@
+#!/usr/bin/env python3
+"""
+check_luminance.py — measure average luminance of a video frame or image.
+
+Usage:
+    uv run python helpers/check_luminance.py <file>
+    uv run python helpers/check_luminance.py <video> --time 39.16
+
+Returns:
+    Luminance value (0–100) and recommended text/veil strategy.
+"""
+import argparse
+import subprocess
+import sys
+import json
+import tempfile
+import os
+
+
+def measure_luminance(image_path: str) -> float:
+    """Measure average Y (luma) of an image via ffprobe signalstats."""
+    cmd = [
+        "ffprobe", "-v", "quiet",
+        "-f", "lavfi",
+        "-i", f"movie={image_path},signalstats",
+        "-show_entries", "frame_tags=lavfi.signalstats.YAVG",
+        "-of", "json"
+    ]
+    result = subprocess.run(cmd, capture_output=True, text=True)
+    data = json.loads(result.stdout)
+    frames = data.get("frames", [])
+    if not frames:
+        raise RuntimeError(f"Could not read luminance from {image_path}")
+    yavg = float(frames[0]["tags"]["lavfi.signalstats.YAVG"])
+    # ffprobe returns Y in 0-255 range for 8-bit; normalize to 0-100
+    return round(yavg / 255 * 100, 1)
+
+
+def extract_frame(video_path: str, time: float, out_path: str):
+    subprocess.run([
+        "ffmpeg", "-y", "-ss", str(time), "-i", video_path,
+        "-frames:v", "1", "-update", "1", "-q:v", "2", out_path
+    ], capture_output=True, check=True)
+
+
+def strategy(L: float) -> dict:
+    if L > 65:
+        return {
+            "text_color": "rgba(30,30,30,0.92)",
+            "text_shadow": "0px 1px 8px rgba(255,255,255,0.6), 0px 0px 20px rgba(255,255,255,0.3)",
+            "veil_color": "#FAF6F0",
+            "label": "HELL → dunkle Schrift + cremefarbener Veil",
+        }
+    elif L < 40:
+        return {
+            "text_color": "#FAF6F0",
+            "text_shadow": "0 2px 30px rgba(44,37,35,0.35), 0 1px 4px rgba(44,37,35,0.25)",
+            "veil_color": "#2C2523",
+            "label": "DUNKEL → helle Schrift + Espresso-Veil",
+        }
+    else:
+        return {
+            "text_color": "#FFFFFF",
+            "text_shadow": "0 2px 14px rgba(44,37,35,0.45), 0 1px 4px rgba(44,37,35,0.25)",
+            "veil_color": "#2C2523",
+            "label": "MITTEL → weiße Schrift + dunkler Veil",
+        }
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Measure frame luminance and recommend text strategy.")
+    parser.add_argument("file", help="Image (.jpg/.png) or video file")
+    parser.add_argument("--time", type=float, default=None,
+                        help="Timestamp (seconds) to sample from video")
+    parser.add_argument("--json", action="store_true", help="Output JSON only")
+    args = parser.parse_args()
+
+    file = args.file
+    tmp = None
+
+    if args.time is not None:
+        tmp = tempfile.mktemp(suffix=".jpg")
+        extract_frame(file, args.time, tmp)
+        file = tmp
+
+    try:
+        L = measure_luminance(file)
+        s = strategy(L)
+
+        if args.json:
+            print(json.dumps({"luminance": L, **s}))
+        else:
+            print(f"\nLuminanz:     {L:.1f} / 100")
+            print(f"Strategie:    {s['label']}")
+            print(f"Textfarbe:    {s['text_color']}")
+            print(f"Veil-Farbe:   {s['veil_color']}")
+            print(f"Text-Shadow:  {s['text_shadow']}\n")
+    finally:
+        if tmp and os.path.exists(tmp):
+            os.unlink(tmp)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/helpers/make_outro.py b/helpers/make_outro.py
new file mode 100644
index 00000000..e1f8ebc4
--- /dev/null
+++ b/helpers/make_outro.py
@@ -0,0 +1,252 @@
+#!/usr/bin/env python3
+"""
+make_outro.py — one-command editorial outro for @derblasseschimmer Reels.
+
+Usage:
+    uv run python helpers/make_outro.py \
+        --source  "Reel.mp4"           \
+        --cutpoint 39.16               \
+        --content  outro_content.json  \
+        --out      "edit/Reel - neues Outro.mp4"
+
+Content JSON schema:
+    {
+      "stage1": {
+        "kicker":  "ZUM MERKEN",
+        "context": "Merk Dir das für Deine",
+        "hero":    "Wunschliste"
+      },
+      "stage2": {
+        "kicker":  "BALD BEI MIR",
+        "context": "Drei neue Skin Tint Balms",
+        "hero":    "im direkten / Vergleich",   ← '/' becomes <br>
+        "handle":  "@derblasseschimmer"
+      },
+      "veil_opacity": 0.88,    ← optional, default 0.88
+      "outro_duration": 7.0    ← optional, default 7.0
+    }
+
+Hard rules enforced automatically:
+    - Luminance measured from cutpoint frame → text/veil colors chosen
+    - No zoompan (causes stuttering — static still only)
+    - 30ms audio fades at cut boundary
+    - HyperFrames PNG-sequence for frame-perfect overlay
+    - 3 verification frames extracted after render
+"""
+
+import argparse
+import json
+import os
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+from pathlib import Path
+
+
+SKILL_DIR = Path(__file__).parent.parent
+TEMPLATE   = SKILL_DIR / "templates" / "outro" / "outro_template.html"
+HYPERFRAMES_INIT = ["npx", "--yes", "hyperframes", "init", ".",
+                    "--example", "blank", "--non-interactive", "--skip-skills"]
+
+
+# ── helpers ──────────────────────────────────────────────────────────────────
+
+def run(cmd, **kw):
+    print(f"  $ {' '.join(str(c) for c in cmd)}")
+    result = subprocess.run(cmd, check=True, **kw)
+    return result
+
+
+def measure_luminance(frame_path: str) -> float:
+    cmd = [
+        "ffprobe", "-v", "quiet",
+        "-f", "lavfi", f"-i", f"movie={frame_path},signalstats",
+        "-show_entries", "frame_tags=lavfi.signalstats.YAVG",
+        "-of", "json"
+    ]
+    out = subprocess.run(cmd, capture_output=True, text=True, check=True).stdout
+    frames = json.loads(out).get("frames", [])
+    if not frames:
+        raise RuntimeError("signalstats returned no frames")
+    return round(float(frames[0]["tags"]["lavfi.signalstats.YAVG"]) / 255 * 100, 1)
+
+
+def luminance_strategy(L: float) -> dict:
+    if L > 65:
+        return dict(
+            text_color="rgba(30,30,30,0.92)",
+            text_shadow="0px 1px 8px rgba(255,255,255,0.6), 0px 0px 20px rgba(255,255,255,0.3)",
+            veil_color="#FAF6F0",
+            label="HELL"
+        )
+    elif L < 40:
+        return dict(
+            text_color="#FAF6F0",
+            text_shadow="0 2px 30px rgba(44,37,35,0.35), 0 1px 4px rgba(44,37,35,0.25)",
+            veil_color="#2C2523",
+            label="DUNKEL"
+        )
+    else:
+        return dict(
+            text_color="#FFFFFF",
+            text_shadow="0 2px 14px rgba(44,37,35,0.45), 0 1px 4px rgba(44,37,35,0.25)",
+            veil_color="#2C2523",
+            label="MITTEL"
+        )
+
+
+def inject_config(template_path: Path, slot_dir: Path, config: dict):
+    """Write outro_template.html into slot/index.html with config injected."""
+    src = template_path.read_text()
+    inject_line = f"window.__OUTRO_CONFIG__ = {json.dumps(config, ensure_ascii=False)};"
+    out = src.replace("// __OUTRO_CONFIG_INJECT__", inject_line)
+    # Fix data-duration to match outro_duration
+    dur = config.get("outro_duration", 7.0)
+    out = re.sub(r'data-duration="\d+[\.\d]*"', f'data-duration="{dur}"', out)
+    (slot_dir / "index.html").write_text(out)
+
+
+def ffmpeg(*args):
+    run(["ffmpeg", "-y", *[str(a) for a in args]])
+
+
+def get_duration(path: str) -> float:
+    out = subprocess.run(
+        ["ffprobe", "-v", "quiet", "-print_format", "json",
+         "-show_format", path],
+        capture_output=True, text=True, check=True
+    ).stdout
+    return float(json.loads(out)["format"]["duration"])
+
+
+# ── main ─────────────────────────────────────────────────────────────────────
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--source",    required=True, help="Source video")
+    parser.add_argument("--cutpoint",  type=float, required=True,
+                        help="Timestamp (s) where outro begins")
+    parser.add_argument("--content",   required=True,
+                        help="JSON file with stage1/stage2 copy")
+    parser.add_argument("--out",       required=True, help="Output MP4 path")
+    parser.add_argument("--slot-dir",  default=None,
+                        help="Animation slot dir (default: <out_dir>/animations/slot_outro)")
+    args = parser.parse_args()
+
+    source    = Path(args.source).resolve()
+    out_path  = Path(args.out).resolve()
+    out_dir   = out_path.parent
+    out_dir.mkdir(parents=True, exist_ok=True)
+
+    with open(args.content) as f:
+        content = json.load(f)
+
+    outro_duration = content.get("outro_duration", 7.0)
+    veil_opacity   = content.get("veil_opacity",   0.88)
+
+    slot_dir = Path(args.slot_dir) if args.slot_dir else \
+               out_dir / "animations" / "slot_outro"
+    slot_dir.mkdir(parents=True, exist_ok=True)
+
+    # ── Step 1: extract frame at cutpoint ────────────────────────────────────
+    print(f"\n[1/7] Frame bei {args.cutpoint}s extrahieren …")
+    bg_frame = slot_dir / "bg_still.png"
+    ffmpeg("-ss", args.cutpoint, "-i", source,
+           "-frames:v", "1", "-update", "1", str(bg_frame))
+
+    # ── Step 2: measure luminance ─────────────────────────────────────────────
+    print("\n[2/7] Luminanz messen …")
+    L = measure_luminance(str(bg_frame))
+    strat = luminance_strategy(L)
+    print(f"  Luminanz: {L:.1f}/100 → {strat['label']} "
+          f"(Veil: {strat['veil_color']}, Text: {strat['text_color']})")
+
+    # ── Step 3: inject config into template ───────────────────────────────────
+    print("\n[3/7] Template mit Config befüllen …")
+    config = {
+        **content,
+        "background_luminance": L,
+        "veil_opacity": veil_opacity,
+        "outro_duration": outro_duration,
+    }
+
+    # Init HyperFrames slot if not already done
+    hf_marker = slot_dir / "hyperframes.json"
+    if not hf_marker.exists():
+        run(HYPERFRAMES_INIT, cwd=slot_dir)
+
+    inject_config(TEMPLATE, slot_dir, config)
+
+    # ── Step 4: render HyperFrames PNG sequence ───────────────────────────────
+    print("\n[4/7] HyperFrames PNG-Sequence rendern …")
+    frames_dir = slot_dir / "frames"
+    if frames_dir.exists():
+        shutil.rmtree(frames_dir)
+    run(["npx", "--yes", "hyperframes", "render", ".",
+         "--format", "png-sequence", "-o", "frames"],
+        cwd=slot_dir)
+
+    # ── Step 5: composite still + overlay ────────────────────────────────────
+    print("\n[5/7] Still + Overlay compositen …")
+    outro_clip = slot_dir / "outro_composite.mp4"
+    fps = 30
+    n_frames = fps * outro_duration
+    ffmpeg(
+        "-loop", "1", "-framerate", fps, "-t", outro_duration, "-i", bg_frame,
+        "-framerate", fps, "-i", str(slot_dir / "frames" / "frame_%06d.png"),
+        "-filter_complex",
+        "[0:v]scale=1080:1920,format=yuva420p[bg];"
+        "[1:v]format=yuva420p[ov];"
+        "[bg][ov]overlay=format=auto,format=yuv420p[out]",
+        "-map", "[out]",
+        "-t", outro_duration, "-r", "25",
+        "-c:v", "libx264", "-pix_fmt", "yuv420p", "-crf", "16", "-preset", "slow",
+        outro_clip
+    )
+
+    # ── Step 6: assemble final video ──────────────────────────────────────────
+    print("\n[6/7] Final Video zusammenbauen …")
+    src_duration   = get_duration(str(source))
+    total_duration = args.cutpoint + outro_duration
+    fade_start     = total_duration - 0.66
+
+    ffmpeg(
+        "-i", source, "-i", outro_clip,
+        "-filter_complex",
+        f"[0:v]trim=0:{args.cutpoint},setpts=PTS-STARTPTS[mv];"
+        f"[mv][1:v]concat=n=2:v=1:a=0[v];"
+        f"[0:a]apad=whole_dur={total_duration}[a];"
+        f"[a]afade=t=out:st={fade_start:.3f}:d=0.66[aout]",
+        "-map", "[v]", "-map", "[aout]",
+        "-c:v", "libx264", "-pix_fmt", "yuv420p", "-crf", "16", "-preset", "slow", "-r", "25",
+        "-c:a", "aac", "-b:a", "192k",
+        "-t", total_duration,
+        out_path
+    )
+
+    # ── Step 7: verify ────────────────────────────────────────────────────────
+    print("\n[7/7] Verifikation …")
+    verify_dir = out_dir / "verify"
+    verify_dir.mkdir(exist_ok=True)
+
+    checkpoints = [
+        args.cutpoint + 0.3,                   # outro-start
+        args.cutpoint + outro_duration * 0.45, # stage 1 peak
+        args.cutpoint + outro_duration * 0.90, # stage 2 peak
+    ]
+    for t in checkpoints:
+        out_frame = verify_dir / f"outro_{t:.1f}s.jpg"
+        ffmpeg("-ss", f"{t:.3f}", "-i", out_path,
+               "-frames:v", "1", "-update", "1", "-q:v", "2", out_frame)
+        print(f"  ✓ verify frame @ {t:.1f}s → {out_frame.name}")
+
+    final_dur = get_duration(str(out_path))
+    print(f"\n✅ Fertig: {out_path}")
+    print(f"   Dauer: {final_dur:.2f}s | Luminanz: {L:.1f} ({strat['label']})")
+    print(f"   Verifikations-Frames: {verify_dir}/\n")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/templates/outro/outro_template.html b/templates/outro/outro_template.html
new file mode 100644
index 00000000..c6b7ca93
--- /dev/null
+++ b/templates/outro/outro_template.html
@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1080, height=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        width: 1080px; height: 1920px;
+        overflow: hidden; background: transparent;
+      }
+
+      /* Filled at render time by make_outro.py via __OUTRO_CONFIG__ */
+      :root {
+        --text-color: #FAF6F0;
+        --text-shadow: 0 2px 30px rgba(44,37,35,0.35), 0 1px 4px rgba(44,37,35,0.25);
+        --veil-color: #FAF6F0;
+        --accent: #C19A83;
+        --kicker-opacity: 0.65;
+        --handle-opacity: 0.60;
+      }
+
+      .veil {
+        position: absolute; inset: 0;
+        background: var(--veil-color);
+        opacity: 0; pointer-events: none;
+      }
+
+      .stage {
+        position: absolute; left: 96px; opacity: 0;
+      }
+      .text-halo { text-shadow: var(--text-shadow); }
+
+      .kicker-row {
+        display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
+      }
+      .icon { width: 28px; height: 28px; flex-shrink: 0; }
+      .icon svg { width: 100%; height: 100%; }
+
+      .kicker {
+        font-family: 'Poppins', sans-serif; font-weight: 400;
+        font-size: 30px; letter-spacing: 0.08em; text-transform: uppercase;
+        color: color-mix(in srgb, var(--text-color) calc(var(--kicker-opacity) * 100%), transparent);
+      }
+
+      .hairline {
+        width: 0; height: 1.5px;
+        background: var(--accent); margin-bottom: 20px;
+      }
+
+      .context-line {
+        font-family: 'Cormorant Garamond', serif; font-weight: 500;
+        font-size: 64px; line-height: 1.15; color: var(--text-color);
+      }
+
+      .hero-word {
+        font-family: 'Cormorant Garamond', serif; font-style: italic;
+        font-weight: 600; font-size: 146px; line-height: 0.95;
+        color: var(--text-color); margin-top: 0;
+      }
+
+      .handle-row {
+        display: flex; align-items: center; gap: 12px; margin-top: 32px;
+      }
+      .handle {
+        font-family: 'Poppins', sans-serif; font-weight: 400;
+        font-size: 34px; letter-spacing: 0.03em;
+        color: color-mix(in srgb, var(--text-color) calc(var(--handle-opacity) * 100%), transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0"
+         data-duration="7" data-width="1080" data-height="1920">
+
+      <div id="veil" class="veil"></div>
+
+      <!-- STAGE 1 -->
+      <div id="stage1" class="stage" style="top: 1050px;">
+        <div class="kicker-row text-halo">
+          <span class="kicker" id="s1-kicker"></span>
+          <div class="icon" id="s1-icon">
+            <!-- bookmark icon — replaced for stage2 -->
+            <svg viewBox="0 0 24 24" fill="none">
+              <path d="M5 5C5 3.9 5.9 3 7 3h10c1.1 0 2 .9 2 2v16l-7-3.5L5 21V5Z"
+                    stroke="var(--accent)" stroke-width="1.5"
+                    stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </div>
+        <div class="hairline" id="s1-hairline"></div>
+        <div class="context-line text-halo" id="s1-context"></div>
+        <div class="hero-word text-halo" id="s1-hero"></div>
+      </div>
+
+      <!-- STAGE 2 -->
+      <div id="stage2" class="stage" style="top: 1020px;">
+        <div class="kicker-row text-halo">
+          <span class="kicker" id="s2-kicker"></span>
+        </div>
+        <div class="hairline" id="s2-hairline"></div>
+        <div class="context-line text-halo" id="s2-context"></div>
+        <div class="hero-word text-halo" id="s2-hero" style="font-size: 132px;"></div>
+        <div class="handle-row text-halo" id="s2-handle-row">
+          <div class="icon">
+            <svg viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="var(--accent)" stroke-width="1.5"/>
+              <line x1="12" y1="7" x2="12" y2="17" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="7" y1="12" x2="17" y2="12" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <span class="handle" id="s2-handle"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // CONFIG injected by make_outro.py — do not edit this line:
+      // __OUTRO_CONFIG_INJECT__
+
+      const cfg = window.__OUTRO_CONFIG__ || {};
+      const L = cfg.background_luminance ?? 75;
+
+      // Luminance-aware text/veil colors
+      const isDark = L < 40;
+      const isLight = L > 65;
+      const root = document.documentElement;
+
+      if (isLight) {
+        root.style.setProperty('--text-color', 'rgba(30,30,30,0.92)');
+        root.style.setProperty('--text-shadow', '0px 1px 8px rgba(255,255,255,0.6), 0px 0px 20px rgba(255,255,255,0.3)');
+        root.style.setProperty('--veil-color', '#FAF6F0');
+        root.style.setProperty('--kicker-opacity', '0.65');
+        root.style.setProperty('--handle-opacity', '0.55');
+      } else if (isDark) {
+        root.style.setProperty('--text-color', '#FAF6F0');
+        root.style.setProperty('--text-shadow', '0 2px 30px rgba(44,37,35,0.35), 0 1px 4px rgba(44,37,35,0.25)');
+        root.style.setProperty('--veil-color', '#2C2523');
+        root.style.setProperty('--kicker-opacity', '0.70');
+        root.style.setProperty('--handle-opacity', '0.60');
+      } else {
+        // mid-tone: white text, dark scrim
+        root.style.setProperty('--text-color', '#FFFFFF');
+        root.style.setProperty('--text-shadow', '0 2px 14px rgba(44,37,35,0.45), 0 1px 4px rgba(44,37,35,0.25)');
+        root.style.setProperty('--veil-color', '#2C2523');
+        root.style.setProperty('--kicker-opacity', '0.70');
+        root.style.setProperty('--handle-opacity', '0.60');
+      }
+
+      // Populate content
+      const s1 = cfg.stage1 || {};
+      const s2 = cfg.stage2 || {};
+      document.getElementById('s1-kicker').textContent  = s1.kicker  || '';
+      document.getElementById('s1-context').textContent = s1.context || '';
+      document.getElementById('s1-hero').textContent    = s1.hero    || '';
+      document.getElementById('s2-kicker').textContent  = s2.kicker  || '';
+      document.getElementById('s2-context').textContent = s2.context || '';
+      document.getElementById('s2-hero').innerHTML      = (s2.hero || '').replace(' / ', '<br>');
+      document.getElementById('s2-handle').textContent  = s2.handle  || '';
+
+      // Hide handle row if no handle provided
+      if (!s2.handle) document.getElementById('s2-handle-row').style.display = 'none';
+
+      // === ANIMATION ===
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      const veilOpacity = cfg.veil_opacity ?? 0.88;
+      const eR = 'power3.out', eH = 'power2.out';
+
+      // Veil: fast rise (power2.out → sofort merklich), holds for rest
+      tl.to('#veil', { opacity: veilOpacity, duration: 3.5, ease: 'power2.out' }, 0);
+
+      // STAGE 1 (0.3 – 3.2s)
+      tl.set('#stage1', { opacity: 1 }, 0.3);
+      tl.fromTo('#s1-hairline', { width: 0 }, { width: 120, duration: 0.6, ease: eR }, 0.3);
+      tl.fromTo('#s1-kicker',   { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.7, ease: eR }, 0.45);
+      tl.fromTo('#s1-icon',     { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.7, ease: eR }, 0.45);
+      tl.fromTo('#s1-context',  { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.7, ease: eR }, 0.6);
+      tl.fromTo('#s1-hero',     { opacity: 0, scale: 0.96, y: 14 }, { opacity: 1, scale: 1, y: 0, duration: 0.9, ease: eH }, 0.75);
+      tl.to('#stage1', { opacity: 0, duration: 0.5, ease: 'power2.inOut' }, 3.2);
+
+      // STAGE 2 (3.6 – 7.0s)
+      tl.set('#stage2', { opacity: 1 }, 3.6);
+      tl.fromTo('#s2-hairline', { width: 0 }, { width: 120, duration: 0.6, ease: eR }, 3.6);
+      tl.fromTo('#s2-kicker',   { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.7, ease: eR }, 3.75);
+      tl.fromTo('#s2-context',  { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.7, ease: eR }, 3.9);
+      tl.fromTo('#s2-hero',     { opacity: 0, scale: 0.96, y: 14 }, { opacity: 1, scale: 1, y: 0, duration: 0.9, ease: eH }, 4.05);
+      tl.fromTo('#s2-handle-row', { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.6, ease: eR }, 4.4);
+
+      window.__timelines['main'] = tl;
+    </script>
+  </body>
+</html>

From 265a79bbb0418af263bdc80f9a4141f0696f948e Mon Sep 17 00:00:00 2001
From: Florentine Flach <florentineflach@MacBook-Pro-4.local>
Date: Tue, 16 Jun 2026 19:33:52 +0200
Subject: [PATCH 2/2] fix(outro): address 4 review issues in make_outro and
 check_luminance

make_outro.py:
- Audio now trimmed at cutpoint with 30ms fade at the cut boundary;
  outro is silent (padded with silence), matching the hard rule
- Added has_audio() guard so videos without an audio stream no longer
  crash during filter graph resolution

check_luminance.py:
- Added check=True to ffprobe call so failures raise CalledProcessError
  instead of crashing with JSONDecodeError
- Replaced deprecated tempfile.mktemp() with NamedTemporaryFile to
  eliminate TOCTOU race condition

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 helpers/check_luminance.py |  5 +++--
 helpers/make_outro.py      | 35 +++++++++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/helpers/check_luminance.py b/helpers/check_luminance.py
index 7efbbf3e..5a2a1e0b 100644
--- a/helpers/check_luminance.py
+++ b/helpers/check_luminance.py
@@ -26,7 +26,7 @@ def measure_luminance(image_path: str) -> float:
         "-show_entries", "frame_tags=lavfi.signalstats.YAVG",
         "-of", "json"
     ]
-    result = subprocess.run(cmd, capture_output=True, text=True)
+    result = subprocess.run(cmd, capture_output=True, text=True, check=True)
     data = json.loads(result.stdout)
     frames = data.get("frames", [])
     if not frames:
@@ -79,7 +79,8 @@ def main():
     tmp = None
 
     if args.time is not None:
-        tmp = tempfile.mktemp(suffix=".jpg")
+        with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as tf:
+            tmp = tf.name
         extract_frame(file, args.time, tmp)
         file = tmp
 
diff --git a/helpers/make_outro.py b/helpers/make_outro.py
index e1f8ebc4..b15d1118 100644
--- a/helpers/make_outro.py
+++ b/helpers/make_outro.py
@@ -112,6 +112,15 @@ def ffmpeg(*args):
     run(["ffmpeg", "-y", *[str(a) for a in args]])
 
 
+def has_audio(path: str) -> bool:
+    out = subprocess.run(
+        ["ffprobe", "-v", "quiet", "-print_format", "json",
+         "-show_streams", "-select_streams", "a", str(path)],
+        capture_output=True, text=True, check=True
+    ).stdout
+    return bool(json.loads(out).get("streams"))
+
+
 def get_duration(path: str) -> float:
     out = subprocess.run(
         ["ffprobe", "-v", "quiet", "-print_format", "json",
@@ -208,20 +217,34 @@ def main():
 
     # ── Step 6: assemble final video ──────────────────────────────────────────
     print("\n[6/7] Final Video zusammenbauen …")
-    src_duration   = get_duration(str(source))
     total_duration = args.cutpoint + outro_duration
-    fade_start     = total_duration - 0.66
+    audio_fade_st  = max(0.0, args.cutpoint - 0.03)
+
+    source_has_audio = has_audio(str(source))
+
+    if source_has_audio:
+        # Trim audio at cutpoint, 30ms fade at cut boundary, pad silence for outro
+        audio_filter = (
+            f"[0:a]atrim=0:{args.cutpoint},asetpts=PTS-STARTPTS,"
+            f"afade=t=out:st={audio_fade_st:.3f}:d=0.03,"
+            f"apad=whole_dur={total_duration}[aout]"
+        )
+        a_map   = ["-map", "[aout]"]
+        a_codec = ["-c:a", "aac", "-b:a", "192k"]
+    else:
+        audio_filter = f"aevalsrc=0:d={total_duration}[aout]"
+        a_map   = ["-map", "[aout]"]
+        a_codec = ["-c:a", "aac", "-b:a", "192k"]
 
     ffmpeg(
         "-i", source, "-i", outro_clip,
         "-filter_complex",
         f"[0:v]trim=0:{args.cutpoint},setpts=PTS-STARTPTS[mv];"
         f"[mv][1:v]concat=n=2:v=1:a=0[v];"
-        f"[0:a]apad=whole_dur={total_duration}[a];"
-        f"[a]afade=t=out:st={fade_start:.3f}:d=0.66[aout]",
-        "-map", "[v]", "-map", "[aout]",
+        + audio_filter,
+        "-map", "[v]", *a_map,
         "-c:v", "libx264", "-pix_fmt", "yuv420p", "-crf", "16", "-preset", "slow", "-r", "25",
-        "-c:a", "aac", "-b:a", "192k",
+        *a_codec,
         "-t", total_duration,
         out_path
     )