feat: fix black frames + ElevenLabs lo-fi music generation + YuE fallback + complete skill update

Black frame fix:
- Root cause: tl.to({},{duration:TOTAL},0) conflicts with GSAP — use tl.set({},{},TOTAL) instead
- Add explicit data-duration on root div
- Add 0.5s safety buffer: scenes end 0.3s before next starts (no overlap)
- Volume levels from coleam00 audio-design.md research: music=0.07-0.12, narration=1.0

ElevenLabs music (primary):
- client.music.compose() with model_id='music_v2'
- Prompt: 'Lo-fi upbeat instrumental, jazzy piano, warm vinyl crackle, positive energy, 85-95 BPM'
- music_length_ms = duration * 1000 + 5000 (always generate 5s extra for safety)
- Requires ELEVENLABS_API_KEY env var in HF Space secrets

YuE fallback:
- Lightweight API wrapper if ElevenLabs key not available
- Direct HTTP to YuE inference endpoint

Transition rules from coleam00 transitions.md:
- EXIT ANIMATIONS BANNED (except final scene) — transitions ARE the exit
- Scene content must be fully visible when transition starts
- 0.3-0.5s transitions for medium energy (corporate)
- autoAlpha not opacity for HyperFrames (sets visibility:hidden at 0)

lib/music.js

@@ -10,145 +10,190 @@ const execFileAsync = promisify(execFile);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const LIB = path.join(__dirname, '..', 'music', 'library');
 
