fix(v3): burn captions in ffmpeg, denoise voice, jump-cut pauses, title card before footage, fix headline overlap

.github/workflows/render-testimonial.yml

@@ -8,7 +8,7 @@ on:
         required: true
         default: '1f1qlgyLJSCQgpjrWflaqldsNE2fZ-_1X'
       participant_name:
-        description: 'Participant name (lower-third)'
+        description: 'Participant name'
         required: false
         default: 'Peserta Training'
       participant_role:
@@ -16,7 +16,7 @@ on:
         required: false
         default: 'AI Transformation Series 2026'
       pull_quote:
-        description: 'Pull quote (strongest line, Indonesian)'
+        description: 'Pull quote (Indonesian)'
         required: false
         default: 'Training ini langsung bisa dipraktek dan hasilnya nyata'
 
@@ -32,8 +32,9 @@ jobs:
       - name: Install system deps
         run: |
           sudo apt-get update -qq
-          sudo apt-get install -y ffmpeg python3-pip libass-dev
+          sudo apt-get install -y ffmpeg python3-pip libass-dev fonts-liberation
           pip3 install gdown huggingface_hub requests --quiet
+          fc-cache -fv 2>/dev/null || true
 
       - name: Setup Node.js 22
         uses: actions/setup-node@v4
@@ -47,7 +48,7 @@ jobs:
           SHELL_BIN=$(npx --yes @puppeteer/browsers install chrome-headless-shell@stable 2>&1 | tail -1 | awk '{print $NF}')
           [ ! -x "$SHELL_BIN" ] && SHELL_BIN=$(find ~/.cache/puppeteer -name "chrome-headless-shell" -executable 2>/dev/null | head -1)
           echo "HYPERFRAMES_BROWSER_PATH=$SHELL_BIN" >> $GITHUB_ENV
-          echo "Browser: $SHELL_BIN"
+          echo "Browser shell: $SHELL_BIN"
 
       - name: Download testimonial MOV from Google Drive
         run: |
@@ -62,7 +63,7 @@ jobs:
           print(f"Downloaded {os.path.getsize(out)/1024/1024:.1f} MB")
           PYEOF
 
-      - name: Convert + downscale MOV to 720p MP4
+      - name: Convert MOV to 720p source MP4
         run: |
           ffmpeg -y -i assets/raw.MOV \
             -vf "scale=720:1280:force_original_aspect_ratio=increase,crop=720:1280" \
@@ -71,10 +72,9 @@ jobs:
             assets/source.mp4
           echo "Source: $(du -sh assets/source.mp4)"
 
-      - name: Trim pauses and interviewer sections
+      - name: Cut interviewer section (71-77s cluster)
         run: |
-          ffmpeg -y \
-            -i assets/source.mp4 \
+          ffmpeg -y -i assets/source.mp4 \
             -filter_complex "\
               [0:v]trim=0:71,setpts=PTS-STARTPTS[v1];\
               [0:a]atrim=0:71,asetpts=PTS-STARTPTS[a1];\
@@ -84,57 +84,102 @@ jobs:
             -map "[vout]" -map "[aout]" \
             -c:v libx264 -preset fast -crf 22 \
             -c:a aac -b:a 128k -movflags +faststart \
-            assets/trimmed.mp4
+            assets/cut.mp4
+          echo "After cut: $(ffprobe -v quiet -show_entries format=duration \
+            -of default=noprint_wrappers=1:nokey=1 assets/cut.mp4 | cut -d. -f1)s"
+
+      - name: Denoise voice + jump-cut pauses
+        run: |
+          ffmpeg -y -i assets/cut.mp4 \
+            -filter_complex "\
+              [0:a]anlmdn=s=7:p=0.002:r=0.002:m=15[dn];\
+              [dn]silenceremove=start_periods=1:start_silence=0.3:start_threshold=-35dB\
+                :stop_periods=-1:stop_silence=0.05:stop_threshold=-35dB[clean]" \
+            -map "[0:v]" -map "[clean]" \
+            -c:v copy -c:a aac -b:a 128k \
+            assets/denoised.mp4
           DUR=$(ffprobe -v quiet -show_entries format=duration \
-            -of default=noprint_wrappers=1:nokey=1 assets/trimmed.mp4 | cut -d. -f1)
-          echo "VIDEO_DURATION=$DUR" >> $GITHUB_ENV
-          echo "Trimmed: ${DUR}s (was 90s)"
+            -of default=noprint_wrappers=1:nokey=1 assets/denoised.mp4 | xargs printf "%.1f")
+          echo "FOOTAGE_DUR=$DUR" >> $GITHUB_ENV
+          echo "After denoise+jumpcut: ${DUR}s"
 
-      - name: Transcribe and generate SRT captions
+      - name: Transcribe + generate SRT captions
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
         run: |
           mkdir -p project/assets
           python3 scripts/gen_captions.py \
-            --input assets/trimmed.mp4 \
-            --srt-out project/assets/captions.srt
-          head -20 project/assets/captions.srt || true
+            --input assets/denoised.mp4 \
+            --srt-out assets/captions.srt
+          echo "SRT preview:"; head -20 assets/captions.srt || true
 
