`videos/brand/index.html`

100 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 60% 30%, #16202e 0%, #0a0e14 70%); }
      .scene { position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; opacity: 0; }
      .red { color: #c8102e; }
      .wordmark { font-weight: 700; letter-spacing: -2px; }
      .kicker { letter-spacing: 8px; text-transform: uppercase; font-size: 26px; color: #8fa3b8; }
      .headline { font-size: 96px; line-height: 1.04; text-align: center; max-width: 1500px; font-weight: 700; }
      #ticker { position: absolute; left: 0; right: 0; bottom: 90px; display: flex; gap: 70px;
        justify-content: center; }
      .stat { text-align: center; }
      .stat .v { font-size: 60px; font-weight: 700; }
      .stat .l { font-size: 22px; letter-spacing: 3px; color: #8fa3b8; text-transform: uppercase; }
      .rule { width: 0; height: 3px; background: #c8102e; margin: 26px 0; }
      .sect { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; justify-content: center; max-width: 1500px; }
      .sect span { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 30px; letter-spacing: 4px;
        text-transform: uppercase; color: #b9c6d4; opacity: 0; }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="main" data-start="0" data-duration="14.4" data-width="1920" data-height="1080">

      <div id="s1" class="scene clip" data-start="0" data-duration="4" data-track-index="1">
        <div class="wordmark" style="font-size:180px">REN<span class="red">TV</span><span style="font-size:150px">.com</span></div>
        <div class="rule" id="s1rule"></div>
        <div class="kicker sans" id="s1est">Commercial Real Estate &middot; Since 1998</div>
      </div>

      <div id="s2" class="scene clip" data-start="4" data-duration="4" data-track-index="1">
        <div class="kicker sans" style="margin-bottom:34px">The Western U.S. Authority</div>
        <div class="headline">The name commercial real estate <span class="red">trusts.</span></div>
      </div>

      <div id="s3" class="scene clip" data-start="8" data-duration="3.4" data-track-index="1">
        <div class="headline" style="font-size:78px">From Los Angeles<br/>to the Mountain West</div>
        <div class="sect sans">
          <span>Financing</span><span>Leases</span><span>Development</span><span>Retail</span><span>Multifamily</span><span>Sales</span>
        </div>
      </div>

      <div id="s4" class="scene clip" data-start="11.4" data-duration="3" data-track-index="1">
        <div class="wordmark" style="font-size:150px">REN<span class="red">TV</span><span style="font-size:120px">.com</span></div>
        <div class="rule" id="s4rule" style="width:220px"></div>
        <div class="kicker sans" style="letter-spacing:12px; color:#f4f6f8">THE REGIONAL AUTHORITY</div>
      </div>

      <div id="ticker" class="sans clip" data-start="4" data-duration="7" data-track-index="2">
        <div id="tickerInner" style="display:flex; gap:70px; justify-content:center; width:100%">
          <div class="stat"><div class="v">23.1%</div><div class="l">LA Office Vac</div></div>
          <div class="stat"><div class="v red">5.2%</div><div class="l">IE Industrial Cap</div></div>
          <div class="stat"><div class="v">$124M</div><div class="l">Latest Deal</div></div>
        </div>
      </div>

      <audio id="vo" src=".media/narration.wav" data-start="0" data-duration="14.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 .wordmark", {scale:0.86, y:20, filter:"blur(8px)", duration:1.0, ease:"power3.out"}, 0.2)
        .to("#s1rule", {width:300, duration:0.8, ease:"power2.out"}, 0.9)
        .from("#s1est", {opacity:0, y:14, duration:0.7}, 1.2)
        .to("#s1", {opacity:0, duration:0.5}, 3.6);

      tl.fromTo("#s2", {opacity:0}, {opacity:1, duration:0.5}, 4.1)
        .from("#s2 .headline", {opacity:0, y:40, duration:0.9, ease:"power3.out"}, 4.2)
        .fromTo("#tickerInner", {opacity:0}, {opacity:1, duration:0.6}, 4.6)
        .from("#ticker .stat", {opacity:0, y:24, stagger:0.15, duration:0.6}, 4.8)
        .to("#s2", {opacity:0, duration:0.5}, 7.6);

      tl.fromTo("#s3", {opacity:0}, {opacity:1, duration:0.5}, 8.1)
        .from("#s3 .headline", {opacity:0, y:36, duration:0.8, ease:"power3.out"}, 8.2)
        .to("#s3 .sect span", {opacity:1, stagger:0.12, duration:0.4}, 8.9)
        .to("#s3", {opacity:0, duration:0.5}, 11.0)
        .to("#tickerInner", {opacity:0, duration:0.5}, 10.9)
        .set("#tickerInner", {opacity:0}, 11.4);

      tl.fromTo("#s4", {opacity:0}, {opacity:1, duration:0.6}, 11.5)
        .from("#s4 .wordmark", {scale:0.9, opacity:0, duration:0.9, ease:"power3.out"}, 11.6)
        .from("#s4 .kicker", {opacity:0, y:12, duration:0.9}, 12.2);

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