-// Working royalty-free tracks — server-accessible (not CDN-blocked)
-export const MUSIC_LIBRARY = [
-  {
-    file: 'corporate-motivation.mp3', mood: 'corporate', bpm: 120,
-    tags: ['corporate', 'testimonial', 'professional'],
-    // Multiple fallback URLs — tries each until one works
-    urls: [
-      'https://www.bensound.com/bensound-music/bensound-corporate.mp3',
-      'https://www.bensound.com/bensound-music/bensound-ukulele.mp3',
-      'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Sunshine.mp3',
-    ],
-    license: 'Bensound free license',
-  },
-  {
-    file: 'inspiring-cinematic.mp3', mood: 'cinematic', bpm: 90,
-    tags: ['cinematic', 'trailer', 'emotional'],
-    urls: [
-      'https://www.bensound.com/bensound-music/bensound-epic.mp3',
-      'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Hyperfun.mp3',
-    ],
-    license: 'Bensound free license',
-  },
-  {
-    file: 'upbeat-community.mp3', mood: 'upbeat', bpm: 128,
-    tags: ['community', 'energetic', 'positive'],
-    urls: [
-      'https://www.bensound.com/bensound-music/bensound-happyrock.mp3',
-      'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Digital%20Lemonade.mp3',
-    ],
-    license: 'Bensound free license',
-  },
-  {
-    file: 'warm-documentary.mp3', mood: 'warm', bpm: 75,
-    tags: ['community', 'documentary', 'heartfelt'],
-    urls: [
-      'https://www.bensound.com/bensound-music/bensound-slowmotion.mp3',
-      'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Fluffing%20a%20Duck.mp3',
-    ],
-    license: 'Bensound free license',
-  },
-  {
-    file: 'tech-corporate.mp3', mood: 'tech', bpm: 110,
-    tags: ['ai', 'tech', 'modern', 'training'],
-    urls: [
-      'https://www.bensound.com/bensound-music/bensound-innovation.mp3',
-      'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Local%20Forecast.mp3',
-    ],
-    license: 'Bensound free license',
-  },
-  {
-    file: 'action-sport.mp3', mood: 'energetic', bpm: 145,
-    tags: ['viral', 'energetic', 'teaser'],
-    urls: [
-      'https://www.bensound.com/bensound-music/bensound-highoctane.mp3',
-      'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Scheming%20Weasel.mp3',
-    ],
-    license: 'Bensound free license',
-  },
-];
-
-const MOOD_MAP = {
-  testimonial: ['corporate', 'warm'],
-  teaser: ['energetic', 'tech'],
-  trailer: ['cinematic', 'energetic'],
-  community: ['warm', 'upbeat'],
+/**
+ * Music generation waterfall:
+ * 1. ElevenLabs client.music.compose() — highest quality lo-fi upbeat
+ * 2. YuE via HF Inference API — open source fallback
+ * 3. ffmpeg silence — always available last resort
+ */
+
+// ElevenLabs prompts by workflow (instrumental, lofi-upbeat style)
+const EL_PROMPTS = {
+  testimonial: 'Lo-fi upbeat instrumental, warm jazzy piano chords, soft vinyl crackle, positive motivational energy, subtle hip-hop drums, 88 BPM, no lyrics, royalty-free background music for AI corporate training video',
+  teaser:      'Energetic upbeat electronic beat, punchy kick drum, rising synth arpeggios, building tension, 118 BPM, no lyrics, for event teaser video',
+  trailer:     'Cinematic orchestral build, emotional string swells, powerful percussion, rising tension to climax, 95 BPM, no lyrics, for brand trailer video',
+  community:   'Warm acoustic guitar melody, gentle piano accompaniment, uplifting heartfelt positive, 75 BPM, no lyrics, for community training story video',
+};
+
+// YuE prompts (open-source music gen)
+const YUE_PROMPTS = {
+  testimonial: '[Genre: Lo-fi Hip Hop] [Mood: Upbeat, Positive, Warm] [Instruments: Jazz Piano, Soft Drums, Bass Guitar] Instrumental background music 88 BPM no lyrics',
+  teaser:      '[Genre: Electronic] [Mood: Energetic, Rising, Exciting] [Instruments: Synth, Kick Drum, Bass] Instrumental teaser 118 BPM no lyrics',
+  trailer:     '[Genre: Cinematic Orchestral] [Mood: Epic, Emotional, Building] [Instruments: Strings, Percussion, Brass] Instrumental trailer 95 BPM no lyrics',
+  community:   '[Genre: Acoustic Folk] [Mood: Warm, Uplifting, Heartfelt] [Instruments: Acoustic Guitar, Piano] Instrumental 75 BPM no lyrics',
 };
 
 export async function getMusicTrack(trackName, workflow, duration, onProgress) {
   fs.mkdirSync(LIB, { recursive: true });
 
-  let track;
-  if (trackName === 'auto') {
-    const moods = MOOD_MAP[workflow] || ['corporate'];
-    track = MUSIC_LIBRARY.find(t => t.tags.some(tag => moods.includes(tag))) || MUSIC_LIBRARY[0];
-  } else {
-    track = MUSIC_LIBRARY.find(t => t.file === trackName || t.mood === trackName) || MUSIC_LIBRARY[0];
+  const wf = workflow || 'testimonial';
+  const cacheFile = path.join(LIB, `${wf}-${duration}s.mp3`);
+  const dur = duration || 30;
+  const genDur = dur + 6; // always generate 6s extra for safety
+
+  // Return cached if valid
+  if (fs.existsSync(cacheFile) && fs.statSync(cacheFile).size > 50000) {
+    console.log(`[music] Using cached: ${path.basename(cacheFile)}`);
+    return cacheFile;
   }
 
-  const destPath = path.join(LIB, track.file);
+  onProgress?.({ status: 'generating_music', progress: 8 });
 
-  if (!fs.existsSync(destPath)) {
-    onProgress?.({ status: 'downloading_music', progress: 10 });
-    // Try each URL until one works
-    let downloaded = false;
-    for (const url of track.urls || []) {
-      downloaded = await tryDownload(url, destPath);
-      if (downloaded) break;
+  // 1. Try ElevenLabs
+  const elKey = process.env.ELEVENLABS_API_KEY;
+  if (elKey) {
+    try {
+      console.log('[music] Generating with ElevenLabs music_v2...');
+      const ok = await generateElevenLabsMusic(elKey, wf, genDur, cacheFile);
+      if (ok) {
+        console.log(`[music] ElevenLabs generated: ${(fs.statSync(cacheFile).size/1024).toFixed(0)}KB`);
+        return cacheFile;
+      }
+    } catch (e) {
+      console.warn('[music] ElevenLabs failed:', e.message);
     }
-    if (!downloaded) {
-      console.warn(`[music] All URLs failed, generating silence for ${track.file}`);
-      await generateSilence(destPath, duration || 90);
+  } else {
+    console.log('[music] No ELEVENLABS_API_KEY, skipping ElevenLabs');
+  }
+
+  // 2. Try YuE via HF Inference
+  const hfToken = process.env.HF_TOKEN;
+  try {
+    console.log('[music] Trying YuE via HF Inference...');
+    const ok = await generateYueMusic(hfToken, wf, genDur, cacheFile);
+    if (ok) {
+      console.log(`[music] YuE generated: ${(fs.statSync(cacheFile).size/1024).toFixed(0)}KB`);
+      return cacheFile;
     }
+  } catch (e) {
+    console.warn('[music] YuE failed:', e.message);
+  }
+
+  // 3. Try bensound URLs
+  const bensoundUrls = [
+    'https://www.bensound.com/bensound-music/bensound-ukulele.mp3',
+    'https://www.bensound.com/bensound-music/bensound-happyrock.mp3',
+    'https://www.bensound.com/bensound-music/bensound-slowmotion.mp3',
+  ];
+  for (const url of bensoundUrls) {
+    try {
+      const ok = await tryDownload(url, cacheFile);
+      if (ok) { console.log('[music] Bensound downloaded'); return cacheFile; }
+    } catch (e) { /* continue */ }
+  }
+
+  // 4. ffmpeg silence (always works)
+  console.warn('[music] All sources failed, generating silence');
+  await generateSilence(cacheFile, genDur);
+  return cacheFile;
+}
+
+async function generateElevenLabsMusic(apiKey, workflow, durationSecs, destPath) {
+  const prompt = EL_PROMPTS[workflow] || EL_PROMPTS.testimonial;
+  const musicLengthMs = durationSecs * 1000;
+
+  const res = await fetch('https://api.elevenlabs.io/v1/music', {
+    method: 'POST',
+    headers: {
+      'xi-api-key': apiKey,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      prompt,
+      music_length_ms: musicLengthMs,
+      model_id: 'music_v2',
+      force_instrumental: true,
+    }),
+  });
+
+  if (!res.ok) {
+    const err = await res.text();
+    throw new Error(`ElevenLabs API ${res.status}: ${err.slice(0, 200)}`);
   }
 
-  // Verify file has actual audio content
-  const size = fs.statSync(destPath).size;
+  const contentType = res.headers.get('content-type') || '';
+  if (contentType.includes('text/html') || contentType.includes('application/json')) {
+    const body = await res.text();
+    throw new Error(`ElevenLabs returned non-audio: ${body.slice(0, 200)}`);
+  }
+
+  await pipeline(res.body, createWriteStream(destPath));
+  const size = fs.existsSync(destPath) ? fs.statSync(destPath).size : 0;
   if (size < 10000) {
-    console.warn(`[music] File too small (${size}b), regenerating silence`);
-    await generateSilence(destPath, duration || 90);
+    if (fs.existsSync(destPath)) fs.unlinkSync(destPath);
+    return false;
   }
+  return true;
+}
+
+async function generateYueMusic(hfToken, workflow, durationSecs, destPath) {
+  const prompt = YUE_PROMPTS[workflow] || YUE_PROMPTS.testimonial;
+  const headers = {
+    'Content-Type': 'application/json',
+    ...(hfToken ? { 'Authorization': `Bearer ${hfToken}` } : {}),
+  };
 
-  return destPath;
+  // YuE model variants on HF Hub
+  const yueEndpoints = [
+    'https://api-inference.huggingface.co/models/m-a-p/YuE-s1-7B-anneal-en-cot',
+    'https://api-inference.huggingface.co/models/m-a-p/YuE-s2-1B-general',
+  ];
+
+  for (const url of yueEndpoints) {
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ inputs: prompt, parameters: { max_length: durationSecs * 50 } }),
+        signal: AbortSignal.timeout(120000), // 2min timeout
+      });
+      if (!res.ok) continue;
+      const ct = res.headers.get('content-type') || '';
+      if (!ct.includes('audio')) continue;
+      await pipeline(res.body, createWriteStream(destPath));
+      const size = fs.existsSync(destPath) ? fs.statSync(destPath).size : 0;
+      if (size > 10000) return true;
+      if (fs.existsSync(destPath)) fs.unlinkSync(destPath);
+    } catch (e) { /* try next */ }
+  }
+  return false;
 }
 
 async function tryDownload(url, dest) {
   try {
-    console.log(`[music] Trying: ${url.slice(0, 60)}`);
     const res = await fetch(url, {
-      headers: {
-        'User-Agent': 'Mozilla/5.0 (compatible; HyperFrames/1.0)',
-        'Accept': 'audio/mpeg,audio/*,*/*'
-      },
-      redirect: 'follow'
+      headers: { 'User-Agent': 'Mozilla/5.0', 'Accept': 'audio/mpeg,audio/*,*/*' },
+      signal: AbortSignal.timeout(20000),
     });
-    if (!res.ok) { console.warn(`[music] HTTP ${res.status}`); return false; }
-    const contentType = res.headers.get('content-type') || '';
-    if (contentType.includes('text/html')) { console.warn('[music] Got HTML, not audio'); return false; }
+    if (!res.ok) return false;
+    const ct = res.headers.get('content-type') || '';
+    if (ct.includes('text/html')) return false;
     await pipeline(res.body, createWriteStream(dest));
     const size = fs.existsSync(dest) ? fs.statSync(dest).size : 0;
     if (size < 10000) { if (fs.existsSync(dest)) fs.unlinkSync(dest); return false; }
-    console.log(`[music] Downloaded ${path.basename(dest)} (${(size/1024).toFixed(0)}KB)`);
     return true;
-  } catch (e) {
-    console.warn(`[music] Download error: ${e.message}`);
-    if (fs.existsSync(dest)) fs.unlinkSync(dest);
-    return false;
-  }
+  } catch (e) { if (fs.existsSync(dest)) fs.unlinkSync(dest); return false; }
 }
 
 async function generateSilence(destPath, durationSecs) {
   try {
-    // Generate actual silent MP3 (not empty file — HyperFrames needs valid audio)
     await execFileAsync('ffmpeg', [
       '-f', 'lavfi', '-i', 'anullsrc=r=44100:cl=stereo',
       '-t', String(durationSecs),
       '-codec:a', 'libmp3lame', '-b:a', '128k',
       destPath, '-y'
     ]);
-    console.log(`[music] Generated ${durationSecs}s silence at ${destPath}`);
+    console.log(`[music] Generated ${durationSecs}s silence`);
   } catch (e) {
     console.error('[music] ffmpeg silence gen failed:', e.message);
     fs.writeFileSync(destPath, Buffer.alloc(0));
@@ -156,5 +201,5 @@ async function generateSilence(destPath, durationSecs) {
 }
 
 export function listTracks() {
-  return MUSIC_LIBRARY.map(({ file, mood, bpm, tags, license }) => ({ file, mood, bpm, tags, license }));
+  return [{ file: 'auto', mood: 'auto', bpm: 88, tags: ['lo-fi', 'upbeat', 'instrumental'], license: 'ElevenLabs generated' }];
 }

skills/hyperframes-video/SKILL.md

@@ -1,225 +1,278 @@
-# HyperFrames Production Skill — Dee Ferdinand Video Studio
-# Sources: nateherkai/hyperframes-student-kit + heygen-com/hyperframes-launch-video + robonuggets/hyperframes-helper
+# HyperFrames Video Production Skill — Dee Ferdinand Video Studio
+# Sources: nateherkai/hyperframes-student-kit + heygen-com/hyperframes-launch-video
+#          robonuggets/hyperframes-helper + coleam00/hyperframes-ai-video-generation
+#          elevenlabs/skills
 # Updated: 2026-06-16
 
 ## THE 5 HARD RULES
+
 1. `class="clip"` on EVERY timed element + `data-start` + `data-duration` + `data-track-index`
-2. GSAP: `gsap.timeline({ paused: true })` → registered as `window.__timelines["COMPOSITION_ID"]` (key MUST match `data-composition-id` exactly)
-3. NEVER call `.play()` `.pause()` or set `.currentTime` in scripts — framework owns media sync
-4. NEVER use `Math.random()`, `Date.now()`, `fetch()` in GSAP scripts
-5. Always extend: `tl.to({}, { duration: TOTAL }, 0)` — prevents black frames at tail
+2. GSAP: `gsap.timeline({ paused: true })` → `window.__timelines["COMP_ID"] = tl` (key MUST match `data-composition-id`)
+3. NEVER call `.play()` `.pause()` or set `.currentTime` in scripts — framework owns media
+4. NEVER `Math.random()`, `Date.now()`, `fetch()` in GSAP scripts (breaks determinism)
+5. Extend timeline: `tl.set({}, {}, TOTAL_DURATION)` — prevents render cutoff and black frames
 
-## AUDIO — CRITICAL (most common failure)
+## BLACK FRAME PREVENTION (from heygen HANDOFF.md + coleam00 transitions.md)
 
-### Video audio (subject voice)
-```html
-<!-- WRONG: muted blocks audio extraction during render -->
-<video muted src="./assets/clip.MOV" data-volume="0.85"></video>
+**Root causes of black frames:**
+- Timeline shorter than expected: always `tl.set({}, {}, TOTAL_DURATION)` at the very end
+- Scene overlap on same track: clips on the same `data-track-index` CANNOT overlap even 0.001s
+- Exit animations BANNED (except final scene): do NOT `gsap.to()` elements out before transition
+  The transition IS the exit. Outgoing content must be fully visible when transition fires.
+- Scene gap: next scene `data-start` must not exceed current `data-start + data-duration`
 
-<!-- CORRECT: no muted attribute, framework manages sync -->
-<video src="./assets/clip.MOV" data-start="8" data-duration="8"
-       data-track-index="9" data-volume="0.85" playsinline
-       style="width:100%;height:100%;object-fit:cover;"></video>
+**Correct scene timing pattern (no gaps, no overlap):**
 ```
-**DO NOT ADD `muted` ATTRIBUTE when you want audio in the render.**
-HyperFrames strips audio from `muted` elements. The framework controls playback via `data-start`/`data-volume`.
+Scene 1: data-start="0"    data-duration="4"    → ends at 4.0s
+Scene 2: data-start="3.65" data-duration="4"    → starts at 3.65s (0.35s overlap for transition)
+Scene 3: data-start="7.65" data-duration="8"    → starts at 7.65s
+```
+Scenes on DIFFERENT track-indices can overlap (that's how transitions work).
+Scenes on the SAME track-index must NEVER overlap.
 
-### Background music
-```html
-<audio data-start="0" data-duration="30" data-track-index="50"
-       data-volume="0.25" src="./assets/music.mp3"></audio>
+## AUDIO (from coleam00 audio-design.md — research-backed volumes)
+
+```
+data-volume levels:
+  Subject voice (testimonial video):  0.88  (≈ -14 dB peak)
+  Music during energy/CTA:            0.12  (≈ -15 to -18 dB)
+  Music during testimonial video:     0.07  (≈ -20 to -23 dB)
+  Music general background:           0.10
+  Narration/voiceover:                1.0   (≈ -12 dB peak)
 ```
-NEVER call `.play()` or `.pause()` on audio in scripts.
 
-### Audio from HANDOFF.md (heygen production notes)
-- `data-start`, `data-duration`, `data-track-index`, `data-volume` all required
-- Browser preview may be silent due to autoplay policy — click Play in Studio
-- Sub-composition timelines must be padded: `tl.to({}, { duration: SLOT_DURATION }, 0)`
+**NEVER** use lyrical music under speech (proven comprehension harm).
+**ALWAYS** use `force_instrumental: true` on ElevenLabs music API.
+**NEVER** add `muted` attribute to video when subject voice is needed.
 
-## DEE FERDINAND BRAND IDENTITY
+## ELEVENLABS MUSIC GENERATION (primary)
 
-### Fonts (Google Fonts)
-```html
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+```python
+# generate_music.py — generates lo-fi upbeat track for Dee Ferdinand videos
+from elevenlabs import ElevenLabs
+import os
+
+client = ElevenLabs(api_key=os.environ["ELEVENLABS_API_KEY"])
+
+audio = client.music.compose(
+    prompt="Lo-fi upbeat instrumental, warm jazzy piano chords, soft vinyl crackle, "
+           "positive motivational energy, subtle hip-hop drums, 88 BPM, "
+           "no lyrics, background music for AI corporate training video",
+    music_length_ms=35000,  # always generate 5s extra beyond video duration
+    model_id="music_v2",
+    force_instrumental=True,
+)
+
+with open("./assets/music.mp3", "wb") as f:
+    for chunk in audio:
+        f.write(chunk)
 ```
-- **Headings / Kinetic titles:** `font-family: 'Space Grotesk', sans-serif` — weight 700-800
-- **Body / captions / lower thirds:** `font-family: 'Plus Jakarta Sans', sans-serif` — weight 400-600
 
-### Palette (Dark Premium)
-```css
-:root {
-  --bg: #0d0d1f;           /* deep navy-black */
-  --bg-2: #14142a;         /* scene backgrounds */
-  --accent: #7C6FE0;       /* purple accent */
-  --accent-2: #E06F9A;     /* pink accent */
-  --energy: #9EF0C8;       /* energy green for wins */
-  --text: #ffffff;
-  --text-dim: rgba(255,255,255,0.7);
-  --text-muted: rgba(255,255,255,0.5);
-}
+**Prompt templates by workflow:**
+
+| Workflow | ElevenLabs prompt |
+|----------|-------------------|
+| testimonial | "Lo-fi upbeat instrumental, warm jazzy piano, vinyl crackle, positive energy, 88 BPM, no lyrics, for AI corporate training" |
+| teaser | "Energetic upbeat electronic, punchy kick drum, rising synths, 120 BPM, no lyrics, for event teaser" |
+| trailer | "Cinematic orchestral build, emotional strings, powerful swells, 90 BPM, no lyrics, for brand trailer" |
+| community | "Warm acoustic guitar, gentle piano, uplifting and heartfelt, 75 BPM, no lyrics, for community story" |
+
+**Requires:** `ELEVENLABS_API_KEY` env var in HF Space secrets (Settings → Variables).
+
+## YUE FALLBACK (when ElevenLabs key not available)
+
+```python
+# YuE: open-source music generation from multimodal-art-projection
+# GitHub: https://github.com/multimodal-art-projection/YuE
+# Use via Hugging Face Inference API (no local GPU needed)
+import requests, os
+
+def generate_music_yue(prompt: str, duration_seconds: int = 35) -> bytes:
+    """
+    YuE music generation via HF Inference API.
+    Falls back to this when ELEVENLABS_API_KEY is not set.
+    """
+    HF_TOKEN = os.environ.get("HF_TOKEN", "")
+    headers = {"Authorization": f"Bearer {HF_TOKEN}"} if HF_TOKEN else {}
+    
+    # YuE model on HF Hub
+    url = "https://api-inference.huggingface.co/models/m-a-p/YuE-s1-7B-anneal-en-cot"
+    
+    payload = {
+        "inputs": prompt,
+        "parameters": {
+            "max_length": duration_seconds * 50,  # approximate token count
+            "num_return_sequences": 1,
+        }
+    }
+    
+    r = requests.post(url, headers=headers, json=payload, timeout=120)
+    if r.status_code == 200:
+        return r.content  # audio bytes
+    raise Exception(f"YuE generation failed: {r.status_code} {r.text[:200]}")
 ```
 
-### Visual style: Dark Premium (from nateherkai student-kit)
-- Deep bg #0d0d1f with radial glow centers
-- Space Grotesk 700-900 for display, Plus Jakarta Sans for body
-- Purple/pink gradient accents on key moments
-- Grain overlay for cinematic texture
-- `expo.out` for kinetic titles, `power3.out` for smooth entries, `back.out(1.7)` for stat pops
+**YuE prompt format:**
+```
+[Genre: Lo-fi Hip Hop] [Mood: Upbeat, Positive] [Instruments: Piano, Drums, Bass]
+Background instrumental music for corporate AI training video. No lyrics. 88 BPM.
+```
 
-## CAPTION SIZES — 2X KINETIC (Dee's testimonial style)
+## DEE FERDINAND BRAND FONTS
 
-**Testimonial video is KINETIC style = BIG, BOLD, MOVING**
+```html
+<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">
+```
+
+- **ALL display titles / kinetic captions:** `font: 900 Xpx 'Space Grotesk', sans-serif`
+- **Body / quotes / lower thirds / UI text:** `font: 600 Xpx 'Plus Jakarta Sans', sans-serif`
+
+## CAPTION SIZES — 2X KINETIC (Dee's style)
 
 | Element | Size | Weight | Font |
 |---------|------|--------|------|
-| Hook main | **160px** | 900 | Space Grotesk |
-| Hook sub | **88px** | 700 | Plus Jakarta Sans |
-| Stat counter | **140px** | 900 | Space Grotesk |
-| Energy cuts | **128px** | 900 | Space Grotesk |
+| Hook line 1 | **160px** | 900 | Space Grotesk |
+| Hook line 2 (accent color) | **160px** | 900 | Space Grotesk |
+| Hook sub | **72px** | 700 | Plus Jakarta Sans |
+| Stat counter | **160px** | 900 | Space Grotesk |
+| Energy cut captions | **128-144px** | 900 | Space Grotesk |
 | CTA main | **112px** | 900 | Space Grotesk |
-| Testimonial quote | **72px** | 600 | Plus Jakarta Sans italic |
+| Testimonial quote | **72px italic** | 600 | Plus Jakarta Sans |
 | Lower third title | **40px** | 700 | Plus Jakarta Sans |
-| Lower third sub | **24px** | 400 | Plus Jakarta Sans |
+| Lower third subtitle | **24px** | 400 | Plus Jakarta Sans |
 | Brand end name | **80px** | 800 | Space Grotesk |
-| Brand end tag | **40px** | 500 | Plus Jakarta Sans |
-| Brand bar persistent | **26px** | 700 | Space Grotesk |
-
-## KINETIC MOTION PATTERNS
-
-From motion-principles.md (nateherkai student-kit):
-- Vary eases per scene — never same ease twice in a row
-- Speed: 0.15-0.25s = energy/urgency, 0.3-0.5s = professional, 0.6-1.0s = cinematic
-- Direction variety: `y: -60` (from above), `x: -80` (from left), `scale: 0.7` (scale in), `autoAlpha` only (no translate)
-- Stagger text: multiple spans/divs, `{ stagger: 0.08 }` for word-by-word feel
-- Build/breathe/resolve: stagger in → ambient drift → fast exit
-
-### Kinetic title entry patterns (vary per scene)
-```javascript
-// Pattern A: slam from above (hook)
-tl.from("#title", { y: -80, autoAlpha: 0, duration: 0.25, ease: "expo.out" }, 0.2);
+| Brand end tagline | **40px** | 500 | Plus Jakarta Sans |
 
-// Pattern B: scale pop (stat)
-tl.from("#stat", { scale: 0.6, autoAlpha: 0, duration: 0.4, ease: "back.out(2.5)" }, 0.3);
+## DARK PREMIUM PALETTE
 
-// Pattern C: slide from left (energy)
-tl.from("#cap", { x: -100, autoAlpha: 0, duration: 0.3, ease: "power4.out" }, 0.2);
+```css
+:root {
+  --bg: #0d0d1f;           /* deep navy-black canvas */
+  --accent: #7C6FE0;       /* purple accent */
+  --accent-2: #E06F9A;     /* pink accent */
+  --energy: #9EF0C8;       /* teal-green for wins/energy */
+  --text: #ffffff;
+  --text-dim: rgba(255,255,255,0.72);
+  --text-muted: rgba(255,255,255,0.48);
+}
+```
 
-// Pattern D: letter stagger (CTA)
-tl.from(".word", { y: 60, autoAlpha: 0, duration: 0.35, stagger: 0.08, ease: "power3.out" }, 0.2);
+## MOTION VOCABULARY (from nateherkai motion-principles.md)
 
-// Pattern E: opacity only (testimonial quote — calm contrast)
-tl.from("#quote", { autoAlpha: 0, duration: 0.6, ease: "sine.inOut" }, 0.5);
-```
+Vary eases — NEVER use same ease twice in a row.
 
-### Transition patterns (from aisoc-hype + launch-video)
-```javascript
-// Zoom-through (dramatic, between big scenes)
-tl.to("#s1", { autoAlpha: 0, scale: 1.25, duration: 0.35, ease: "power4.inOut" }, 3.95);
-tl.fromTo("#s2", { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, duration: 0.35, ease: "power4.inOut" }, 3.95);
+| Moment | GSAP ease | Duration | Feel |
+|--------|-----------|----------|------|
+| Hook title slam | `expo.out` | 0.20-0.25s | Kinetic energy |
+| Stat pop | `back.out(2.5)` | 0.40-0.50s | Bouncy confidence |
+| Energy cut caption | `power4.out` | 0.22-0.28s | Fast/decisive |
+| CTA slide up | `power3.out` | 0.45-0.55s | Professional |
+| Testimonial quote | `sine.inOut` | 0.55-0.65s | Calm contrast |
+| Brand end stagger | `power3.out` | 0.35-0.45s | Composed |
 
-// Push-slide left (editorial, between cuts)
-tl.to("#s1", { autoAlpha: 0, xPercent: -18, duration: 0.3, ease: "power2.inOut" }, 3.95);
-tl.fromTo("#s2", { autoAlpha: 0, xPercent: 18 }, { autoAlpha: 1, xPercent: 0, duration: 0.3, ease: "power2.inOut" }, 3.95);
+**Direction variety (never all the same):**
+- Slam from above: `y: -100`
+- Slide from left: `x: -120`
+- Slide from right: `x: 120`
+- Scale pop: `scale: 0.55`
+- Opacity only: `autoAlpha: 0` (no translate) — for calm moments
 
-// Blur crossfade (wind-down, into CTA)
-tl.to("#s4", { autoAlpha: 0, filter: "blur(16px)", scale: 1.05, duration: 0.6, ease: "sine.inOut" }, 15.8);
-tl.fromTo("#s5", { autoAlpha: 0, filter: "blur(16px)", scale: 0.95 }, { autoAlpha: 1, filter: "blur(0px)", scale: 1, duration: 0.6, ease: "sine.inOut" }, 15.8);
+## TRANSITION PATTERNS (from coleam00 transitions.md)
 
-// Hard cut (energy/disruption) — just swap data-start with 0 overlap
-```
+Rule: EXIT ANIMATIONS ARE BANNED except on final scene. The transition IS the exit.
+Incoming scene's entrance fires at transition midpoint, outgoing scene fades simultaneously.
 
-## GLASS CARD RECIPE (from robonuggets)
-```css
-.glass {
-  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.08) 100%),
-              rgba(20,22,30,0.28);
-  border: 1px solid rgba(255,255,255,0.18);
-  border-radius: 22px;
-  backdrop-filter: blur(24px) saturate(160%);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 16px 48px -12px rgba(0,0,0,0.5);
-}
+```javascript
+// Zoom-through (dramatic opener, hook→2)
+const T1 = 3.65; // transition start
+tl.to("#s1",  { autoAlpha: 0, scale: 1.3, duration: 0.35, ease: "power4.inOut" }, T1);
+tl.fromTo("#s2", { autoAlpha: 0, scale: 0.8 }, { autoAlpha: 1, scale: 1, duration: 0.35, ease: "power4.inOut" }, T1);
+
+// Push-slide left (editorial, proof→3)
+const T2 = 7.65;
+tl.to("#s2",  { autoAlpha: 0, xPercent: -18, duration: 0.32, ease: "power2.inOut" }, T2);
+tl.fromTo("#s3", { autoAlpha: 0, xPercent: 18 }, { autoAlpha: 1, xPercent: 0, duration: 0.32, ease: "power2.inOut" }, T2);
+
+// Blur crossfade (wind-down, testimonial→4)
+const T3 = 15.65;
+tl.to("#s3",  { autoAlpha: 0, filter: "blur(14px)", scale: 1.04, duration: 0.45, ease: "sine.inOut" }, T3);
+tl.fromTo("#s4a", { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.25 }, T3 + 0.2);
+
+// Hard cut (energy B-roll — disruption intentional)
+// Just stagger data-start values with NO overlap (different tracks ok)
 ```
 
-## GRAIN OVERLAY (cinematic texture)
-```html
-<div id="grain" style="position:absolute;inset:0;pointer-events:none;z-index:99;overflow:hidden;">
-  <div style="position:absolute;top:-50%;left:-50%;width:200%;height:200%;opacity:0.06;
-              background:url('data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.65\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E');
-              animation:grain 0.5s steps(1) infinite;"></div>
-</div>
-<style>@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}50%{transform:translate(-10%,5%)}70%{transform:translate(0,10%)}90%{transform:translate(10%,5%)}}</style>
-```
+## GLASS CARD LOWER THIRD (robonuggets recipe)
 
-## LOWER THIRD (glass card style)
 ```html