-      - name: Download CC0 music track
+      - name: Burn captions into video (ffmpeg, before HyperFrames)
         run: |
-          python3 - <<'PYEOF'
-          import urllib.request, os, subprocess
-          try:
-              urllib.request.urlretrieve(
-                  "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Acoustic%20Breeze.mp3",
-                  "project/assets/music.mp3"
-              )
-              size = os.path.getsize("project/assets/music.mp3")
-              if size > 50000:
-                  print(f"Music downloaded: {size/1024:.0f} KB")
-              else:
-                  raise Exception("File too small")
-          except Exception as e:
-              print(f"Music download failed: {e} — generating silence placeholder")
-              subprocess.run(["ffmpeg","-y","-f","lavfi","-i","anullsrc=r=44100:cl=stereo",
-                              "-t","90","-q:a","9","-acodec","libmp3lame",
-                              "project/assets/music.mp3"], capture_output=True)
-              print("Silence placeholder created")
-          PYEOF
+          # Install a system font for subtitle rendering
+          FONT_PATH=$(fc-list | grep -i liberation | grep -i regular | head -1 | cut -d: -f1 || echo "")
+          [ -z "$FONT_PATH" ] && FONT_PATH="/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf"
+          echo "Using font: $FONT_PATH"
+
+          ffmpeg -y -i assets/denoised.mp4 \
+            -vf "subtitles=assets/captions.srt:force_style='FontName=Liberation Sans,FontSize=22,PrimaryColour=&H001a2744,OutlineColour=&H00FFFFFF,Outline=10,Shadow=0,Alignment=2,MarginV=120,Bold=1'" \
+            -c:v libx264 -preset fast -crf 22 \
+            -c:a copy \
+            assets/captioned.mp4
+          echo "Captioned video: $(du -sh assets/captioned.mp4)"
+
+      - name: Mix CC0 background music
+        run: |
+          # Use music.mp3 from repo assets/ if present, else generate tone
+          if [ -f "assets/music.mp3" ]; then
+            echo "Using repo music.mp3"
+            MUSIC="assets/music.mp3"
+          else
+            echo "Generating lo-fi tone placeholder"
+            ffmpeg -y -f lavfi -i \
+              "aevalsrc=0.08*sin(2*PI*220*t)+0.05*sin(2*PI*440*t)+0.03*sin(2*PI*880*t):s=44100" \
+              -af "volume=0.12,lowpass=f=800,highpass=f=80" \
+              -t 120 -q:a 6 assets/music_gen.mp3 2>/dev/null
+            MUSIC="assets/music_gen.mp3"
+          fi
+
+          DUR=$(ffprobe -v quiet -show_entries format=duration \
+            -of default=noprint_wrappers=1:nokey=1 assets/captioned.mp4 | xargs printf "%.1f")
+
+          ffmpeg -y \
+            -i assets/captioned.mp4 \
+            -stream_loop -1 -i "$MUSIC" \
+            -filter_complex "\
+              [1:a]atrim=0:${DUR},asetpts=PTS-STARTPTS,volume=0.10[music];\
+              [0:a][music]amix=inputs=2:duration=first:dropout_transition=2[aout]" \
+            -map "0:v" -map "[aout]" \
+            -c:v copy -c:a aac -b:a 128k \
+            assets/clean.mp4
+          FOOTAGE_DUR=$(ffprobe -v quiet -show_entries format=duration \
+            -of default=noprint_wrappers=1:nokey=1 assets/clean.mp4 | xargs printf "%.0f")
+          TOTAL_DUR=$((FOOTAGE_DUR + 2))
+          echo "FOOTAGE_DUR=$FOOTAGE_DUR" >> $GITHUB_ENV
+          echo "TOTAL_DUR=$TOTAL_DUR" >> $GITHUB_ENV
+          echo "Final clean.mp4: ${FOOTAGE_DUR}s | total with title card: ${TOTAL_DUR}s"
 
       - name: Build project folder
         run: |
-          cp assets/trimmed.mp4 project/assets/testimoni.mp4
+          cp assets/clean.mp4 project/assets/clean.mp4
+          [ -f "assets/music.mp3" ] && cp assets/music.mp3 project/assets/music.mp3 || \
+            cp assets/music_gen.mp3 project/assets/music.mp3
           python3 scripts/patch_composition.py \
-            --input  compositions/testimonial.html \
-            --output project/index.html \
-            --name   "${{ github.event.inputs.participant_name }}" \
-            --role   "${{ github.event.inputs.participant_role }}" \
-            --quote  "${{ github.event.inputs.pull_quote }}" \
-            --duration "$VIDEO_DURATION"
-          ls -lh project/ project/assets/
-
-      - name: Render video (720x1280 @ 24fps)
+            --input       compositions/testimonial.html \
+            --output      project/index.html \
+            --name        "${{ github.event.inputs.participant_name }}" \
+            --role        "${{ github.event.inputs.participant_role }}" \
+            --quote       "${{ github.event.inputs.pull_quote }}" \
+            --footage-dur "$FOOTAGE_DUR" \
+            --total-dur   "$TOTAL_DUR"
+          echo "Project contents:"; ls -lh project/ project/assets/
+
+      - name: Lint composition
+        run: npx hyperframes lint project || true
+
+      - name: Render (720x1280 @ 24fps - Bright Studio v3)
         env:
           HYPERFRAMES_BROWSER_PATH: ${{ env.HYPERFRAMES_BROWSER_PATH }}
         run: |
