Spaces:
Configuration error
Configuration error
AIGoose
fix(v3): burn captions in ffmpeg, denoise voice, jump-cut pauses, title card before footage, fix headline overlap
e7002b8 | <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; } | |
| .clip { position:absolute; } | |
| .sc { inset:0; } | |
| </style></head><body> | |
| <div id="root" | |
| data-composition-id="bright-studio-v3" | |
| data-start="0" | |
| data-duration="TOTAL_DUR" | |
| data-width="720" data-height="1280"> | |
| <!-- ── STYLE RULE: 4px navy left border always visible ────── --> | |
| <div style="position:absolute;top:0;left:0;width:4px;height:100%; | |
| 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 · DEE FERDINAND AI</div> | |
| <!-- ── 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 17px/1.3 'Plus Jakarta Sans',sans-serif; | |
| color:#1a2744;opacity:0.55;margin-top:4px;">PARTICIPANT_ROLE</div> | |
| </div> | |
| <!-- ── 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;"> | |
| “PULL_QUOTE_TEXT”</div> | |
| <div style="font:500 17px/1.3 'Plus Jakarta Sans',sans-serif; | |
| color:rgba(255,255,255,0.55);"> | |
| — PARTICIPANT_NAME · AI Transformation Series</div> | |
| </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 ✓</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 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 · 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 · 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 →</div> | |
| <!-- Music (CC0 hosted in repo assets) --> | |
| <audio src="../assets/music.mp3" | |
| data-start="0" data-duration="TOTAL_DUR" | |
| data-track-index="50" data-volume="0.10"></audio> | |
| <!-- Persistent brand bar --> | |
| <div style="position:absolute;bottom:0;left:4px;right:0; | |
| 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;"> · AI Corporate Trainer</span> | |
| </div> | |
| </div> | |
| <script> | |
| const tl = gsap.timeline({ paused: true }); | |
| 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); | |
| tl.from("#s2-lt", { x:-480, autoAlpha:0, duration:0.38, ease:"power3.out" }, 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); | |
| 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); | |
| 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.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-v3"] = tl; | |
| </script> | |
| </body></html> |