`videos/daily/index.html`

80 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 50% 35%, #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: 88px; line-height: 1.06; text-align: center; max-width: 1500px; font-weight: 700; }
      .daily { font-size: 150px; font-weight:700; letter-spacing:-3px; }
      /* email signup mock */
      .signup { display:flex; margin-top:44px; border:2px solid #2b3a4d; border-radius:8px; overflow:hidden; }
      .signup .in { font-family:"Helvetica Neue",Arial,sans-serif; font-size:34px; color:#8fa3b8;
        padding:24px 34px; background:#0e1622; width:620px; text-align:left; }
      .signup .btn { font-family:"Helvetica Neue",Arial,sans-serif; font-size:30px; font-weight:700; color:#fff;
        background:#c8102e; padding:24px 44px; letter-spacing:2px; text-transform:uppercase; display:flex; align-items:center; }
      .free { display:inline-block; font-family:"Helvetica Neue",Arial,sans-serif; font-size:24px; letter-spacing:4px;
        text-transform:uppercase; color:#c8102e; border:1px solid #c8102e; padding:8px 20px; margin-top:30px; }
      .wordmark { font-weight:700; letter-spacing:-2px; }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="main" data-start="0" data-duration="11.7" data-width="1920" data-height="1080">

      <div id="s1" class="scene clip" data-start="0" data-duration="3.6" data-track-index="1">
        <div class="headline">The market moves before<br/>your <span class="red">first coffee.</span></div>
      </div>

      <div id="s2" class="scene clip" data-start="3.6" data-duration="4.4" data-track-index="1">
        <div class="kicker sans" style="margin-bottom:24px">Every Western CRE deal, each morning</div>
        <div class="daily">REN<span class="red">TV</span> Daily</div>
        <div class="signup">
          <div class="in">you@company.com</div>
          <div class="btn">Subscribe</div>
        </div>
        <div class="free" id="s2free">Free</div>
      </div>

      <div id="s3" class="scene clip" data-start="8" data-duration="3.7" data-track-index="1">
        <div class="kicker sans" style="margin-bottom:26px">The deals · the numbers · the edge</div>
        <div class="headline" style="font-size:66px">Subscribe at</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="11.7" 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:32, duration:0.9, ease:"power3.out"}, 0.3)
        .to("#s1", {opacity:0, duration:0.5}, 3.2);

      tl.fromTo("#s2", {opacity:0}, {opacity:1, duration:0.5}, 3.7)
        .from("#s2 .kicker", {opacity:0, y:14, duration:0.5}, 3.9)
        .from("#s2 .daily", {opacity:0, y:24, duration:0.8, ease:"power3.out"}, 4.2)
        .from("#s2 .signup", {opacity:0, y:26, duration:0.7}, 4.8)
        .from("#s2free", {scale:0.7, opacity:0, duration:0.5, ease:"back.out(2)"}, 5.5)
        .to("#s2", {opacity:0, duration:0.5}, 7.6);

      tl.fromTo("#s3", {opacity:0}, {opacity:1, duration:0.5}, 8.1)
        .from("#s3 .kicker", {opacity:0, y:14, duration:0.6}, 8.3)
        .from("#s3 .wordmark", {opacity:0, scale:0.9, duration:0.9, ease:"power3.out"}, 8.7);

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