@@ -143,12 +188,10 @@ jobs:
           OUT="output/bright-studio-${TS}.mp4"
           echo "OUTPUT_FILE=$OUT" >> $GITHUB_ENV
           npx hyperframes render project \
-            --output "$OUT" \
-            --width 720 --height 1280 --fps 24 \
-            --quality standard
+            --output "$OUT" --width 720 --height 1280 --fps 24 --quality standard
           echo "Rendered: $OUT ($(du -sh $OUT | cut -f1))"
 
-      - name: Upload to Hugging Face dataset
+      - name: Upload to Hugging Face
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
           PARTICIPANT_NAME: ${{ github.event.inputs.participant_name }}
@@ -156,15 +199,12 @@ jobs:
           python3 - <<'PYEOF'
           import os
           from huggingface_hub import HfApi
-          api = HfApi(token=os.environ["HF_TOKEN"])
+          api   = HfApi(token=os.environ["HF_TOKEN"])
           out   = os.environ["OUTPUT_FILE"]
           fname = os.path.basename(out)
-          api.upload_file(
-              path_or_fileobj=out,
+          api.upload_file(path_or_fileobj=out,
               path_in_repo=f"renders/{fname}",
-              repo_id="AIgoose/video-renders",
-              repo_type="dataset",
-          )
+              repo_id="AIgoose/video-renders", repo_type="dataset")
           url = f"https://huggingface.co/datasets/AIgoose/video-renders/resolve/main/renders/{fname}"
           print(f"Video ready: {url}")
           print(f"::notice title=Video Ready::{url}")
@@ -173,6 +213,6 @@ jobs:
       - name: Upload artifact (backup)
         uses: actions/upload-artifact@v4
         with:
