Spaces:

AIgoose
/

hyperframes-video-studio

Configuration error

File size: 9,443 Bytes

<!DOCTYPE html>
<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 &nbsp;·&nbsp; 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;">
      &ldquo;PULL_QUOTE_TEXT&rdquo;</div>
    <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: 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 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="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;">&nbsp;·&nbsp; 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>