-<div id="lt" class="clip" data-start="4.6" data-duration="3.0" data-track-index="7"
+<div id="lt" class="clip" data-start="4.6" data-duration="2.9" data-track-index="8"
      style="position:absolute;bottom:180px;left:0;padding:0 0 0 56px;">
-  <div style="background:rgba(10,10,20,0.80);backdrop-filter:blur(16px) saturate(140%);
-              border-left:5px solid #7C6FE0;border-radius:0 14px 14px 0;
-              padding:16px 28px;display:inline-block;">
+  <div style="background:rgba(10,10,25,0.85);backdrop-filter:blur(20px) saturate(150%);
+              border-left:6px solid #7C6FE0;border-radius:0 16px 16px 0;
+              padding:18px 32px;display:inline-block;">
     <div style="font:700 40px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff;">Purbasari Indonesia</div>
-    <div style="font:400 24px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.65);
-                margin-top:6px;">AI Training · Juni 2026</div>
+    <div style="font:400 24px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.62);
+                margin-top:6px;">AI Training · 2026</div>
   </div>
 </div>
 ```
 
-## WORKING MUSIC URLS (server-accessible)
-
-Use bensound.com free tier or freesound direct links — avoid FMA (404/503):
-
 ```javascript
-// In music.js — use these as fallback chain:
-const TRACKS = [
-  // Try 1: bensound (free tier, requires attribution in metadata only)
-  'https://www.bensound.com/bensound-music/bensound-ukulele.mp3',
-  // Try 2: ccMixter direct
-  'https://dig.ccmixter.org/files/airtone/56796/airtone-_retro_.mp3',
-  // Fallback: generate silence with ffmpeg (already implemented)
-];
+// Slide in from left, auto-exit via next transition (NOT gsap.to exit)
+tl.from("#lt", { x: -400, autoAlpha: 0, duration: 0.4, ease: "power3.out" }, 4.6);
+// NO exit tween — lt will be covered by next scene transition
 ```
 
-## COMPLETE CORRECT STRUCTURE (9:16 · 1080×1920)
+## COMPLETE CORRECT TEMPLATE
 
 ```html
 <!DOCTYPE html>
 <html><head><meta charset="utf-8">
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;900&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+<link href="[Google Fonts Space Grotesk + Plus Jakarta Sans]" 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:#0d0d1f;overflow:hidden; }
-#root { position:relative;width:1080px;height:1920px;overflow:hidden;background:#0d0d1f; }
-.sc { position:absolute;inset:0; } /* scene base */
+<style>* {margin:0;padding:0;box-sizing:border-box} body {background:#0d0d1f;overflow:hidden}
+#root {position:relative;width:1080px;height:1920px;overflow:hidden;background:#0d0d1f}
+.sc {position:absolute;inset:0}
 </style></head><body>
-<div id="root" data-composition-id="COMP_ID" data-start="0" data-width="1080" data-height="1920">
-
-  <!-- Scene: always wrap video in div, never animate video directly -->
+<div id="root"
+     data-composition-id="COMP_ID"
+     data-start="0"
+     data-duration="30"
+     data-width="1080"
+     data-height="1920">
+
+  <!-- Scene: timed wrapper -->
   <div id="s1" class="clip sc" data-start="0" data-duration="4" data-track-index="0">
-    <div id="s1vw" style="position:absolute;inset:0">
-      <!-- NO muted ATTRIBUTE when you want subject audio -->
-      <video data-start="0" data-duration="4" data-track-index="1" data-volume="0.9"
-             src="./assets/clip.MOV" playsinline
+    <!-- Video: NO muted for subject voice. Wrap in div. -->
+    <div style="position:absolute;inset:0">
+      <video data-start="0" data-duration="4" data-track-index="1"
+             data-volume="0.88" src="./assets/clip.MOV" playsinline
              style="width:100%;height:100%;object-fit:cover;"></video>
     </div>
   </div>
 
-  <!-- Caption: class=clip is mandatory -->
-  <div id="cap" class="clip" data-start="0.3" data-duration="3.5" data-track-index="2"
-       style="position:absolute;bottom:400px;left:0;right:0;padding:0 56px;text-align:center;
-              font:900 160px/1.05 'Space Grotesk',sans-serif;color:#fff;
-              text-shadow:0 4px 32px rgba(0,0,0,0.9);">Big Title</div>
+  <!-- Caption: class=clip mandatory -->
+  <div id="cap" class="clip" data-start="0.2" data-duration="3.5" data-track-index="2"
+       style="position:absolute;bottom:400px;left:0;right:0;padding:0 56px;
+              text-align:center;font:900 160px/1.0 'Space Grotesk',sans-serif;
+              color:#fff;text-shadow:0 6px 40px rgba(0,0,0,0.95);">Hook</div>
 
-  <!-- Music: no muted, no script control -->
+  <!-- Music: instrumental, force_instrumental generated by ElevenLabs -->
   <audio data-start="0" data-duration="30" data-track-index="50"
-         data-volume="0.25" src="./assets/music.mp3"></audio>
+         data-volume="0.10" src="./assets/music.mp3"></audio>
 
   <script>
     const tl = gsap.timeline({ paused: true });
-    tl.from("#cap", { y: -80, autoAlpha: 0, duration: 0.25, ease: "expo.out" }, 0.3);
-    // CRITICAL: extend to prevent black frames
-    tl.to({}, { duration: 30 }, 0);
-    // CRITICAL: key must match data-composition-id exactly
+
+    // Entrance (varied eases, never same twice)
+    tl.from("#cap", { y: -100, autoAlpha: 0, duration: 0.22, ease: "expo.out" }, 0.2);
+
+    // CRITICAL: extend to prevent cutoff / black frames
+    tl.set({}, {}, 30);  // use set not to()
+
+    // CRITICAL: key = data-composition-id exactly
     window.__timelines = window.__timelines || {};
     window.__timelines["COMP_ID"] = tl;
   </script>
@@ -227,6 +280,16 @@ body { background:#0d0d1f;overflow:hidden; }
 ```
 
 ## RENDER COMMAND
+
 ```bash
-PRODUCER_HEADLESS_SHELL_PATH=/usr/bin/chromium npx hyperframes render . -o output.mp4 -w 1 --fps 30 --quality standard
+PRODUCER_HEADLESS_SHELL_PATH=/usr/bin/chromium \
+  npx hyperframes render . -o ./renders/output.mp4 -w 1 --fps 30 --quality standard
 ```
+
+## MUSIC GENERATION WATERFALL
+
+1. **ElevenLabs** (`client.music.compose()`) — highest quality, requires API key
+2. **YuE via HF Inference** — open source, requires HF_TOKEN, slower
+3. **ffmpeg silence fallback** — always available, no music
+
+Set `ELEVENLABS_API_KEY` in HF Space secrets for production quality music.

workflows/index.js

@@ -1,280 +1,264 @@
 // workflows/index.js — Dee Ferdinand Video Studio
-// Correct HyperFrames compositions with:
-// - Space Grotesk (headings) + Plus Jakarta Sans (body)
-// - 2x kinetic caption sizes
-// - Varied GSAP motion (expo.out hooks, back.out stats, power4 energy, sine CTA)
-// - Varied transitions (zoom-through, push-slide, blur crossfade)
-// - NO muted on video elements (audio extraction fix)
-// - tl.to({},{duration:TOTAL},0) prevents black frames
-
-function mediaEl(m, start, duration, trackIdx, volume = 0) {
-  if (!m) return '<div style="position:absolute;inset:0;background:#0d0d1f;"></div>';
-  if (m.mime?.startsWith('video/')) {
-    // CRITICAL: no muted attribute when volume > 0 — muted blocks audio extraction
-    return `<div id="vw-${trackIdx}" style="position:absolute;inset:0">
-      <video data-start="${start}" data-duration="${duration}" data-track-index="${trackIdx}"
-             data-volume="${volume}" src="${m.rel}" playsinline
-             style="width:100%;height:100%;object-fit:cover;"></video>
-    </div>`;
-  }
-  return `<img src="${m.rel}" alt="" style="width:100%;height:100%;object-fit:cover;transform-origin:center center;">`;
-}
+// Fixed: black frames, cutoff, timing gaps, exit animation ban, autoAlpha
+// Audio: no muted on video, research-backed data-volume levels
+// Music: ElevenLabs lo-fi upbeat (primary) → YuE (fallback) → silence
+
+const FONTS = `<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">`;
+const GSAP = `<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>`;
 
-const FONTS = `<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap" rel="stylesheet">`;
-const GSAP_CDN = `<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>`;
-const BASE_CSS = `
-* { margin:0;padding:0;box-sizing:border-box; }
-body { background:#0d0d1f;overflow:hidden; }
-#root { position:relative;width:VAR_WPXpx;height:VAR_HPXpx;overflow:hidden;background:#0d0d1f; }
-.sc { position:absolute;inset:0; }
-@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}50%{transform:translate(-10%,5%)}70%{transform:translate(0,10%)}90%{transform:translate(10%,5%)}}
-`;
-
-const GRAIN = `<div id="grain" style="position:absolute;inset:0;pointer-events:none;z-index:98;overflow:hidden;">
+const GRAIN = `<div style="position:absolute;inset:0;pointer-events:none;z-index:98;overflow:hidden;">
   <div style="position:absolute;top:-50%;left:-50%;width:200%;height:200%;opacity:0.065;
     background:url('data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.65\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E');
     animation:grain 0.5s steps(1) infinite;"></div>
 </div>`;
 
-// ── TESTIMONIAL 30s ──────────────────────────────────────────────────────────
+function mediaEl(m, start, dur, tIdx, vol) {
+  if (!m) return '<div style="position:absolute;inset:0;background:#0d0d1f;"></div>';
+  if (m.mime?.startsWith('video/')) {
+    // NO muted — subject voice must come through. Framework controls via data-volume.
+    return `<div style="position:absolute;inset:0">
+      <video data-start="${start}" data-duration="${dur}" data-track-index="${tIdx}"
+             data-volume="${vol}" src="${m.rel}" playsinline
+             style="width:100%;height:100%;object-fit:cover;"></video></div>`;
+  }
+  return `<img src="${m.rel}" alt="" style="width:100%;height:100%;object-fit:cover;">` ;
+}
+
+// ── TESTIMONIAL 30s 9:16 ──────────────────────────────────────────────────────────
+// Timing: each scene overlaps the previous by 0.35s (transition window)
+// Track indices: each scene on unique track, captions on unique tracks
+// NO exit animations (rule: transition IS the exit)
 const testimonial = {
-  meta: {
-    name: 'Corporate Testimonial', icon: '\uD83C\uDFE2',
-    description: '30s kinetic testimonial. 9:16. Space Grotesk + Plus Jakarta Sans. 2x sizes.',
-    format: '9:16', duration: 30, music: 'corporate',
-  },
+  meta: { name: 'Corporate Testimonial', icon: '\uD83C\uDFE2',
+    description: '30s kinetic testimonial. 9:16. ElevenLabs lo-fi music.',
+    format: '9:16', duration: 30, music: 'lofi-upbeat' },
 
   buildHTML(media, config, compId, w, h, dur) {
-    const { clientName = 'AI Training', trainerName = 'Dee Ferdinand',
-      tagline = 'AI Corporate Trainer', website = 'deeferdinand.com' } = config;
+    const { clientName='AI Training', trainerName='Dee Ferdinand',
+      tagline='AI Corporate Trainer', website='deeferdinand.com' } = config;
     const vids = media.filter(m => m.mime?.startsWith('video/'));
     const imgs = media.filter(m => m.mime?.startsWith('image/'));
-    const pick = (i) => media[i % Math.max(media.length, 1)] || media[0];
-    const mVid = vids[0] || null; // testimonial video — use for scene 3
-    const mImg = (i) => imgs[i % Math.max(imgs.length, 1)] || pick(i);
-    const year = new Date().getFullYear();
-    const css = BASE_CSS.replace('VAR_WPX', w).replace('VAR_HPX', h);
+    const pick = (i) => media[i % Math.max(media.length,1)] || media[0];
+    const img = (i) => imgs[i % Math.max(imgs.length,1)] || pick(i);
+    const mVid = vids[0] || null;
+    const yr = new Date().getFullYear();
+
+    // Strict scene timing: NO gaps, transitions overlap by 0.35s on DIFFERENT tracks
+    // S1: 0-4s    S2: 3.65-8s (T1 at 3.65)    S3: 7.65-16.5s (T2 at 7.65)
+    // S4a: 15.85-18.5s  S4b: 18.2-21s  S4c: 20.7-23.2s
+    // S5: 22.85-28.5s (T3 at 22.85)   S6: 28.2-30.5s
+    // All captions on own tracks, gap from scene start: 0.2s
 
     return `<!DOCTYPE html>
-<html><head><meta charset="utf-8">${FONTS}${GSAP_CDN}
-<style>${css}
-/* Radial glow centers for depth */
-.glow-1 { position:absolute;width:600px;height:600px;border-radius:50%;
-  background:radial-gradient(ellipse,rgba(124,111,224,0.18) 0%,transparent 70%);
-  top:10%;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0; }
-.glow-2 { position:absolute;width:500px;height:500px;border-radius:50%;
-  background:radial-gradient(ellipse,rgba(224,111,154,0.14) 0%,transparent 70%);
-  bottom:15%;right:-100px;pointer-events:none;z-index:0; }
+<html><head><meta charset="utf-8">${FONTS}${GSAP}
+<style>
+* {margin:0;padding:0;box-sizing:border-box}
+body {background:#0d0d1f;overflow:hidden}
+#root {position:relative;width:${w}px;height:${h}px;overflow:hidden;background:#0d0d1f}
+.sc {position:absolute;inset:0}
+.glow-c {position:absolute;border-radius:50%;pointer-events:none}
+@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}30%{transform:translate(5%,-10%)}50%{transform:translate(-10%,5%)}70%{transform:translate(0,10%)}90%{transform:translate(10%,5%)}}
 </style></head><body>
-<div id="root" data-composition-id="${compId}" data-start="0" data-width="${w}" data-height="${h}">
+<div id="root" data-composition-id="${compId}" data-start="0" data-duration="${dur}" data-width="${w}" data-height="${h}">
 
-<!-- Persistent background depth glows -->
-<div class="glow-1"></div>
-<div class="glow-2"></div>
+<!-- Persistent depth glows -->
+<div class="glow-c" style="width:600px;height:600px;top:8%;left:50%;transform:translateX(-50%);
+  background:radial-gradient(ellipse,rgba(124,111,224,0.16) 0%,transparent 70%);"></div>
+<div class="glow-c" style="width:400px;height:400px;bottom:20%;right:-80px;
+  background:radial-gradient(ellipse,rgba(224,111,154,0.12) 0%,transparent 70%);"></div>
 
-<!-- ─── SCENE 1: HOOK 0–4s ──────────────────────────────── -->
+<!-- S1 HOOK 0-4s track:0 -->
 <div id="s1" class="clip sc" data-start="0" data-duration="4" data-track-index="0">
-  ${mediaEl(mImg(0), 0, 4, 1, 0)}
-  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.42);"></div>
+  ${mediaEl(img(0),0,4,1,0)}
+  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.40);"></div>
 </div>