-          name: bright-studio-mp4
+          name: bright-studio-v3
           path: output/*.mp4
           retention-days: 14

compositions/testimonial.html

@@ -1,220 +1,163 @@
 <!DOCTYPE html>
-<html lang="id">
-<head>
-<meta charset="UTF-8">
+<html lang="id"><head><meta charset="UTF-8">
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
 <style>
 * { margin:0; padding:0; box-sizing:border-box; }
 body { background:#f5f5f0; overflow:hidden; }
-#root {
-  position:relative; width:720px; height:1280px;
-  overflow:hidden; background:#f5f5f0;
-}
+#root { position:relative; width:720px; height:1280px; overflow:hidden; }
 .clip { position:absolute; }
 .sc { inset:0; }
-</style>
-</head>
-<body>
+</style></head><body>
 <div id="root"
-     data-composition-id="bright-studio-testimoni"
-     data-start="0"
-     data-duration="DURATION_PLACEHOLDER"
-     data-width="720"
-     data-height="1280">
-
-  <!-- ============================================================
-       A-ROLL: trimmed footage fills full frame, NO muted
-       Natural bright background preserved — this IS the style
-  ============================================================= -->
-  <video id="aroll" class="clip sc" src="../assets/trimmed.mp4"
-    data-start="0" data-duration="DURATION_PLACEHOLDER" data-track-index="0"
-    data-volume="1.0" playsinline
-    style="object-fit:cover;width:100%;height:100%;"></video>
+  data-composition-id="bright-studio-v3"
+  data-start="0"
+  data-duration="TOTAL_DUR"
+  data-width="720" data-height="1280">
 
-  <!-- ============================================================
-       STYLE SIGNATURE: 4px navy left border — always visible
-  ============================================================= -->
+  <!-- ── STYLE RULE: 4px navy left border always visible ────── -->
   <div style="position:absolute;top:0;left:0;width:4px;height:100%;
-    background:#1a2744;z-index:20;pointer-events:none;"></div>
-
-  <!-- ============================================================
-       SCENE 1: OPENING HOOK 0–4s
-       Giant Space Grotesk in the TOP THIRD (fills headroom above subject)
-       Navy text on the bright wall — high contrast, no overlay needed
-  ============================================================= -->
-  <div id="s1-program" class="clip" data-start="0.2" data-duration="3.6" data-track-index="1"
-    style="position:absolute;top:40px;left:20px;right:20px;
-    font:900 100px/0.95 'Space Grotesk',sans-serif;
-    color:#1a2744;letter-spacing:-3px;z-index:10;">
-    AI<br>TRANS-<br>FORM</div>
-
-  <div id="s1-sub" class="clip" data-start="0.5" data-duration="3.3" data-track-index="2"
-    style="position:absolute;top:348px;left:20px;
-    font:700 28px/1.2 'Plus Jakarta Sans',sans-serif;
-    color:#1a2744;letter-spacing:0.04em;z-index:10;">
+    background:#1a2744;z-index:50;pointer-events:none;"></div>
+
+  <!-- ── SCENE 0: TITLE CARD 0–2.5s (navy bg, NO footage) ──── -->
+  <div id="s0-bg" class="clip sc" data-start="0" data-duration="2.5" data-track-index="0"
+    style="background:#1a2744;z-index:5;"></div>
+  <div id="s0-line" class="clip" data-start="0.15" data-duration="2.2" data-track-index="1"
+    style="position:absolute;top:480px;left:20px;width:60px;height:3px;
+    background:#fff;z-index:6;"></div>
+  <div id="s0-head" class="clip" data-start="0.2" data-duration="2.1" data-track-index="2"
+    style="position:absolute;top:500px;left:20px;right:20px;
+    font:900 80px/0.95 'Space Grotesk',sans-serif;color:#fff;
+    letter-spacing:-2px;z-index:6;">AI<br>TRANS-<br>FORM</div>
+  <div id="s0-sub" class="clip" data-start="0.45" data-duration="1.85" data-track-index="3"
+    style="position:absolute;top:750px;left:20px;
+    font:600 22px/1.3 'Plus Jakarta Sans',sans-serif;
+    color:rgba(255,255,255,0.60);letter-spacing:0.05em;z-index:6;">
     SERIES 2026 &nbsp;·&nbsp; DEE FERDINAND AI</div>
 
-  <div id="s1-rule" class="clip" data-start="0.4" data-duration="3.4" data-track-index="3"
-    style="position:absolute;top:338px;left:20px;width:280px;height:2px;
-    background:#1a2744;z-index:10;"></div>
-
-  <!-- ============================================================
-       SCENE 2: LOWER-THIRD ID 6–16s
-       Glass card slides in from left — identifies subject
-  ============================================================= -->
-  <div id="s2-card" class="clip" data-start="6" data-duration="10" data-track-index="4"
-    style="position:absolute;bottom:200px;left:0;
-    background:rgba(255,255,255,0.92);
-    border-left:5px solid #1a2744;
-    border-radius:0 14px 14px 0;
-    padding:18px 28px 18px 24px;z-index:15;">
-    <div style="font:800 34px/1.1 'Space Grotesk',sans-serif;
+  <!-- ── SCENE 1: FOOTAGE 2.2–END (captions burned in by ffmpeg) -->
+  <video id="aroll" class="clip sc" src="../assets/clean.mp4"
+    data-start="2.2" data-duration="FOOTAGE_DUR" data-track-index="4"
+    data-volume="1.0" playsinline
+    style="object-fit:cover;width:100%;height:100%;"></video>
+
+  <!-- Bottom vignette over footage (persistent after t=2.2) -->
+  <div class="clip sc" data-start="2.2" data-duration="FOOTAGE_DUR" data-track-index="5"
+    style="background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 35%);
+    pointer-events:none;z-index:6;"></div>
+
+  <!-- ── SCENE 2: LOWER-THIRD ID 5–13s ──────────────────────── -->
+  <div id="s2-lt" class="clip" data-start="5" data-duration="8" data-track-index="6"
+    style="position:absolute;bottom:180px;left:0;
+    background:rgba(255,255,255,0.94);
+    border-left:5px solid #1a2744;border-radius:0 12px 12px 0;
+    padding:16px 26px 16px 22px;z-index:10;">
+    <div style="font:800 32px/1.1 'Space Grotesk',sans-serif;
       color:#1a2744;letter-spacing:-0.02em;">PARTICIPANT_NAME</div>
-    <div style="font:500 18px/1.2 'Plus Jakarta Sans',sans-serif;
-      color:#1a2744;opacity:0.65;margin-top:5px;">PARTICIPANT_ROLE</div>
+    <div style="font:500 17px/1.3 'Plus Jakarta Sans',sans-serif;
+      color:#1a2744;opacity:0.55;margin-top:4px;">PARTICIPANT_ROLE</div>
   </div>
 
-  <!-- ============================================================
-       SCENE 3: PULL QUOTE 20–38s
-       Big italic quote in navy — Space Grotesk in top area
-       appears when she says the strongest line
-  ============================================================= -->
-  <div id="s3-quote" class="clip" data-start="20" data-duration="18" data-track-index="5"
-    style="position:absolute;top:36px;left:20px;right:20px;z-index:12;
-    background:rgba(245,245,240,0.88);border-radius:14px;
-    padding:24px 22px 20px 28px;
-    border-left:5px solid #1a2744;">
-    <div style="font:800 64px/1.0 'Space Grotesk',sans-serif;
-      color:#1a2744;letter-spacing:-2px;margin-bottom:14px;">
+  <!-- ── SCENE 3: PULL QUOTE 18–26s (8s only) ──────────────── -->
+  <div id="s3-q" class="clip" data-start="18" data-duration="8" data-track-index="7"
+    style="position:absolute;top:36px;left:12px;right:12px;z-index:10;
+    background:rgba(26,39,68,0.90);border-radius:14px;
+    padding:22px 22px 18px 22px;">
+    <div style="font:800 52px/1.05 'Space Grotesk',sans-serif;
+      color:#fff;letter-spacing:-1.5px;margin-bottom:12px;">
       &ldquo;PULL_QUOTE_TEXT&rdquo;</div>
-    <div style="font:500 20px/1.3 'Plus Jakarta Sans',sans-serif;
-      color:#1a2744;opacity:0.55;">
+    <div style="font:500 17px/1.3 'Plus Jakarta Sans',sans-serif;
+      color:rgba(255,255,255,0.55);">
       &mdash; PARTICIPANT_NAME &nbsp;·&nbsp; AI Transformation Series</div>
   </div>
 
-  <!-- ============================================================
-       SCENE 4: STAT BURST 40–52s
-       1,000+ in giant Space Grotesk — top right corner, navy on bright
-  ============================================================= -->
-  <div id="s4-stat" class="clip" data-start="40" data-duration="12" data-track-index="6"
-    style="position:absolute;top:50px;right:20px;text-align:right;z-index:12;">
-    <div style="font:900 112px/0.9 'Space Grotesk',sans-serif;
-      color:#1a2744;letter-spacing:-4px;">1,000+</div>
-    <div style="font:700 26px/1.2 'Plus Jakarta Sans',sans-serif;
-      color:#1a2744;opacity:0.70;margin-top:8px;">profesional<br>terlatih sejak 2023</div>
+  <!-- ── SCENE 4: CHIPS 30–42s (each on own track) ─────────── -->
+  <div id="s4-c1" class="clip" data-start="30" data-duration="12" data-track-index="8"
+    style="position:absolute;bottom:280px;left:12px;
+    background:#1a2744;border-radius:40px;padding:12px 22px;z-index:10;">
+    <span style="font:800 26px/1 'Space Grotesk',sans-serif;color:#fff;">80% hands-on</span></div>
+  <div id="s4-c2" class="clip" data-start="31.5" data-duration="10.5" data-track-index="9"
+    style="position:absolute;bottom:228px;left:12px;border:3px solid #1a2744;
+    border-radius:40px;padding:12px 22px;z-index:10;">
+    <span style="font:700 26px/1 'Plus Jakarta Sans',sans-serif;color:#1a2744;">Langsung praktek</span></div>
+  <div id="s4-c3" class="clip" data-start="33" data-duration="9" data-track-index="10"
+    style="position:absolute;bottom:176px;left:12px;border:3px solid #1a2744;
+    border-radius:40px;padding:12px 22px;z-index:10;">
+    <span style="font:700 26px/1 'Plus Jakarta Sans',sans-serif;color:#1a2744;">Real output &#x2713;</span></div>
+
+  <!-- ── SCENE 5: STAT 44–54s ───────────────────────────────── -->
+  <div id="s5-stat" class="clip" data-start="44" data-duration="10" data-track-index="11"
+    style="position:absolute;top:36px;right:12px;text-align:right;z-index:10;">
+    <div style="font:900 100px/0.9 'Space Grotesk',sans-serif;
+      color:#1a2744;letter-spacing:-3px;">1,000+</div>
+    <div style="font:600 22px/1.3 'Plus Jakarta Sans',sans-serif;
+      color:#1a2744;opacity:0.65;margin-top:6px;">profesional terlatih<br>sejak 2023</div>
   </div>
 
-  <!-- ============================================================
-       SCENE 5: ENERGY CHIPS 54–66s (each on own track)
-  ============================================================= -->
-  <div id="s5-chip1" class="clip" data-start="54" data-duration="12" data-track-index="7"
-    style="position:absolute;top:50px;left:20px;z-index:12;
-    background:#1a2744;border-radius:40px;padding:12px 24px;">
-    <span style="font:800 28px/1 'Space Grotesk',sans-serif;color:#fff;
-      letter-spacing:-0.02em;">80% hands-on</span></div>
-
-  <div id="s5-chip2" class="clip" data-start="55.5" data-duration="10.5" data-track-index="8"
-    style="position:absolute;top:112px;left:20px;z-index:12;
-    background:transparent;border:3px solid #1a2744;border-radius:40px;padding:12px 24px;">
-    <span style="font:700 28px/1 'Plus Jakarta Sans',sans-serif;color:#1a2744;">
-      Langsung praktek</span></div>
-
-  <div id="s5-chip3" class="clip" data-start="57" data-duration="9" data-track-index="9"
-    style="position:absolute;top:178px;left:20px;z-index:12;
-    background:transparent;border:3px solid #1a2744;border-radius:40px;padding:12px 24px;">
-    <span style="font:700 28px/1 'Plus Jakarta Sans',sans-serif;color:#1a2744;">
-      Real output &#x2713;</span></div>
-
-  <!-- ============================================================
-       CAPTIONS: word-synced subtitles burned by ffmpeg
-       This track carries the SubRip (SRT) captions file reference
-       HyperFrames renders these as a burned-in ffmpeg subtitle filter
-       Style: white pill background, navy Plus Jakarta Sans text
-  ============================================================= -->
-  <track id="captions" src="../assets/captions.srt"
-    data-start="0" data-duration="DURATION_PLACEHOLDER" data-track-index="25"
-    kind="subtitles" srclang="id" default
-    data-style="FontName=Plus Jakarta Sans,FontSize=28,PrimaryColour=&H001a2744,OutlineColour=&H00FFFFFF,Outline=12,Shadow=0,Alignment=2,MarginV=140,Bold=1"/>
-
-  <!-- ============================================================
-       MUSIC BED: CC0 acoustic at 10% — loops under voice
-  ============================================================= -->
+  <!-- ── SCENE 6: BRAND OUTRO ───────────────────────────────── -->
+  <div id="s6-ov" class="clip sc" data-start="OUTRO_START" data-duration="7" data-track-index="12"
+    style="background:#1a2744;z-index:20;"></div>
+  <div id="s6-nm" class="clip" data-start="OUTRO_S1" data-duration="6.5" data-track-index="13"
+    style="position:absolute;bottom:300px;left:0;right:0;text-align:center;
+    font:900 64px/1.0 'Space Grotesk',sans-serif;color:#fff;
+    letter-spacing:-2px;z-index:21;">Dee Ferdinand</div>
+  <div id="s6-ti" class="clip" data-start="OUTRO_S2" data-duration="6" data-track-index="14"
+    style="position:absolute;bottom:246px;left:0;right:0;text-align:center;
+    font:600 24px/1.2 'Plus Jakarta Sans',sans-serif;
+    color:rgba(255,255,255,0.65);z-index:21;">AI Corporate Trainer &nbsp;·&nbsp; MAIN AI</div>
+  <div id="s6-hd" class="clip" data-start="OUTRO_S3" data-duration="5.5" data-track-index="15"
+    style="position:absolute;bottom:206px;left:0;right:0;text-align:center;
+    font:400 18px/1 'Plus Jakarta Sans',sans-serif;
+    color:rgba(255,255,255,0.40);z-index:21;">@deeferdinand &nbsp;·&nbsp; deeferdinand.com</div>
+  <div id="s6-ct" class="clip" data-start="OUTRO_S4" data-duration="5" data-track-index="16"
+    style="position:absolute;bottom:140px;left:0;right:0;text-align:center;
+    font:700 26px/1 'Plus Jakarta Sans',sans-serif;font-style:italic;
+    color:#a8a0ff;z-index:21;">Transform your team &#x2192;</div>
+
+  <!-- Music (CC0 hosted in repo assets) -->
   <audio src="../assets/music.mp3"
-    data-start="0" data-duration="DURATION_PLACEHOLDER"
+    data-start="0" data-duration="TOTAL_DUR"
     data-track-index="50" data-volume="0.10"></audio>
 
-  <!-- ============================================================
-       BRAND OUTRO: last 7s — full navy overlay + CTA
-  ============================================================= -->
-  <div id="s6-overlay" class="clip sc" data-start="OUTRO_START" data-duration="7" data-track-index="15"
-    style="background:#1a2744;z-index:18;"></div>
-  <div id="s6-name" class="clip" data-start="OUTRO_NAME" data-duration="6.5" data-track-index="16"
-    style="position:absolute;bottom:300px;left:0;right:0;text-align:center;
-    font:900 72px/1.0 'Space Grotesk',sans-serif;color:#fff;
-    letter-spacing:-2px;z-index:19;">Dee Ferdinand</div>
-  <div id="s6-title" class="clip" data-start="OUTRO_TITLE" data-duration="6" data-track-index="17"
-    style="position:absolute;bottom:240px;left:0;right:0;text-align:center;
-    font:600 26px/1.2 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.72);z-index:19;">
-    AI Corporate Trainer &nbsp;·&nbsp; MAIN AI</div>
-  <div id="s6-handle" class="clip" data-start="OUTRO_HANDLE" data-duration="5.5" data-track-index="18"
-    style="position:absolute;bottom:196px;left:0;right:0;text-align:center;
-    font:400 20px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.45);z-index:19;">
-    @deeferdinand &nbsp;·&nbsp; deeferdinand.com</div>
-  <div id="s6-cta" class="clip" data-start="OUTRO_CTA" data-duration="5" data-track-index="19"
-    style="position:absolute;bottom:120px;left:0;right:0;text-align:center;
-    font:700 30px/1 'Plus Jakarta Sans',sans-serif;font-style:italic;
-    color:#a8a0ff;z-index:19;">
-    Transform your team &#x2192;</div>
-
-  <!-- Persistent brand bar — always visible -->
+  <!-- Persistent brand bar -->
   <div style="position:absolute;bottom:0;left:4px;right:0;
-    padding:14px 24px 30px;
-    background:linear-gradient(transparent,rgba(245,245,240,0.90));z-index:16;">
-    <span style="font:800 20px/1 'Space Grotesk',sans-serif;
-      color:#1a2744;letter-spacing:-0.02em;">Dee Ferdinand</span>
-    <span style="font:400 14px/1 'Plus Jakarta Sans',sans-serif;
-      color:#1a2744;opacity:0.55;margin-left:6px;">&nbsp;·&nbsp; AI Corporate Trainer</span>
+    padding:12px 20px 28px;
+    background:linear-gradient(transparent,rgba(245,245,240,0.92));z-index:9;">
+    <span style="font:800 19px/1 'Space Grotesk',sans-serif;color:#1a2744;
+      letter-spacing:-0.02em;">Dee Ferdinand</span>
+    <span style="font:400 13px/1 'Plus Jakarta Sans',sans-serif;
+      color:#1a2744;opacity:0.50;margin-left:5px;">&nbsp;·&nbsp; AI Corporate Trainer</span>
   </div>
-
 </div>
 
 <script>
 const tl = gsap.timeline({ paused: true });
 
-// S1: OPENING — slam from above (expo.out kinetic energy)
-tl.from("#s1-rule",    { scaleX:0, transformOrigin:"left", duration:0.2, ease:"expo.out" }, 0.4);
-tl.from("#s1-program", { y:-120, autoAlpha:0, duration:0.25, ease:"expo.out" }, 0.2);
-tl.from("#s1-sub",     { y:30, autoAlpha:0, duration:0.35, ease:"power3.out" }, 0.5);
-
-// S2: LOWER-THIRD — slide from left (power3.out decisive)
-tl.from("#s2-card", { x:-500, autoAlpha:0, duration:0.38, ease:"power3.out" }, 6);
+tl.from("#s0-line", { scaleX:0, transformOrigin:"left", duration:0.18, ease:"expo.out" }, 0.15);
+tl.from("#s0-head", { y:-80, autoAlpha:0, duration:0.22, ease:"expo.out" }, 0.2);
+tl.from("#s0-sub",  { y:30,  autoAlpha:0, duration:0.30, ease:"power3.out" }, 0.45);
 
-// S3: PULL QUOTE — scale pop from center (back.out confidence)
-tl.from("#s3-quote", { scale:0.88, autoAlpha:0, y:30, duration:0.55, ease:"back.out(1.8)" }, 20);
-tl.to("#s3-quote",   { autoAlpha:0, duration:0.3, ease:"sine.inOut" }, 37.5);
+tl.from("#s2-lt",  { x:-480, autoAlpha:0, duration:0.38, ease:"power3.out" }, 5);
 
-// S4: STAT — slam from top right (expo.out kinetic)
-tl.from("#s4-stat", { y:-80, autoAlpha:0, duration:0.28, ease:"expo.out" }, 40);
-tl.to("#s4-stat",   { autoAlpha:0, duration:0.25 }, 51.5);
+tl.from("#s3-q",   { scale:0.90, autoAlpha:0, duration:0.45, ease:"back.out(1.6)" }, 18);
+tl.to("#s3-q",     { autoAlpha:0, duration:0.28, ease:"sine.inOut" }, 25.7);
 
-// S5: CHIPS — cascade left (power4.out decisive, staggered)
-tl.from("#s5-chip1", { x:-200, autoAlpha:0, duration:0.28, ease:"power4.out" }, 54);
-tl.from("#s5-chip2", { x:-200, autoAlpha:0, duration:0.28, ease:"power4.out" }, 55.5);
-tl.from("#s5-chip3", { x:-200, autoAlpha:0, duration:0.28, ease:"power4.out" }, 57);
-tl.to(["#s5-chip1","#s5-chip2","#s5-chip3"], { autoAlpha:0, duration:0.25 }, 65.5);
+tl.from("#s4-c1",  { x:-200, autoAlpha:0, duration:0.26, ease:"power4.out" }, 30);
+tl.from("#s4-c2",  { x:-200, autoAlpha:0, duration:0.26, ease:"power4.out" }, 31.5);
+tl.from("#s4-c3",  { x:-200, autoAlpha:0, duration:0.26, ease:"power4.out" }, 33);
+tl.to(["#s4-c1","#s4-c2","#s4-c3"], { autoAlpha:0, duration:0.22 }, 41.5);
 
-// S6: BRAND OUTRO — fade in navy cover
-tl.from("#s6-overlay", { autoAlpha:0, duration:0.5, ease:"sine.inOut" }, "OUTRO_START");
-tl.from("#s6-name",    { y:40, autoAlpha:0, duration:0.45, ease:"power3.out" }, "OUTRO_NAME");
-tl.from("#s6-title",   { y:30, autoAlpha:0, duration:0.40, ease:"power3.out" }, "OUTRO_TITLE");
-tl.from("#s6-handle",  { y:20, autoAlpha:0, duration:0.35, ease:"power3.out" }, "OUTRO_HANDLE");
-tl.from("#s6-cta",     { y:20, autoAlpha:0, duration:0.35, ease:"power3.out" }, "OUTRO_CTA");
+tl.from("#s5-stat", { y:-60, autoAlpha:0, duration:0.28, ease:"expo.out" }, 44);
+tl.to("#s5-stat",   { autoAlpha:0, duration:0.22 }, 53.5);
 
-tl.set({}, {}, DURATION_PLACEHOLDER);
+tl.from("#s6-ov",  { autoAlpha:0, duration:0.50, ease:"sine.inOut" }, "OUTRO_START");
+tl.from("#s6-nm",  { y:36, autoAlpha:0, duration:0.42, ease:"power3.out" }, "OUTRO_S1");
+tl.from("#s6-ti",  { y:28, autoAlpha:0, duration:0.38, ease:"power3.out" }, "OUTRO_S2");
+tl.from("#s6-hd",  { y:20, autoAlpha:0, duration:0.33, ease:"power3.out" }, "OUTRO_S3");
+tl.from("#s6-ct",  { y:20, autoAlpha:0, duration:0.33, ease:"power3.out" }, "OUTRO_S4");
 
+tl.set({}, {}, TOTAL_DUR);
 window.__timelines = window.__timelines || {};
-window.__timelines["bright-studio-testimoni"] = tl;
+window.__timelines["bright-studio-v3"] = tl;
 </script>
-</body>
-</html>
+</body></html>

scripts/patch_composition.py

@@ -1,52 +1,47 @@
 #!/usr/bin/env python3
-"""patch_composition.py — inject metadata + timestamps at render time"""
+"""patch_composition.py v2 - inject name/role/quote/durations"""
 import argparse, re
 
-def patch(html, name, role, quote, duration):
-    dur = str(int(float(duration)))
-    outro_start = str(int(float(duration)) - 7)
-    outro_name  = str(int(float(duration)) - 6.5)
-    outro_title = str(int(float(duration)) - 6)
-    outro_handle= str(int(float(duration)) - 5.5)
-    outro_cta   = str(int(float(duration)) - 5)
-
-    html = html.replace("DURATION_PLACEHOLDER", dur)
-    html = html.replace("OUTRO_START", outro_start)
-    html = html.replace('"OUTRO_START"', f'"+={outro_start}"')
-    html = html.replace("OUTRO_NAME",  outro_name)
-    html = html.replace("OUTRO_TITLE", outro_title)
-    html = html.replace("OUTRO_HANDLE",outro_handle)
-    html = html.replace("OUTRO_CTA",   outro_cta)
-
-    # Also fix the GSAP string labels
-    html = re.sub(r'"OUTRO_\w+"', lambda m: {
-        '"OUTRO_START"':  f'"{outro_start}"',
-        '"OUTRO_NAME"':   f'"{outro_name}"',
-        '"OUTRO_TITLE"':  f'"{outro_title}"',
-        '"OUTRO_HANDLE"': f'"{outro_handle}"',
-        '"OUTRO_CTA"':    f'"{outro_cta}"',
-    }.get(m.group(0), m.group(0)), html)
+def patch(html, name, role, quote, footage_dur, total_dur):
+    fd  = int(float(footage_dur))
+    td  = int(float(total_dur))
+    os  = str(td - 7)   # outro start
+    s1  = str(td - 6.5)
+    s2  = str(td - 6)
+    s3  = str(td - 5.5)
+    s4  = str(td - 5)
 
+    html = html.replace("TOTAL_DUR",   str(td))
+    html = html.replace("FOOTAGE_DUR", str(fd))
+    html = html.replace("OUTRO_START", os)
+    html = html.replace("OUTRO_S1",    s1)
+    html = html.replace("OUTRO_S2",    s2)
+    html = html.replace("OUTRO_S3",    s3)
+    html = html.replace("OUTRO_S4",    s4)
+    html = re.sub(r'"OUTRO_START"', f'"{os}"', html)
+    html = re.sub(r'"OUTRO_S1"',    f'"{s1}"', html)
+    html = re.sub(r'"OUTRO_S2"',    f'"{s2}"', html)
+    html = re.sub(r'"OUTRO_S3"',    f'"{s3}"', html)
+    html = re.sub(r'"OUTRO_S4"',    f'"{s4}"', html)
     html = html.replace("PARTICIPANT_NAME", name)
     html = html.replace("PARTICIPANT_ROLE", role)
-    html = html.replace("PULL_QUOTE_TEXT", quote[:80])
+    q80 = (quote[:78] + "...") if len(quote) > 80 else quote
+    html = html.replace("PULL_QUOTE_TEXT", q80)
     return html
 
 def main():
     p = argparse.ArgumentParser()
-    p.add_argument("--input",    required=True)
-    p.add_argument("--output",   required=True)
-    p.add_argument("--name",     default="Peserta Training")
-    p.add_argument("--role",     default="AI Transformation Series · 2026")
-    p.add_argument("--quote",    default="Training ini langsung bisa dipraktek!")
-    p.add_argument("--duration", default="71")
+    p.add_argument("--input",       required=True)
+    p.add_argument("--output",      required=True)
+    p.add_argument("--name",        default="Peserta Training")
+    p.add_argument("--role",        default="AI Transformation Series 2026")
+    p.add_argument("--quote",       default="Training ini langsung bisa dipraktek dan hasilnya nyata")
+    p.add_argument("--footage-dur", default="75")
+    p.add_argument("--total-dur",   default="77.5")
     args = p.parse_args()
-
-    with open(args.input, encoding="utf-8") as f:
-        html = f.read()
-    with open(args.output, "w", encoding="utf-8") as f:
-        f.write(patch(html, args.name, args.role, args.quote, args.duration))
-    print(f"Patched: {args.output} (duration={args.duration}s, name={args.name})")
-
+    with open(args.input, encoding="utf-8") as f: html = f.read()
+    out = patch(html, args.name, args.role, args.quote, args.footage_dur, args.total_dur)
+    with open(args.output, "w", encoding="utf-8") as f: f.write(out)
+    print(f"Patched OK — footage={args.footage_dur}s total={args.total_dur}s name={args.name}")
 if __name__ == "__main__":
     main()