`videos/pitch/index.html`

59 lines
<!doctype html><html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=1920, height=1080" />
<title>RENTV — Advertising &amp; Media Plan</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
  body{margin:0;background:#070b10;font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
  #root{position:relative;width:1920px;height:1080px;overflow:hidden}
  .clip{position:absolute;inset:0}
  #bg{background:radial-gradient(120% 120% at 50% 0%,#0d1725 0%,#070b10 60%)}
  .shot{overflow:hidden}.simg{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;will-change:transform,opacity}
  .card{display:grid;place-items:center}.card.left{place-items:center start}
  .ci{text-align:center;padding:0 130px}.ci.wide{text-align:left;padding:0 160px;max-width:1400px}
  .tag{font-size:19px;letter-spacing:.36em;font-weight:600;color:#57b0ff;margin-bottom:18px}
  .card h1{margin:0;color:#f3f7fc;font-size:82px;font-weight:500;letter-spacing:-.01em;line-height:1.05}
  .card p{margin:20px 0 0;color:#8ea3b8;font-size:30px;font-weight:300}
  .stat{color:#fff;font-size:150px;font-weight:700;letter-spacing:-.02em;line-height:1}
  .statl{color:#8ea3b8;font-size:30px;font-weight:300;margin-top:20px;max-width:900px}
  .ci.wide h2{font-size:30px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 26px;font-weight:700}
  .ci.wide ul{margin:0;padding:0;list-style:none}
  .ci.wide li{color:#eef3f8;font-size:44px;font-weight:400;padding:12px 0 12px 40px;position:relative}
  .ci.wide li:before{content:'';position:absolute;left:0;top:26px;width:16px;height:16px;border-radius:4px;background:#57b0ff}
  .label{left:56px;bottom:60px;right:auto;top:auto;width:auto;height:auto}
  .li{display:flex}.li .txt{color:#fff;font-size:30px;font-weight:500;background:rgba(9,15,24,.9);padding:8px 18px;border-radius:10px}
</style></head><body>
  <div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="30.55" data-fps="30">
  <div id="bg" class="clip" data-start="0" data-duration="30.55" data-track-index="0"></div>
  <audio id="vo" src="assets/vo.m4a" data-start="0" data-volume="1"></audio>
  <section id="s0" class="clip card" data-start="0.000" data-duration="2.400" data-track-index="1"><div class="ci"><div class="tag" id="s0t">RENTV · GROWTH DECK</div><h1 id="s0h">Advertising &amp; Media Plan</h1><p id="s0p">How RENTV wins attention</p></div></section>
  <section id="s1" class="clip card left" data-start="2.400" data-duration="6.313" data-track-index="1"><div class="ci wide"><h2 id="s1h" style="color:#57b0ff">Channels — already connected</h2><ul><li id="s1i0">LinkedIn</li><li id="s1i1">X (Twitter)</li><li id="s1i2">Instagram</li></ul></div></section>
  <section id="s2" class="clip card left" data-start="8.713" data-duration="6.313" data-track-index="1"><div class="ci wide"><h2 id="s2h" style="color:#57b0ff">Paid amplifies the winners</h2><ul><li id="s2i0">Sponsored deal alerts</li><li id="s2i1">Conference promotion</li><li id="s2i2">Newsletter retargeting</li></ul></div></section>
  <section id="s3" class="clip card left" data-start="15.025" data-duration="6.313" data-track-index="1"><div class="ci wide"><h2 id="s3h" style="color:#57b0ff">Content engine (already produced)</h2><ul><li id="s3i0">Daily deals</li><li id="s3i1">Market Pulse</li><li id="s3i2">The REview video platform</li></ul></div></section>
  <div id="s4" class="clip shot" data-start="21.338" data-duration="6.313" data-track-index="2"><img id="s4i" class="simg" src="assets/social.png" alt="The social command center"></div>
  <div id="s4l" class="clip label" data-start="21.338" data-duration="6.313" data-track-index="3"><div class="li"><span class="txt">The social command center</span></div></div>
  <section id="s5" class="clip card" data-start="27.650" data-duration="2.900" data-track-index="1"><div class="ci"><h1 id="s5h">Readers → subscribers → registrations</h1></div></section>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });
    tl.from('#s0h',{y:34,autoAlpha:0,duration:0.6,ease:'power3.out'},0.150);
    tl.from('#s0p',{y:20,autoAlpha:0,duration:0.5},0.350);
    tl.from('#s1h',{x:-24,autoAlpha:0,duration:0.5,ease:'power3.out'},2.500);
    tl.from('#s1i0',{x:-20,autoAlpha:0,duration:0.4},2.750);
    tl.from('#s1i1',{x:-20,autoAlpha:0,duration:0.4},3.030);
    tl.from('#s1i2',{x:-20,autoAlpha:0,duration:0.4},3.310);
    tl.from('#s2h',{x:-24,autoAlpha:0,duration:0.5,ease:'power3.out'},8.813);
    tl.from('#s2i0',{x:-20,autoAlpha:0,duration:0.4},9.063);
    tl.from('#s2i1',{x:-20,autoAlpha:0,duration:0.4},9.342);
    tl.from('#s2i2',{x:-20,autoAlpha:0,duration:0.4},9.623);
    tl.from('#s3h',{x:-24,autoAlpha:0,duration:0.5,ease:'power3.out'},15.125);
    tl.from('#s3i0',{x:-20,autoAlpha:0,duration:0.4},15.375);
    tl.from('#s3i1',{x:-20,autoAlpha:0,duration:0.4},15.655);
    tl.from('#s3i2',{x:-20,autoAlpha:0,duration:0.4},15.935);
    tl.from('#s4i',{opacity:0,duration:0.35},21.338);
    tl.fromTo('#s4i',{scale:1.06},{scale:1.0,duration:6.313,ease:'none'},21.338);
    tl.from('#s4l',{y:22,autoAlpha:0,duration:0.4},21.438);
    tl.from('#s5h',{y:34,autoAlpha:0,duration:0.6,ease:'power3.out'},27.800);
    window.__timelines['main'] = tl;
  </script>
</body></html>