← back to Rentv Master Reel
index.html
137 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:#0b1017}
.shot{overflow:hidden}
.fp{width:1920px;height:auto;display:block;will-change:transform}
.label{left:56px;bottom:60px;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:700;letter-spacing:.06em;padding:9px 13px;border-radius:8px;background:#0a6cff}
.li .txt{color:#fff;font-size:30px;font-weight:500;background:rgba(9,15,24,.92);padding:9px 20px;border-radius:10px}
</style></head><body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="860.95" data-fps="30">
<div id="bg" class="clip" data-start="0" data-duration="860.95" data-track-index="0"></div>
<audio id="vo" src="media/narration-long.m4a" data-start="0" data-volume="1"></audio>
<audio id="bgm" src="media/bgm.m4a" data-start="0" data-volume="0.12"></audio>
<div id="s0" class="clip shot" data-start="0.000" data-duration="63.786" data-track-index="1"><img id="s0i" class="fp" src="media/fullpage/home.png" alt="A note for Boomer"></div>
<div id="s0l" class="clip label" data-start="0.000" data-duration="63.786" data-track-index="2"><div class="li"><span class="num">01</span><span class="txt">A note for Boomer</span></div></div>
<div id="s1" class="clip shot" data-start="63.786" data-duration="64.251" data-track-index="1"><img id="s1i" class="fp" src="media/fullpage/home.png" alt="A note for Boomer"></div>
<div id="s1l" class="clip label" data-start="63.786" data-duration="64.251" data-track-index="2"><div class="li"><span class="num">02</span><span class="txt">A note for Boomer</span></div></div>
<div id="s2" class="clip shot" data-start="128.037" data-duration="61.325" data-track-index="1"><img id="s2i" class="fp" src="media/fullpage/home.png" alt="The front page"></div>
<div id="s2l" class="clip label" data-start="128.037" data-duration="61.325" data-track-index="2"><div class="li"><span class="num">03</span><span class="txt">The front page</span></div></div>
<div id="s3" class="clip shot" data-start="189.362" data-duration="67.827" data-track-index="1"><img id="s3i" class="fp" src="media/fullpage/home.png" alt="The front page"></div>
<div id="s3l" class="clip label" data-start="189.362" data-duration="67.827" data-track-index="2"><div class="li"><span class="num">04</span><span class="txt">The front page</span></div></div>
<div id="s4" class="clip shot" data-start="257.189" data-duration="60.604" data-track-index="1"><img id="s4i" class="fp" src="media/fullpage/article.png" alt="In-shell reader"></div>
<div id="s4l" class="clip label" data-start="257.189" data-duration="60.604" data-track-index="2"><div class="li"><span class="num">05</span><span class="txt">In-shell reader</span></div></div>
<div id="s5" class="clip shot" data-start="317.793" data-duration="60.768" data-track-index="1"><img id="s5i" class="fp" src="media/fullpage/review.png" alt="The REview"></div>
<div id="s5l" class="clip label" data-start="317.793" data-duration="60.768" data-track-index="2"><div class="li"><span class="num">06</span><span class="txt">The REview</span></div></div>
<div id="s6" class="clip shot" data-start="378.561" data-duration="30.980" data-track-index="1"><img id="s6i" class="fp" src="media/fullpage/markets.png" alt="Live markets"></div>
<div id="s6l" class="clip label" data-start="378.561" data-duration="30.980" data-track-index="2"><div class="li"><span class="num">07</span><span class="txt">Live markets</span></div></div>
<div id="s7" class="clip shot" data-start="409.541" data-duration="32.139" data-track-index="1"><img id="s7i" class="fp" src="media/fullpage/pulse.png" alt="Market Pulse"></div>
<div id="s7l" class="clip label" data-start="409.541" data-duration="32.139" data-track-index="2"><div class="li"><span class="num">08</span><span class="txt">Market Pulse</span></div></div>
<div id="s8" class="clip shot" data-start="441.680" data-duration="56.867" data-track-index="1"><img id="s8i" class="fp" src="media/fullpage/cretalk.png" alt="CRE Talk"></div>
<div id="s8l" class="clip label" data-start="441.680" data-duration="56.867" data-track-index="2"><div class="li"><span class="num">09</span><span class="txt">CRE Talk</span></div></div>
<div id="s9" class="clip shot" data-start="498.547" data-duration="17.721" data-track-index="1"><img id="s9i" class="fp" src="media/fullpage/versions.png" alt="10 site versions"></div>
<div id="s9l" class="clip label" data-start="498.547" data-duration="17.721" data-track-index="2"><div class="li"><span class="num">10</span><span class="txt">10 site versions</span></div></div>
<div id="s10" class="clip shot" data-start="516.268" data-duration="34.713" data-track-index="1"><img id="s10i" class="fp" src="media/fullpage/v-wire.png" alt="The Wire"></div>
<div id="s10l" class="clip label" data-start="516.268" data-duration="34.713" data-track-index="2"><div class="li"><span class="num">11</span><span class="txt">The Wire</span></div></div>
<div id="s11" class="clip shot" data-start="550.981" data-duration="49.282" data-track-index="1"><img id="s11i" class="fp" src="media/fullpage/v-broadsheet.png" alt="Broadsheet"></div>
<div id="s11l" class="clip label" data-start="550.981" data-duration="49.282" data-track-index="2"><div class="li"><span class="num">12</span><span class="txt">Broadsheet</span></div></div>
<div id="s12" class="clip shot" data-start="600.263" data-duration="13.379" data-track-index="1"><img id="s12i" class="fp" src="media/fullpage/v-terminal.png" alt="Terminal"></div>
<div id="s12l" class="clip label" data-start="600.263" data-duration="13.379" data-track-index="2"><div class="li"><span class="num">13</span><span class="txt">Terminal</span></div></div>
<div id="s13" class="clip shot" data-start="613.642" data-duration="9.455" data-track-index="1"><img id="s13i" class="fp" src="media/fullpage/v-magazine.png" alt="Magazine"></div>
<div id="s13l" class="clip label" data-start="613.642" data-duration="9.455" data-track-index="2"><div class="li"><span class="num">14</span><span class="txt">Magazine</span></div></div>
<div id="s14" class="clip shot" data-start="623.097" data-duration="18.093" data-track-index="1"><img id="s14i" class="fp" src="media/fullpage/v-dashboard.png" alt="Dashboard"></div>
<div id="s14l" class="clip label" data-start="623.097" data-duration="18.093" data-track-index="2"><div class="li"><span class="num">15</span><span class="txt">Dashboard</span></div></div>
<div id="s15" class="clip shot" data-start="641.190" data-duration="63.276" data-track-index="1"><img id="s15i" class="fp" src="media/fullpage/theme-midnight.png" alt="10 themes"></div>
<div id="s15l" class="clip label" data-start="641.190" data-duration="63.276" data-track-index="2"><div class="li"><span class="num">16</span><span class="txt">10 themes</span></div></div>
<div id="s16" class="clip shot" data-start="704.466" data-duration="14.378" data-track-index="1"><img id="s16i" class="fp" src="media/fullpage/admin-index.png" alt="Admin dashboards"></div>
<div id="s16l" class="clip label" data-start="704.466" data-duration="14.378" data-track-index="2"><div class="li"><span class="num">17</span><span class="txt">Admin dashboards</span></div></div>
<div id="s17" class="clip shot" data-start="718.844" data-duration="19.811" data-track-index="1"><img id="s17i" class="fp" src="media/fullpage/admin-command.png" alt="Admin dashboards"></div>
<div id="s17l" class="clip label" data-start="718.844" data-duration="19.811" data-track-index="2"><div class="li"><span class="num">18</span><span class="txt">Admin dashboards</span></div></div>
<div id="s18" class="clip shot" data-start="738.655" data-duration="16.978" data-track-index="1"><img id="s18i" class="fp" src="media/fullpage/desk.png" alt="Broker & Owner Desk"></div>
<div id="s18l" class="clip label" data-start="738.655" data-duration="16.978" data-track-index="2"><div class="li"><span class="num">19</span><span class="txt">Broker & Owner Desk</span></div></div>
<div id="s19" class="clip shot" data-start="755.633" data-duration="13.681" data-track-index="1"><img id="s19i" class="fp" src="media/fullpage/social.png" alt="Social command center"></div>
<div id="s19l" class="clip label" data-start="755.633" data-duration="13.681" data-track-index="2"><div class="li"><span class="num">20</span><span class="txt">Social command center</span></div></div>
<div id="s20" class="clip shot" data-start="769.314" data-duration="16.096" data-track-index="1"><img id="s20i" class="fp" src="media/fullpage/blog.png" alt="Publishing desk"></div>
<div id="s20l" class="clip label" data-start="769.314" data-duration="16.096" data-track-index="2"><div class="li"><span class="num">21</span><span class="txt">Publishing desk</span></div></div>
<div id="s21" class="clip shot" data-start="785.410" data-duration="75.536" data-track-index="1"><img id="s21i" class="fp" src="media/fullpage/home.png" alt="rentv.agentabrams.com"></div>
<div id="s21l" class="clip label" data-start="785.410" data-duration="75.536" data-track-index="2"><div class="li"><span class="num">22</span><span class="txt">rentv.agentabrams.com</span></div></div>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.from('#s0i',{opacity:0,duration:0.5,ease:'power1.out'},0.000);
tl.fromTo('#s0i',{y:0},{y:-1565,duration:63.786,ease:'none'},0.000);
tl.from('#s0l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},0.200);
tl.from('#s1i',{opacity:0,duration:0.5,ease:'power1.out'},63.786);
tl.fromTo('#s1i',{y:0},{y:-1565,duration:64.251,ease:'none'},63.786);
tl.from('#s1l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},63.986);
tl.from('#s2i',{opacity:0,duration:0.5,ease:'power1.out'},128.037);
tl.fromTo('#s2i',{y:0},{y:-1565,duration:61.325,ease:'none'},128.037);
tl.from('#s2l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},128.237);
tl.from('#s3i',{opacity:0,duration:0.5,ease:'power1.out'},189.362);
tl.fromTo('#s3i',{y:0},{y:-1565,duration:67.827,ease:'none'},189.362);
tl.from('#s3l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},189.562);
tl.from('#s4i',{opacity:0,duration:0.5,ease:'power1.out'},257.189);
tl.fromTo('#s4i',{y:0},{y:-1390,duration:60.604,ease:'none'},257.189);
tl.from('#s4l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},257.389);
tl.from('#s5i',{opacity:0,duration:0.5,ease:'power1.out'},317.793);
tl.fromTo('#s5i',{y:0},{y:-2212,duration:60.768,ease:'none'},317.793);
tl.from('#s5l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},317.993);
tl.from('#s6i',{opacity:0,duration:0.5,ease:'power1.out'},378.561);
tl.fromTo('#s6i',{y:0},{y:-417,duration:30.980,ease:'none'},378.561);
tl.from('#s6l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},378.761);
tl.from('#s7i',{opacity:0,duration:0.5,ease:'power1.out'},409.541);
tl.fromTo('#s7i',{y:0},{y:-633,duration:32.139,ease:'none'},409.541);
tl.from('#s7l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},409.741);
tl.from('#s8i',{opacity:0,duration:0.5,ease:'power1.out'},441.680);
tl.fromTo('#s8i',{y:0},{y:-1632,duration:56.867,ease:'none'},441.680);
tl.from('#s8l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},441.880);
tl.from('#s9i',{opacity:0,duration:0.5,ease:'power1.out'},498.547);
tl.fromTo('#s9i',{scale:1.04},{scale:1.0,duration:17.721,ease:'none'},498.547);
tl.from('#s9l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},498.747);
tl.from('#s10i',{opacity:0,duration:0.5,ease:'power1.out'},516.268);
tl.fromTo('#s10i',{y:0},{y:-813,duration:34.713,ease:'none'},516.268);
tl.from('#s10l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},516.468);
tl.from('#s11i',{opacity:0,duration:0.5,ease:'power1.out'},550.981);
tl.fromTo('#s11i',{y:0},{y:-1329,duration:49.282,ease:'none'},550.981);
tl.from('#s11l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},551.181);
tl.from('#s12i',{opacity:0,duration:0.5,ease:'power1.out'},600.263);
tl.fromTo('#s12i',{y:0},{y:-158,duration:13.379,ease:'none'},600.263);
tl.from('#s12l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},600.463);
tl.from('#s13i',{opacity:0,duration:0.5,ease:'power1.out'},613.642);
tl.fromTo('#s13i',{scale:1.04},{scale:1.0,duration:9.455,ease:'none'},613.642);
tl.from('#s13l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},613.842);
tl.from('#s14i',{opacity:0,duration:0.5,ease:'power1.out'},623.097);
tl.fromTo('#s14i',{scale:1.04},{scale:1.0,duration:18.093,ease:'none'},623.097);
tl.from('#s14l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},623.297);
tl.from('#s15i',{opacity:0,duration:0.5,ease:'power1.out'},641.190);
tl.fromTo('#s15i',{y:0},{y:-1565,duration:63.276,ease:'none'},641.190);
tl.from('#s15l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},641.390);
tl.from('#s16i',{opacity:0,duration:0.5,ease:'power1.out'},704.466);
tl.fromTo('#s16i',{scale:1.04},{scale:1.0,duration:14.378,ease:'none'},704.466);
tl.from('#s16l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},704.666);
tl.from('#s17i',{opacity:0,duration:0.5,ease:'power1.out'},718.844);
tl.fromTo('#s17i',{y:0},{y:-53,duration:19.811,ease:'none'},718.844);
tl.from('#s17l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},719.044);
tl.from('#s18i',{opacity:0,duration:0.5,ease:'power1.out'},738.655);
tl.fromTo('#s18i',{scale:1.04},{scale:1.0,duration:16.978,ease:'none'},738.655);
tl.from('#s18l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},738.855);
tl.from('#s19i',{opacity:0,duration:0.5,ease:'power1.out'},755.633);
tl.fromTo('#s19i',{scale:1.04},{scale:1.0,duration:13.681,ease:'none'},755.633);
tl.from('#s19l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},755.833);
tl.from('#s20i',{opacity:0,duration:0.5,ease:'power1.out'},769.314);
tl.fromTo('#s20i',{scale:1.04},{scale:1.0,duration:16.096,ease:'none'},769.314);
tl.from('#s20l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},769.514);
tl.from('#s21i',{opacity:0,duration:0.5,ease:'power1.out'},785.410);
tl.fromTo('#s21i',{y:0},{y:-1565,duration:75.536,ease:'none'},785.410);
tl.from('#s21l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},785.610);
window.__timelines['main'] = tl;
</script>
</body></html>