-<!-- Hook: 2 lines, slam from above —expo.out— kinetic energy -->
-<div id="cap-h1" class="clip" data-start="0.2" data-duration="3.5" data-track-index="2"
-     style="position:absolute;bottom:580px;left:0;right:0;padding:0 56px;
-            text-align:center;font:900 160px/1.0 'Space Grotesk',sans-serif;color:#fff;
-            text-shadow:0 6px 40px rgba(0,0,0,0.95);letter-spacing:-3px;">Ini yang</div>
-<div id="cap-h2" class="clip" data-start="0.35" data-duration="3.3" data-track-index="3"
-     style="position:absolute;bottom:380px;left:0;right:0;padding:0 56px;
-            text-align:center;font:900 160px/1.0 'Space Grotesk',sans-serif;
-            color:#7C6FE0;text-shadow:0 6px 40px rgba(0,0,0,0.9);letter-spacing:-3px;">terjadi</div>
-<div id="cap-h3" class="clip" data-start="0.5" data-duration="3.1" data-track-index="4"
-     style="position:absolute;bottom:260px;left:0;right:0;padding:0 56px;
-            text-align:center;font:700 72px/1.2 'Plus Jakarta Sans',sans-serif;
-            color:rgba(255,255,255,0.80);">ketika tim belajar AI</div>
-
-<!-- ─── SCENE 2: PROOF 4–8s ─────────────────────────────── -->
-<div id="s2" class="clip sc" data-start="4" data-duration="4" data-track-index="5">
-  ${mediaEl(mImg(1), 4, 4, 6, 0)}
-  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.55);"></div>
+<div id="h1" class="clip" data-start="0.2" data-duration="3.5" data-track-index="2"
+  style="position:absolute;bottom:580px;left:0;right:0;padding:0 56px;text-align:center;
+    font:900 160px/1.0 'Space Grotesk',sans-serif;color:#fff;
+    text-shadow:0 6px 40px rgba(0,0,0,0.95);letter-spacing:-3px;">Ini yang</div>
+<div id="h2" class="clip" data-start="0.35" data-duration="3.3" data-track-index="3"
+  style="position:absolute;bottom:376px;left:0;right:0;padding:0 56px;text-align:center;
+    font:900 160px/1.0 'Space Grotesk',sans-serif;color:#7C6FE0;
+    text-shadow:0 6px 40px rgba(0,0,0,0.9);letter-spacing:-3px;">terjadi</div>
+<div id="h3" class="clip" data-start="0.52" data-duration="3.1" data-track-index="4"
+  style="position:absolute;bottom:260px;left:0;right:0;padding:0 56px;text-align:center;
+    font:700 72px/1.2 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.82);">ketika tim belajar AI</div>
+
+<!-- S2 PROOF 3.65-7.65s track:5 — overlaps S1 by 0.35s for zoom-through transition -->
+<div id="s2" class="clip sc" data-start="3.65" data-duration="4" data-track-index="5">
+  ${mediaEl(img(1),3.65,4,6,0)}
+  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.52);"></div>
 </div>
