`videos/reel/index.html`

86 lines
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=1920, height=1080" />
<title>RENTV — Master Reel</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}
  .ci{text-align:center;padding:0 120px}
  .card .tag{font-size:22px;letter-spacing:.42em;font-weight:600;color:#57b0ff;margin-bottom:20px}
  .card h1{margin:0;color:#f3f7fc;font-size:96px;font-weight:500;letter-spacing:-.01em}
  .card p{margin:20px 0 0;color:#8ea3b8;font-size:30px;font-weight:300}
  .label{left:56px;bottom:64px;right:auto;top:auto;width:auto;height:auto}
  .li{display:flex;align-items:center;gap:14px}
  .li .num{color:#fff;font-size:18px;font-weight:600;letter-spacing:.08em;padding:8px 13px;border-radius:8px}
  .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="26.05" data-fps="30">
  <div id="bg" class="clip" data-start="0" data-duration="26.05" data-track-index="0"></div>
  <section id="title" class="clip card" data-start="0" data-duration="2.2" data-track-index="1">
  <div class="ci"><div class="tag" id="title-tag">RENTV.COM</div><h1 id="title-h">The unified platform</h1></div></section>
  <div id="s0" class="clip shot" data-start="2.200" data-duration="2.35" data-track-index="2"><img id="s0-img" class="simg" src="assets/01-home.png" alt="Live CRE News"></div>
  <div id="s0-l" class="clip label" data-start="2.200" data-duration="2.35" data-track-index="3"><div id="s0-li" class="li"><span class="num" style="background:#0a6cff">FRONT END</span><span class="txt">Live CRE News</span></div></div>
  <div id="s1" class="clip shot" data-start="4.550" data-duration="2.35" data-track-index="2"><img id="s1-img" class="simg" src="assets/02-markets.png" alt="Markets"></div>
  <div id="s1-l" class="clip label" data-start="4.550" data-duration="2.35" data-track-index="3"><div id="s1-li" class="li"><span class="num" style="background:#0a6cff">FRONT END</span><span class="txt">Markets</span></div></div>
  <div id="s2" class="clip shot" data-start="6.900" data-duration="2.35" data-track-index="2"><img id="s2-img" class="simg" src="assets/03-deals.png" alt="Deals"></div>
  <div id="s2-l" class="clip label" data-start="6.900" data-duration="2.35" data-track-index="3"><div id="s2-li" class="li"><span class="num" style="background:#0a6cff">FRONT END</span><span class="txt">Deals</span></div></div>
  <div id="s3" class="clip shot" data-start="9.250" data-duration="2.35" data-track-index="2"><img id="s3-img" class="simg" src="assets/04-pulse.png" alt="Market Pulse"></div>
  <div id="s3-l" class="clip label" data-start="9.250" data-duration="2.35" data-track-index="3"><div id="s3-li" class="li"><span class="num" style="background:#0a6cff">FRONT END</span><span class="txt">Market Pulse</span></div></div>
  <div id="s4" class="clip shot" data-start="11.600" data-duration="2.35" data-track-index="2"><img id="s4-img" class="simg" src="assets/05-review.png" alt="The REview"></div>
  <div id="s4-l" class="clip label" data-start="11.600" data-duration="2.35" data-track-index="3"><div id="s4-li" class="li"><span class="num" style="background:#0a6cff">FRONT END</span><span class="txt">The REview</span></div></div>
  <div id="s5" class="clip shot" data-start="13.950" data-duration="2.35" data-track-index="2"><img id="s5-img" class="simg" src="assets/06-backend.png" alt="Admin Backend"></div>
  <div id="s5-l" class="clip label" data-start="13.950" data-duration="2.35" data-track-index="3"><div id="s5-li" class="li"><span class="num" style="background:#c8a15a">BACKEND</span><span class="txt">Admin Backend</span></div></div>
  <div id="s6" class="clip shot" data-start="16.300" data-duration="2.35" data-track-index="2"><img id="s6-img" class="simg" src="assets/07-desk.png" alt="Broker &amp; Owner Desk"></div>
  <div id="s6-l" class="clip label" data-start="16.300" data-duration="2.35" data-track-index="3"><div id="s6-li" class="li"><span class="num" style="background:#c8a15a">BACKEND</span><span class="txt">Broker &amp; Owner Desk</span></div></div>
  <div id="s7" class="clip shot" data-start="18.650" data-duration="2.35" data-track-index="2"><img id="s7-img" class="simg" src="assets/08-audience.png" alt="Audience &amp; CRM"></div>
  <div id="s7-l" class="clip label" data-start="18.650" data-duration="2.35" data-track-index="3"><div id="s7-li" class="li"><span class="num" style="background:#c8a15a">BACKEND</span><span class="txt">Audience &amp; CRM</span></div></div>
  <div id="s8" class="clip shot" data-start="21.000" data-duration="2.35" data-track-index="2"><img id="s8-img" class="simg" src="assets/09-press.png" alt="Video Library"></div>
  <div id="s8-l" class="clip label" data-start="21.000" data-duration="2.35" data-track-index="3"><div id="s8-li" class="li"><span class="num" style="background:#c8a15a">BACKEND</span><span class="txt">Video Library</span></div></div>
  <section id="outro" class="clip card" data-start="23.350" data-duration="2.7" data-track-index="1">
  <div class="ci"><h1 id="outro-h">rentv.agentabrams.com</h1><p id="outro-p">One unified app · news + intelligence</p></div></section>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });
    tl.from('#title-h',{y:34,autoAlpha:0,duration:0.6,ease:'power3.out'},0.15);
    tl.from('#title-tag',{y:-16,autoAlpha:0,duration:0.5},0.05);
    tl.from('#s0-img',{opacity:0,duration:0.3,ease:'power1.out'},2.200);
    tl.fromTo('#s0-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},2.200);
    tl.from('#s0-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},2.250);
    tl.from('#s1-img',{opacity:0,duration:0.3,ease:'power1.out'},4.550);
    tl.fromTo('#s1-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},4.550);
    tl.from('#s1-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},4.600);
    tl.from('#s2-img',{opacity:0,duration:0.3,ease:'power1.out'},6.900);
    tl.fromTo('#s2-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},6.900);
    tl.from('#s2-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},6.950);
    tl.from('#s3-img',{opacity:0,duration:0.3,ease:'power1.out'},9.250);
    tl.fromTo('#s3-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},9.250);
    tl.from('#s3-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},9.300);
    tl.from('#s4-img',{opacity:0,duration:0.3,ease:'power1.out'},11.600);
    tl.fromTo('#s4-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},11.600);
    tl.from('#s4-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},11.650);
    tl.from('#s5-img',{opacity:0,duration:0.3,ease:'power1.out'},13.950);
    tl.fromTo('#s5-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},13.950);
    tl.from('#s5-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},14.000);
    tl.from('#s6-img',{opacity:0,duration:0.3,ease:'power1.out'},16.300);
    tl.fromTo('#s6-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},16.300);
    tl.from('#s6-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},16.350);
    tl.from('#s7-img',{opacity:0,duration:0.3,ease:'power1.out'},18.650);
    tl.fromTo('#s7-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},18.650);
    tl.from('#s7-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},18.700);
    tl.from('#s8-img',{opacity:0,duration:0.3,ease:'power1.out'},21.000);
    tl.fromTo('#s8-img',{scale:1.07},{scale:1.0,duration:2.35,ease:'none'},21.000);
    tl.from('#s8-li',{y:22,autoAlpha:0,duration:0.35,ease:'power2.out'},21.050);
    tl.from('#outro-h',{y:30,autoAlpha:0,duration:0.6,ease:'power3.out'},23.350);
    tl.from('#outro-p',{y:18,autoAlpha:0,duration:0.5},23.600);
    window.__timelines['main'] = tl;
  </script>
</body></html>