`videos/review/index.html`

83 lines
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <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; }
      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0a0e14; }
      body { font-family: "Georgia", "Times New Roman", serif; color: #f4f6f8; }
      .sans { font-family: "Helvetica Neue", Arial, sans-serif; }
      #root { position: relative; width: 1920px; height: 1080px; overflow: hidden;
        background: radial-gradient(1400px 900px at 55% 40%, #16202e 0%, #0a0e14 72%); }
      .scene { position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; opacity: 0; }
      .red { color: #c8102e; }
      .kicker { letter-spacing: 8px; text-transform: uppercase; font-size: 26px; color: #8fa3b8; }
      .headline { font-size: 90px; line-height: 1.06; text-align: center; max-width: 1500px; font-weight: 700; }
      .big { font-size: 220px; font-weight:700; letter-spacing:-4px; line-height:1; }
      .play { width:150px; height:150px; border-radius:50%; background:#c8102e; display:flex;
        align-items:center; justify-content:center; margin-bottom:34px; }
      .play::after { content:""; border-left:52px solid #fff; border-top:32px solid transparent;
        border-bottom:32px solid transparent; margin-left:14px; }
      .three span { font-family:"Helvetica Neue",Arial,sans-serif; font-size:42px; letter-spacing:6px;
        text-transform:uppercase; color:#b9c6d4; display:block; margin:14px 0; opacity:0; }
      .wordmark { font-weight:700; letter-spacing:-2px; }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="main" data-start="0" data-duration="17.4" data-width="1920" data-height="1080">

      <div id="s1" class="scene clip" data-start="0" data-duration="4.6" data-track-index="1">
        <div class="headline">It isn't just headlines.<br/>It's the <span class="red">people</span> behind them.</div>
      </div>

      <div id="s2" class="scene clip" data-start="4.6" data-duration="4.4" data-track-index="1">
        <div class="play" id="s2play"></div>
        <div class="big">The <span class="red">RE</span>view</div>
        <div class="kicker sans" style="margin-top:26px">Face to face with the dealmakers</div>
      </div>

      <div id="s3" class="scene clip" data-start="9" data-duration="4" data-track-index="1">
        <div class="three" style="text-align:center">
          <span>Interviews</span><span>Insight</span><span>The stories behind the numbers</span>
        </div>
      </div>

      <div id="s4" class="scene clip" data-start="13" data-duration="4.4" data-track-index="1">
        <div class="kicker sans" style="margin-bottom:26px">Watch The REview</div>
        <div class="headline" style="font-size:70px">Only on</div>
        <div class="wordmark" style="font-size:130px; margin-top:16px">REN<span class="red">TV</span>.com</div>
      </div>

      <audio id="vo" src=".media/narration.wav" data-start="0" data-duration="17.4" data-track-index="10" data-volume="1"></audio>
    </div>

    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });

      tl.fromTo("#s1", {opacity:0}, {opacity:1, duration:0.6}, 0.1)
        .from("#s1 .headline", {opacity:0, y:34, duration:0.9, ease:"power3.out"}, 0.3)
        .to("#s1", {opacity:0, duration:0.5}, 4.2);

      tl.fromTo("#s2", {opacity:0}, {opacity:1, duration:0.5}, 4.7)
        .from("#s2play", {scale:0.6, opacity:0, duration:0.6, ease:"back.out(2)"}, 4.8)
        .from("#s2 .big", {opacity:0, y:26, duration:0.8, ease:"power3.out"}, 5.1)
        .from("#s2 .kicker", {opacity:0, y:14, duration:0.6}, 5.6)
        .to("#s2", {opacity:0, duration:0.5}, 8.6);

      tl.fromTo("#s3", {opacity:0}, {opacity:1, duration:0.5}, 9.1)
        .to("#s3 .three span", {opacity:1, stagger:0.4, duration:0.5}, 9.3)
        .to("#s3", {opacity:0, duration:0.5}, 12.6);

      tl.fromTo("#s4", {opacity:0}, {opacity:1, duration:0.5}, 13.1)
        .from("#s4 .kicker", {opacity:0, y:14, duration:0.6}, 13.3)
        .from("#s4 .wordmark", {opacity:0, scale:0.9, duration:0.9, ease:"power3.out"}, 13.7);

      window.__timelines["main"] = tl;
    </script>
  </body>
</html>