-<!-- Stat: scale pop —back.out— maximum impact -->
-<div id="cap-stat" class="clip" data-start="4.3" data-duration="3.4" data-track-index="7"
-     style="position:absolute;top:50%;left:0;right:0;transform:translateY(-55%);
-            text-align:center;color:#fff;">
+<div id="st" class="clip" data-start="3.95" data-duration="3.4" data-track-index="7"
+  style="position:absolute;top:50%;left:0;right:0;transform:translateY(-55%);text-align:center;color:#fff;">
   <div style="font:900 160px/1.0 'Space Grotesk',sans-serif;letter-spacing:-4px;
-              text-shadow:0 6px 40px rgba(0,0,0,0.9);">1,000+</div>
-  <div style="font:600 48px/1.2 'Plus Jakarta Sans',sans-serif;opacity:0.85;
-              margin-top:16px;">profesional terlatih</div>
-  <div style="font:400 30px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.55);
-              margin-top:10px;">sejak 2023</div>
+    text-shadow:0 6px 40px rgba(0,0,0,0.9);">1,000+</div>
+  <div style="font:600 48px/1.2 'Plus Jakarta Sans',sans-serif;opacity:0.85;margin-top:16px;">profesional terlatih</div>
+  <div style="font:400 30px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.55);margin-top:10px;">sejak 2023</div>
 </div>
-<!-- Lower third: glass card, slides from left -->
-<div id="lt" class="clip" data-start="4.6" data-duration="3.0" data-track-index="8"
-     style="position:absolute;bottom:180px;left:0;padding:0 0 0 56px;">
+<div id="lt" class="clip" data-start="4.2" data-duration="3.1" data-track-index="8"
+  style="position:absolute;bottom:180px;left:0;padding:0 0 0 56px;">
   <div style="background:rgba(10,10,25,0.85);backdrop-filter:blur(20px) saturate(150%);
-              border-left:6px solid #7C6FE0;border-radius:0 16px 16px 0;
-              padding:18px 32px;display:inline-block;">
+    border-left:6px solid #7C6FE0;border-radius:0 16px 16px 0;padding:18px 32px;display:inline-block;">
     <div style="font:700 40px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff;">${clientName}</div>
-    <div style="font:400 24px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.62);
-                margin-top:6px;">AI Training \u00b7 ${year}</div>
+    <div style="font:400 24px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.62);margin-top:6px;">AI Training \u00b7 ${yr}</div>
   </div>
 </div>
 
-<!-- ─── SCENE 3: TESTIMONIAL 8–16s ──────────────────────── -->
-<div id="s3" class="clip sc" data-start="8" data-duration="8" data-track-index="9">
+<!-- S3 TESTIMONIAL 7.65-16.5s track:9 -->
+<div id="s3" class="clip sc" data-start="7.65" data-duration="8.85" data-track-index="9">
   ${mVid
-    ? `<div style="position:absolute;inset:0;">
-    <!-- NO muted: subject voice audio needs to come through -->
-    <video data-start="8" data-duration="8" data-track-index="10" data-volume="0.88"
-           src="${mVid.rel}" playsinline
-           style="width:100%;height:100%;object-fit:cover;"></video>
-  </div>`
-    : `${mediaEl(mImg(2), 8, 8, 10, 0)}`
-  }
-  <!-- Gradient for caption readability -->
+    ? `<div style="position:absolute;inset:0">
+    <video data-start="7.65" data-duration="8.85" data-track-index="10"
+           data-volume="0.88" src="${mVid.rel}" playsinline
+           style="width:100%;height:100%;object-fit:cover;"></video></div>`
+    : `${mediaEl(img(2),7.65,8.85,10,0)}`}
   <div style="position:absolute;bottom:0;left:0;right:0;height:500px;
-              background:linear-gradient(transparent,rgba(0,0,0,0.80));"></div>
+    background:linear-gradient(transparent,rgba(0,0,0,0.82));"></div>
 </div>
-<!-- Quote: opacity only —sine.inOut— calm contrast to kinetic scenes -->
-<div id="cap-quote" class="clip" data-start="8.6" data-duration="7.1" data-track-index="11"
-     style="position:absolute;bottom:240px;left:0;right:0;padding:0 56px;
-            text-align:center;font:600 72px/1.3 'Plus Jakarta Sans',sans-serif;
-            color:#fff;text-shadow:0 4px 24px rgba(0,0,0,0.95);
-            font-style:italic;">
+<div id="q" class="clip" data-start="8.2" data-duration="7.7" data-track-index="11"
+  style="position:absolute;bottom:240px;left:0;right:0;padding:0 56px;text-align:center;
+    font:600 72px/1.3 'Plus Jakarta Sans',sans-serif;color:#fff;font-style:italic;
+    text-shadow:0 4px 24px rgba(0,0,0,0.95);">
   &ldquo;Saya pikir AI susah.<br>Ternyata langsung bisa!&rdquo;
 </div>
 
-<!-- ─── SCENE 4a: ENERGY CUT 1 — 16–18.5s ───────────────── -->
-<div id="s4a" class="clip sc" data-start="16" data-duration="2.5" data-track-index="12">
-  ${mediaEl(mImg(0), 16, 2.5, 13, 0)}
-  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.32);"></div>
-</div>
-<div id="cap-e1" class="clip" data-start="16.2" data-duration="2.1" data-track-index="14"
-     style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
-            font:900 128px/1.0 'Space Grotesk',sans-serif;color:#fff;
-            text-shadow:0 4px 24px rgba(0,0,0,0.9);letter-spacing:-2px;">80% hands-on</div>
-
-<!-- ─── SCENE 4b: ENERGY CUT 2 — 18.5–21s ───────────────── -->
-<div id="s4b" class="clip sc" data-start="18.5" data-duration="2.5" data-track-index="15">
-  ${mediaEl(mImg(1), 18.5, 2.5, 16, 0)}
-  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.32);"></div>
+<!-- ENERGY 4 cuts: each ~2s, hard cuts, different tracks -->
+<!-- S4a: 15.85-18.5s track:12 -->
+<div id="s4a" class="clip sc" data-start="15.85" data-duration="2.65" data-track-index="12">
+  ${mediaEl(img(0),15.85,2.65,13,0)}
+  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.30);"></div>
 </div>
-<div id="cap-e2" class="clip" data-start="18.7" data-duration="2.1" data-track-index="17"
-     style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
-            font:900 128px/1.0 'Space Grotesk',sans-serif;color:#fff;
-            text-shadow:0 4px 24px rgba(0,0,0,0.9);letter-spacing:-2px;">Langsung<br>praktek</div>
-
-<!-- ─── SCENE 4c: ENERGY CUT 3 — 21–23s ─────────────────── -->
-<div id="s4c" class="clip sc" data-start="21" data-duration="2" data-track-index="18">
-  ${mediaEl(mImg(2), 21, 2, 19, 0)}
-  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.32);"></div>
+<div id="e1" class="clip" data-start="16.05" data-duration="2.3" data-track-index="14"
+  style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
+    font:900 128px/1.0 'Space Grotesk',sans-serif;color:#fff;
+    text-shadow:0 4px 24px rgba(0,0,0,0.9);letter-spacing:-2px;">80%<br>hands-on</div>
+
+<!-- S4b: 18.2-21s track:15 -->
+<div id="s4b" class="clip sc" data-start="18.2" data-duration="2.8" data-track-index="15">
+  ${mediaEl(img(1),18.2,2.8,16,0)}
+  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.30);"></div>
 </div>
-<div id="cap-e3" class="clip" data-start="21.2" data-duration="1.6" data-track-index="20"
-     style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
-            font:900 144px/1.0 'Space Grotesk',sans-serif;color:#9EF0C8;
-            text-shadow:0 4px 24px rgba(0,0,0,0.9);letter-spacing:-2px;">Real<br>output \u2713</div>
-
-<!-- ─── SCENE 5: CTA 23–28s ──────────────────────────────── -->
-<div id="s5" class="clip sc" data-start="23" data-duration="5" data-track-index="21">
-  ${mediaEl(mImg(0), 23, 5, 22, 0)}
-  <div style="position:absolute;inset:0;background:rgba(5,3,18,0.72);"></div>
+<div id="e2" class="clip" data-start="18.4" data-duration="2.4" data-track-index="17"
+  style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
+    font:900 128px/1.0 'Space Grotesk',sans-serif;color:#fff;
+    text-shadow:0 4px 24px rgba(0,0,0,0.9);letter-spacing:-2px;">Langsung<br>praktek</div>
+
+<!-- S4c: 20.7-23.2s track:18 -->
+<div id="s4c" class="clip sc" data-start="20.7" data-duration="2.5" data-track-index="18">
+  ${mediaEl(img(2),20.7,2.5,19,0)}
+  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.30);"></div>
 </div>
-<div id="cap-cta1" class="clip" data-start="23.3" data-duration="4.4" data-track-index="23"
-     style="position:absolute;top:34%;left:0;right:0;padding:0 56px;
-            text-align:center;font:900 112px/1.15 'Space Grotesk',sans-serif;
-            color:#fff;letter-spacing:-2px;text-shadow:0 4px 32px rgba(0,0,0,0.9);">
-  Training AI<br>untuk tim kamu?
+<div id="e3" class="clip" data-start="20.9" data-duration="2.1" data-track-index="20"
+  style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
+    font:900 144px/1.0 'Space Grotesk',sans-serif;color:#9EF0C8;
+    text-shadow:0 4px 24px rgba(0,0,0,0.9);letter-spacing:-2px;">Real<br>output \u2713</div>
+
+<!-- S5 CTA 22.85-28.5s track:21 -->
+<div id="s5" class="clip sc" data-start="22.85" data-duration="5.65" data-track-index="21">
+  ${mediaEl(img(0),22.85,5.65,22,0)}
+  <div style="position:absolute;inset:0;background:rgba(5,3,18,0.70);"></div>
 </div>
-<div id="cap-cta2" class="clip" data-start="25.2" data-duration="2.5" data-track-index="24"
-     style="position:absolute;top:59%;left:0;right:0;padding:0 56px;
-            text-align:center;font:500 44px/1.2 'Plus Jakarta Sans',sans-serif;
-            color:rgba(255,255,255,0.78);">DM \u00b7 atau klik link di bio</div>
-
-<!-- ─── SCENE 6: BRAND END CARD 28–30s ──────────────────── -->
-<div id="s6" class="clip sc" data-start="28" data-duration="2" data-track-index="25"
-     style="background:linear-gradient(135deg,#0d0d1f 0%,#1a1045 50%,#0d0d1f 100%);">
-  <div style="position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(124,111,224,0.28) 0%,transparent 65%);"></div>
+<div id="c1" class="clip" data-start="23.1" data-duration="5.1" data-track-index="23"
+  style="position:absolute;top:34%;left:0;right:0;padding:0 56px;text-align:center;
+    font:900 112px/1.15 'Space Grotesk',sans-serif;color:#fff;
+    letter-spacing:-2px;text-shadow:0 4px 32px rgba(0,0,0,0.9);">Training AI<br>untuk tim kamu?</div>
+<div id="c2" class="clip" data-start="25" data-duration="3.15" data-track-index="24"
+  style="position:absolute;top:59%;left:0;right:0;padding:0 56px;text-align:center;
+    font:500 44px/1.2 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.78);">DM \u00b7 atau klik link di bio</div>
+
+<!-- S6 BRAND END 28.2-30.5s track:25 -->
+<div id="s6" class="clip sc" data-start="28.2" data-duration="2.3" data-track-index="25"
+  style="background:linear-gradient(135deg,#0d0d1f 0%,#1a1045 50%,#0d0d1f 100%);">
+  <div style="position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(124,111,224,0.26) 0%,transparent 65%);"></div>
 </div>
-<div id="en" class="clip" data-start="28.2" data-duration="1.8" data-track-index="26"
-     style="position:absolute;top:42%;left:0;right:0;text-align:center;
-            font:800 80px/1.1 'Space Grotesk',sans-serif;color:#fff;">${trainerName}</div>
-<div id="et" class="clip" data-start="28.4" data-duration="1.6" data-track-index="27"
-     style="position:absolute;top:52%;left:0;right:0;text-align:center;
-            font:500 40px/1.2 'Plus Jakarta Sans',sans-serif;color:#9990ee;">${tagline}</div>
-<div id="ew" class="clip" data-start="28.6" data-duration="1.4" data-track-index="28"
-     style="position:absolute;top:59%;left:0;right:0;text-align:center;
-            font:400 28px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.48);">${website}</div>
-
-<!-- Music -->
+<div id="en" class="clip" data-start="28.4" data-duration="2.1" data-track-index="26"
+  style="position:absolute;top:42%;left:0;right:0;text-align:center;
+    font:800 80px/1.1 'Space Grotesk',sans-serif;color:#fff;">${trainerName}</div>
+<div id="et" class="clip" data-start="28.6" data-duration="1.9" data-track-index="27"
+  style="position:absolute;top:52%;left:0;right:0;text-align:center;
+    font:500 40px/1.2 'Plus Jakarta Sans',sans-serif;color:#9990ee;">${tagline}</div>
+<div id="ew" class="clip" data-start="28.8" data-duration="1.7" data-track-index="28"
+  style="position:absolute;top:59%;left:0;right:0;text-align:center;
+    font:400 28px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.48);">${website}</div>
+
+<!-- Music: lo-fi upbeat, generated by ElevenLabs -->
+<!-- Volume 0.10 during energy/CTA, see audio-design.md -->
 <audio data-start="0" data-duration="${dur}" data-track-index="50"
-       data-volume="0.22" src="./assets/music.mp3"></audio>
+       data-volume="0.10" src="./assets/music.mp3"></audio>
 
-<!-- Grain overlay -->
 ${GRAIN}
 
-<!-- Persistent brand bar -->
+<!-- Persistent brand bar (not a clip — always visible) -->
 <div style="position:absolute;bottom:0;left:0;right:0;padding:20px 56px 34px;
-            background:linear-gradient(transparent,rgba(0,0,0,0.65));z-index:97;">
+  background:linear-gradient(transparent,rgba(0,0,0,0.65));z-index:97;">
   <span style="font:700 26px/1 'Space Grotesk',sans-serif;color:#fff;">${trainerName}</span>
-  <span style="font:400 17px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.58);
-               margin-left:8px;">\u00b7 ${tagline}</span>
+  <span style="font:400 17px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.58);margin-left:8px;">\u00b7 ${tagline}</span>
 </div>
 
 <script>
   const tl = gsap.timeline({ paused: true });
 
-  // S1 HOOK — slam from above (expo.out = fast, kinetic energy)
-  tl.from("#cap-h1", { y: -100, autoAlpha: 0, duration: 0.22, ease: "expo.out" }, 0.2);
-  tl.from("#cap-h2", { y: -100, autoAlpha: 0, duration: 0.22, ease: "expo.out" }, 0.35);
-  tl.from("#cap-h3", { y: 40, autoAlpha: 0, duration: 0.35, ease: "power3.out" }, 0.52);
-  // Zoom-through transition 1→2
-  tl.to("#s1", { autoAlpha: 0, scale: 1.3, duration: 0.35, ease: "power4.inOut" }, 3.65);
-
-  // S2 PROOF — scale pop stat (back.out = bouncy confidence)
-  tl.fromTo("#s2", { autoAlpha: 0, scale: 0.85 }, { autoAlpha: 1, scale: 1, duration: 0.35, ease: "power4.inOut" }, 4);
-  tl.from("#cap-stat", { scale: 0.55, autoAlpha: 0, duration: 0.5, ease: "back.out(2.5)" }, 4.3);
-  tl.from("#lt", { x: -400, autoAlpha: 0, duration: 0.4, ease: "power3.out" }, 4.6);
-  tl.to("#lt", { x: -400, autoAlpha: 0, duration: 0.3, ease: "power2.in" }, 7.3);
-  // Push-slide transition 2→3
-  tl.to("#s2", { autoAlpha: 0, xPercent: -15, duration: 0.32, ease: "power2.inOut" }, 7.68);
-  tl.fromTo("#s3", { autoAlpha: 0, xPercent: 15 }, { autoAlpha: 1, xPercent: 0, duration: 0.32, ease: "power2.inOut" }, 7.68);
-
-  // S3 TESTIMONIAL — opacity only (sine.inOut = calm, contrast to kinetic)
-  tl.from("#cap-quote", { autoAlpha: 0, duration: 0.55, ease: "sine.inOut" }, 8.6);
-  tl.to("#cap-quote", { autoAlpha: 0, duration: 0.3 }, 15.3);
-  // Blur crossfade 3→4a
-  tl.to("#s3", { autoAlpha: 0, filter: "blur(12px)", scale: 1.04, duration: 0.45, ease: "sine.inOut" }, 15.55);
-
-  // S4a ENERGY — slide from left (power4.out = decisive)
-  tl.from("#s4a", { autoAlpha: 0, duration: 0.18 }, 16);
-  tl.from("#cap-e1", { x: -120, autoAlpha: 0, duration: 0.25, ease: "power4.out" }, 16.2);
-  tl.to("#s4a", { autoAlpha: 0, duration: 0.18 }, 18.32);
-
-  // S4b ENERGY — slide from right (variation)
-  tl.from("#s4b", { autoAlpha: 0, duration: 0.18 }, 18.5);
-  tl.from("#cap-e2", { x: 120, autoAlpha: 0, duration: 0.25, ease: "power4.out" }, 18.7);
-  tl.to("#s4b", { autoAlpha: 0, duration: 0.18 }, 20.82);
-
-  // S4c ENERGY — scale pop (variation, green energy color)
-  tl.from("#s4c", { autoAlpha: 0, duration: 0.15 }, 21);
-  tl.from("#cap-e3", { scale: 0.65, autoAlpha: 0, duration: 0.3, ease: "back.out(2.8)" }, 21.2);
-  tl.to("#s4c", { autoAlpha: 0, scale: 1.1, duration: 0.22, ease: "power2.in" }, 22.78);
-
-  // S5 CTA — slide up (power3.out)
-  tl.fromTo("#s5", { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.4 }, 23);
-  tl.from("#cap-cta1", { y: 80, autoAlpha: 0, duration: 0.5, ease: "power3.out" }, 23.3);
-  tl.from("#cap-cta2", { y: 50, autoAlpha: 0, duration: 0.45, ease: "power3.out" }, 25.2);
-  tl.to("#s5", { autoAlpha: 0, duration: 0.4 }, 27.6);
-
-  // S6 BRAND END CARD — stagger up
-  tl.from("#s6", { autoAlpha: 0, duration: 0.4 }, 28);
-  tl.from("#en", { y: 36, autoAlpha: 0, duration: 0.45, ease: "power3.out" }, 28.2);
-  tl.from("#et", { y: 28, autoAlpha: 0, duration: 0.4, ease: "power3.out" }, 28.4);
-  tl.from("#ew", { y: 20, autoAlpha: 0, duration: 0.35, ease: "power3.out" }, 28.6);
-
-  // CRITICAL: extend to full duration (prevents black frames)
-  tl.to({}, { duration: ${dur} }, 0);
-
-  // CRITICAL: key must match data-composition-id exactly
+  // S1 HOOK — slam from above (expo.out: kinetic, fast)
+  tl.from("#h1", { y: -100, autoAlpha: 0, duration: 0.22, ease: "expo.out" }, 0.2);
+  tl.from("#h2", { y: -100, autoAlpha: 0, duration: 0.22, ease: "expo.out" }, 0.35);
+  tl.from("#h3", { y: 40,   autoAlpha: 0, duration: 0.35, ease: "power3.out" }, 0.52);
+
+  // TRANSITION 1→2: Zoom-through (dramatic opener)
+  // Rule: NO exit animation on s1 content — transition handles the handoff
+  const T1 = 3.65;
+  tl.to("#s1",  { autoAlpha: 0, scale: 1.32, duration: 0.35, ease: "power4.inOut" }, T1);
+  tl.fromTo("#s2", { autoAlpha: 0, scale: 0.80 }, { autoAlpha: 1, scale: 1, duration: 0.35, ease: "power4.inOut" }, T1);
+
+  // S2 PROOF — scale pop (back.out: bouncy confidence)
+  tl.from("#st", { scale: 0.55, autoAlpha: 0, duration: 0.5,  ease: "back.out(2.5)" }, 3.95);
+  tl.from("#lt", { x: -400,    autoAlpha: 0, duration: 0.4,  ease: "power3.out"   }, 4.2);
+  // NO exit tween on #lt — transition covers it
+
+  // TRANSITION 2→3: Push-slide left (editorial)
+  const T2 = 7.65;
+  tl.to("#s2",  { autoAlpha: 0, xPercent: -18, duration: 0.32, ease: "power2.inOut" }, T2);
+  tl.fromTo("#s3", { autoAlpha: 0, xPercent: 18 }, { autoAlpha: 1, xPercent: 0, duration: 0.32, ease: "power2.inOut" }, T2);
+
+  // S3 TESTIMONIAL — opacity only (sine.inOut: calm, intentional contrast)
+  tl.from("#q",  { autoAlpha: 0, duration: 0.55, ease: "sine.inOut" }, 8.2);
+  // NO exit tween on #q — transition handles
+
+  // TRANSITION 3→4a: Blur crossfade (drift into energy)
+  const T3 = 15.85;
+  tl.to("#s3",  { autoAlpha: 0, filter: "blur(14px)", scale: 1.04, duration: 0.45, ease: "sine.inOut" }, T3);
+  tl.from("#s4a",  { autoAlpha: 0, duration: 0.22 }, T3 + 0.23);
+
+  // S4a ENERGY — slide from left (power4.out: decisive)
+  tl.from("#e1", { x: -120, autoAlpha: 0, duration: 0.25, ease: "power4.out" }, 16.05);
+
+  // S4b: Hard cut (disruption intentional) + slide from right
+  tl.from("#s4b",  { autoAlpha: 0, duration: 0.18 }, 18.2);
+  tl.from("#e2", { x: 120,  autoAlpha: 0, duration: 0.25, ease: "power4.out" }, 18.4);
+
+  // S4c: Hard cut + scale pop (energy green color)
+  tl.from("#s4c",  { autoAlpha: 0, duration: 0.15 }, 20.7);
+  tl.from("#e3", { scale: 0.60, autoAlpha: 0, duration: 0.3, ease: "back.out(2.8)" }, 20.9);
+
+  // TRANSITION 4→5: Hard cut into CTA
+  tl.from("#s5", { autoAlpha: 0, duration: 0.25 }, 22.85);
+  tl.from("#c1", { y: 80, autoAlpha: 0, duration: 0.5, ease: "power3.out" }, 23.1);
+  tl.from("#c2", { y: 50, autoAlpha: 0, duration: 0.45, ease: "power3.out" }, 25);
+
+  // TRANSITION 5→6: Brand end card
+  const T5 = 28.2;
+  tl.to("#s5",  { autoAlpha: 0, duration: 0.3 }, T5);
+  tl.from("#s6", { autoAlpha: 0, duration: 0.3 }, T5);
+  // Final scene IS allowed exit animations — but we fade in instead
+  tl.from("#en", { y: 36, autoAlpha: 0, duration: 0.45, ease: "power3.out" }, 28.4);
+  tl.from("#et", { y: 28, autoAlpha: 0, duration: 0.40, ease: "power3.out" }, 28.6);
+  tl.from("#ew", { y: 20, autoAlpha: 0, duration: 0.35, ease: "power3.out" }, 28.8);
+
+  // CRITICAL: extend timeline to prevent cutoff + black frames
+  // Use tl.set() not tl.to() — tl.to({},{duration:X}) can conflict
+  tl.set({}, {}, ${dur});
+
+  // CRITICAL: key MUST match data-composition-id exactly
   window.__timelines = window.__timelines || {};
   window.__timelines["${compId}"] = tl;
 </script>
@@ -282,26 +266,17 @@ ${GRAIN}
   },
 };
 
-// Teaser: 30s fast-cut
 const teaser = {
-  meta: { name: 'Event Teaser', icon: '\u26A1', description: '30s fast-cut teaser. 9:16.', format: '9:16', duration: 30, music: 'energetic' },
-  buildHTML(media, config, compId, w, h, dur) {
-    return testimonial.buildHTML(media, { ...config, clientName: config.clientName || 'COMING SOON' }, compId, w, h, dur);
-  },
+  meta: { name: 'Event Teaser', icon: '\u26A1', description: '30s fast-cut teaser. 9:16. ElevenLabs energetic.', format: '9:16', duration: 30, music: 'energetic' },
+  buildHTML(media, config, compId, w, h, dur) { return testimonial.buildHTML(media, config, compId, w, h, dur); },
 };
-
 const trailer = {
   meta: { name: 'Cinematic Trailer', icon: '\uD83C\uDFAC', description: '60s cinematic recap. 9:16.', format: '9:16', duration: 60, music: 'cinematic' },
-  buildHTML(media, config, compId, w, h, dur) {
-    return testimonial.buildHTML(media, config, compId, w, h, dur);
-  },
+  buildHTML(media, config, compId, w, h, dur) { return testimonial.buildHTML(media, config, compId, w, h, dur); },
 };
-
 const community = {
-  meta: { name: 'Community Story', icon: '\uD83E\uDD1D', description: '30s warm community. 9:16.', format: '9:16', duration: 30, music: 'warm' },
-  buildHTML(media, config, compId, w, h, dur) {
-    return testimonial.buildHTML(media, config, compId, w, h, dur);
-  },
+  meta: { name: 'Community Story', icon: '\uD83E\uDD1D', description: '30s warm community story. 9:16.', format: '9:16', duration: 30, music: 'warm' },
+  buildHTML(media, config, compId, w, h, dur) { return testimonial.buildHTML(media, config, compId, w, h, dur); },
 };
 
 export const WORKFLOWS = { testimonial, teaser, trailer, community };