← back to Rentv Promos
recap-v2/index.html
271 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=1920, height=1080"/>
<title>RENTV Recap for Boomer</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
html,body{margin:0;background:#0c0f13}
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0c0f13;
font-family:'Inter','Helvetica Neue',system-ui,sans-serif;color:#fff}
.clip{position:absolute}
.shot{inset:0;overflow:hidden;background:#0c0f13;opacity:0}
.shot img{display:block;width:1920px;height:auto;will-change:transform}
.card{inset:0;display:grid;place-items:center;opacity:0;background:
radial-gradient(1200px 700px at 50% 38%, #171d26 0%, #0c0f13 70%)}
.cardin{text-align:center;max-width:1400px}
.kicker{font-size:26px;letter-spacing:.42em;color:#c8102e;font-weight:800;margin-bottom:34px}
h1{font-family:Georgia,'Times New Roman',serif;font-size:170px;margin:0;font-weight:700;letter-spacing:.01em}
h2{font-family:Georgia,'Times New Roman',serif;font-size:96px;margin:0;font-weight:700}
.red{color:#c8102e}
.sub{font-size:34px;line-height:1.55;color:#aeb6c2;margin-top:38px;font-weight:300}
.sub2{font-size:28px;color:#aeb6c2;margin-top:26px;font-weight:300}
.logins{font-size:36px;margin-top:44px;color:#e8ecf2}
.logins b{color:#fff;background:#1a212c;border:1px solid #2c3644;border-radius:8px;padding:8px 18px}
.chip{left:80px;bottom:76px;display:flex;align-items:stretch;background:rgba(10,13,17,.82);
border:1px solid rgba(255,255,255,.14);border-radius:10px;overflow:hidden;
box-shadow:0 12px 40px rgba(0,0,0,.45)}
.chipin{display:flex;align-items:stretch}
.chip .bar{width:10px;background:#c8102e}
.chip .txt{padding:20px 30px}
.chip b{display:block;font-family:Georgia,serif;font-size:40px;font-weight:700}
.chip span{display:block;font-size:23px;color:#aeb6c2;margin-top:6px}
.sublabel{right:80px;top:64px}
.sublabel span{background:#c8102e;color:#fff;font-size:24px;font-weight:800;letter-spacing:.08em;
padding:12px 22px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="305.1">
<section id="sc01" class="clip card" data-start="0" data-duration="28.62" data-track-index="1">
<div class="cardin" id="sc01in">
<div class="kicker">A BUILD RECAP · WITH ADMIRATION</div>
<h1>RENTV<span class="red">.com</span></h1>
<p class="sub">For Boomer — the new build, on your live feed.<br/>Ten versions · ten themes · ten dashboards · built in a day.</p>
</div>
</section>
<section id="s02i0" class="clip shot" data-start="28.62" data-duration="35.49" data-track-index="1">
<img id="s02i0m" src="media/captures/home.png" alt=""/>
</section>
<div class="clip chip" id="ch02" data-start="29.32" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch02in"><div class="bar"></div><div class="txt"><b>The Front Page</b><span>RENTV Originals · leading the live wire</span></div></div>
</div>
<section id="s03i0" class="clip shot" data-start="64.11" data-duration="25.32" data-track-index="1">
<img id="s03i0m" src="media/captures/article.png" alt=""/>
</section>
<div class="clip chip" id="ch03" data-start="64.81" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch03in"><div class="bar"></div><div class="txt"><b>The Article Reader</b><span>stories open in-shell — readers stay on RENTV</span></div></div>
</div>
<section id="s04i0" class="clip shot" data-start="89.43" data-duration="14.50" data-track-index="1">
<img id="s04i0m" src="media/captures/review.png" alt=""/>
</section>
<div class="clip chip" id="ch04" data-start="90.13" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch04in"><div class="bar"></div><div class="txt"><b>The REview</b><span>face to face with the dealmakers</span></div></div>
</div>
<section id="s05i0" class="clip shot" data-start="103.93" data-duration="24.76" data-track-index="1">
<img id="s05i0m" src="media/captures/markets.png" alt=""/>
</section>
<div class="clip chip" id="ch05" data-start="104.63" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch05in"><div class="bar"></div><div class="txt"><b>Markets — Live</b><span>rates + REITs · maintains itself</span></div></div>
</div>
<section id="s06i0" class="clip shot" data-start="128.69" data-duration="10.60" data-track-index="1">
<img id="s06i0m" src="media/captures/cretalk.png" alt=""/>
</section>
<div class="clip chip" id="ch06" data-start="129.39" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch06in"><div class="bar"></div><div class="txt"><b>CRE Talk</b><span>the video conversations, in one place</span></div></div>
</div>
<section id="s07i0" class="clip shot" data-start="139.29" data-duration="9.52" data-track-index="1">
<img id="s07i0m" src="media/captures/versions.png" alt=""/>
</section>
<div class="clip sublabel" id="s07i0l" data-start="139.59" data-duration="4.50" data-track-index="3"><span>The Versions Picker</span></div>
<section id="s07i1" class="clip shot" data-start="148.81" data-duration="9.52" data-track-index="1">
<img id="s07i1m" src="media/captures/v-wire.png" alt=""/>
</section>
<div class="clip sublabel" id="s07i1l" data-start="149.11" data-duration="4.50" data-track-index="3"><span>The Wire</span></div>
<section id="s07i2" class="clip shot" data-start="158.33" data-duration="9.53" data-track-index="1">
<img id="s07i2m" src="media/captures/v-broadsheet.png" alt=""/>
</section>
<div class="clip sublabel" id="s07i2l" data-start="158.63" data-duration="4.50" data-track-index="3"><span>Broadsheet</span></div>
<section id="s07i3" class="clip shot" data-start="167.86" data-duration="9.52" data-track-index="1">
<img id="s07i3m" src="media/captures/v-terminal.png" alt=""/>
</section>
<div class="clip sublabel" id="s07i3l" data-start="168.16" data-duration="4.50" data-track-index="3"><span>Terminal</span></div>
<section id="s07i4" class="clip shot" data-start="177.38" data-duration="9.52" data-track-index="1">
<img id="s07i4m" src="media/captures/v-magazine.png" alt=""/>
</section>
<div class="clip sublabel" id="s07i4l" data-start="177.68" data-duration="4.50" data-track-index="3"><span>Magazine</span></div>
<section id="s07i5" class="clip shot" data-start="186.90" data-duration="9.52" data-track-index="1">
<img id="s07i5m" src="media/captures/v-dashboard.png" alt=""/>
</section>
<div class="clip sublabel" id="s07i5l" data-start="187.20" data-duration="4.50" data-track-index="3"><span>Dashboard</span></div>
<div class="clip chip" id="ch07" data-start="139.99" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch07in"><div class="bar"></div><div class="txt"><b>Ten Complete Site Versions</b><span>whole directions — all on live data</span></div></div>
</div>
<section id="s08i0" class="clip shot" data-start="196.42" data-duration="11.66" data-track-index="1">
<img id="s08i0m" src="media/captures/theme-midnight.png" alt=""/>
</section>
<div class="clip sublabel" id="s08i0l" data-start="196.72" data-duration="4.50" data-track-index="3"><span>Theme · Midnight Capital</span></div>
<section id="s08i1" class="clip shot" data-start="208.08" data-duration="11.66" data-track-index="1">
<img id="s08i1m" src="media/captures/theme-salmon.png" alt=""/>
</section>
<div class="clip sublabel" id="s08i1l" data-start="208.38" data-duration="4.50" data-track-index="3"><span>Theme · FT Salmon</span></div>
<div class="clip chip" id="ch08" data-start="197.12" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch08in"><div class="bar"></div><div class="txt"><b>Ten Professional Themes</b><span>one click restyles the entire site</span></div></div>
</div>
<section id="s09i0" class="clip shot" data-start="219.74" data-duration="7.70" data-track-index="1">
<img id="s09i0m" src="media/captures/admin-index.png" alt=""/>
</section>
<div class="clip sublabel" id="s09i0l" data-start="220.04" data-duration="4.50" data-track-index="3"><span>All 10 Dashboards</span></div>
<section id="s09i1" class="clip shot" data-start="227.44" data-duration="7.70" data-track-index="1">
<img id="s09i1m" src="media/captures/admin-command.png" alt=""/>
</section>
<div class="clip sublabel" id="s09i1l" data-start="227.74" data-duration="4.50" data-track-index="3"><span>Command Center</span></div>
<section id="s09i2" class="clip shot" data-start="235.14" data-duration="7.70" data-track-index="1">
<img id="s09i2m" src="media/captures/admin-kanban.png" alt=""/>
</section>
<div class="clip sublabel" id="s09i2l" data-start="235.44" data-duration="4.50" data-track-index="3"><span>Kanban</span></div>
<section id="s09i3" class="clip shot" data-start="242.84" data-duration="7.70" data-track-index="1">
<img id="s09i3m" src="media/captures/admin-analytics.png" alt=""/>
</section>
<div class="clip sublabel" id="s09i3l" data-start="243.14" data-duration="4.50" data-track-index="3"><span>Analytics</span></div>
<div class="clip chip" id="ch09" data-start="220.44" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch09in"><div class="bar"></div><div class="txt"><b>Ten Admin Dashboards</b><span>same live data · pick your workflow</span></div></div>
</div>
<section id="s10i0" class="clip shot" data-start="250.54" data-duration="10.80" data-track-index="1">
<img id="s10i0m" src="media/captures/blog.png" alt=""/>
</section>
<div class="clip sublabel" id="s10i0l" data-start="250.84" data-duration="4.50" data-track-index="3"><span>The Blog</span></div>
<section id="s10i1" class="clip shot" data-start="261.34" data-duration="10.81" data-track-index="1">
<img id="s10i1m" src="media/captures/publish.png" alt=""/>
</section>
<div class="clip sublabel" id="s10i1l" data-start="261.64" data-duration="4.50" data-track-index="3"><span>The Publishing Desk</span></div>
<div class="clip chip" id="ch10" data-start="251.24" data-duration="7.00" data-track-index="4">
<div class="chipin" id="ch10in"><div class="bar"></div><div class="txt"><b>The Publishing Desk</b><span>write → publish → live, plus subscribers</span></div></div>
</div>
<section id="s11a" class="clip shot" data-start="272.15" data-duration="7.50" data-track-index="1">
<img id="s11am" src="media/captures/home.png" alt=""/>
</section>
<section id="s11b" class="clip card" data-start="279.65" data-duration="25.45" data-track-index="1">
<div class="cardin" id="s11bin">
<div class="kicker">THANK YOU, BOOMER — THESE ARE JUST SUGGESTIONS</div>
<h2>rentv-v1<span class="red">.agentabrams.com</span></h2>
<p class="logins">login <b>admin / DW2024!</b> or <b>Boomer / Rentv2024!</b></p>
<p class="sub2">Every headline you saw is live rentv.com data · built in a day · your call, always.</p>
</div>
</section>
</div>
<audio id="vo" src="media/narration.wav" data-start="0" data-duration="305.1" data-track-index="10" data-volume="1"></audio>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.to("#sc01", { opacity: 1, duration: 0.35 }, 0);
tl.from("#sc01in", { opacity: 0, y: 40, duration: 1.2, ease: "power3.out" }, 0.30);
tl.fromTo("#sc01in", { scale: 1 }, { scale: 1.045, duration: 27.62, ease: "none" }, 0.50);
tl.to("#sc01in", { opacity: 0, duration: 0.6, ease: "power2.in" }, 28.02);
tl.set("#sc01in", { opacity: 0 }, 28.62);
tl.to("#s02i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 28.62);
tl.fromTo("#s02i0m", { y: 0 }, { y: -1513, duration: 35.29, ease: "sine.inOut" }, 28.72);
tl.from("#ch02", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 29.32);
tl.to("#ch02in", { opacity: 0, duration: 0.4 }, 35.92);
tl.set("#ch02in", { opacity: 0 }, 36.32);
tl.to("#s03i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 64.11);
tl.fromTo("#s03i0m", { y: 0 }, { y: -1162, duration: 25.12, ease: "sine.inOut" }, 64.21);
tl.from("#ch03", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 64.81);
tl.to("#ch03in", { opacity: 0, duration: 0.4 }, 71.41);
tl.set("#ch03in", { opacity: 0 }, 71.81);
tl.to("#s04i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 89.43);
tl.fromTo("#s04i0m", { y: 0 }, { y: -1131, duration: 14.30, ease: "sine.inOut" }, 89.53);
tl.from("#ch04", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 90.13);
tl.to("#ch04in", { opacity: 0, duration: 0.4 }, 96.73);
tl.set("#ch04in", { opacity: 0 }, 97.13);
tl.to("#s05i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 103.93);
tl.fromTo("#s05i0m", { y: 0 }, { y: -465, duration: 24.56, ease: "sine.inOut" }, 104.03);
tl.from("#ch05", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 104.63);
tl.to("#ch05in", { opacity: 0, duration: 0.4 }, 111.23);
tl.set("#ch05in", { opacity: 0 }, 111.63);
tl.to("#s06i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 128.69);
tl.fromTo("#s06i0m", { y: 0 }, { y: -827, duration: 10.40, ease: "sine.inOut" }, 128.79);
tl.from("#ch06", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 129.39);
tl.to("#ch06in", { opacity: 0, duration: 0.4 }, 135.99);
tl.set("#ch06in", { opacity: 0 }, 136.39);
tl.to("#s07i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 139.29);
tl.fromTo("#s07i0m", { y: 0 }, { y: -106, duration: 9.32, ease: "sine.inOut" }, 139.39);
tl.from("#s07i0l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 139.59);
tl.to("#s07i0l", { opacity: 0, duration: 0.35 }, 143.74);
tl.to("#s07i1", { opacity: 1, duration: 0.45, ease: "power2.out" }, 148.81);
tl.fromTo("#s07i1m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 9.52, ease: "none" }, 148.81);
tl.from("#s07i1l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 149.11);
tl.to("#s07i1l", { opacity: 0, duration: 0.35 }, 153.26);
tl.to("#s07i2", { opacity: 1, duration: 0.45, ease: "power2.out" }, 158.33);
tl.fromTo("#s07i2m", { scale: 1, transformOrigin: "50% 30%" }, { scale: 1.07, duration: 9.53, ease: "none" }, 158.33);
tl.from("#s07i2l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 158.63);
tl.to("#s07i2l", { opacity: 0, duration: 0.35 }, 162.78);
tl.to("#s07i3", { opacity: 1, duration: 0.45, ease: "power2.out" }, 167.86);
tl.fromTo("#s07i3m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 9.52, ease: "none" }, 167.86);
tl.from("#s07i3l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 168.16);
tl.to("#s07i3l", { opacity: 0, duration: 0.35 }, 172.31);
tl.to("#s07i4", { opacity: 1, duration: 0.45, ease: "power2.out" }, 177.38);
tl.fromTo("#s07i4m", { scale: 1, transformOrigin: "50% 30%" }, { scale: 1.07, duration: 9.52, ease: "none" }, 177.38);
tl.from("#s07i4l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 177.68);
tl.to("#s07i4l", { opacity: 0, duration: 0.35 }, 181.83);
tl.to("#s07i5", { opacity: 1, duration: 0.45, ease: "power2.out" }, 186.90);
tl.fromTo("#s07i5m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 9.52, ease: "none" }, 186.90);
tl.from("#s07i5l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 187.20);
tl.to("#s07i5l", { opacity: 0, duration: 0.35 }, 191.35);
tl.from("#ch07", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 139.99);
tl.to("#ch07in", { opacity: 0, duration: 0.4 }, 146.59);
tl.set("#ch07in", { opacity: 0 }, 146.99);
tl.to("#s08i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 196.42);
tl.fromTo("#s08i0m", { scale: 1, transformOrigin: "50% 30%" }, { scale: 1.07, duration: 11.66, ease: "none" }, 196.42);
tl.from("#s08i0l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 196.72);
tl.to("#s08i0l", { opacity: 0, duration: 0.35 }, 200.87);
tl.to("#s08i1", { opacity: 1, duration: 0.45, ease: "power2.out" }, 208.08);
tl.fromTo("#s08i1m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 11.66, ease: "none" }, 208.08);
tl.from("#s08i1l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 208.38);
tl.to("#s08i1l", { opacity: 0, duration: 0.35 }, 212.53);
tl.from("#ch08", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 197.12);
tl.to("#ch08in", { opacity: 0, duration: 0.4 }, 203.72);
tl.set("#ch08in", { opacity: 0 }, 204.12);
tl.to("#s09i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 219.74);
tl.fromTo("#s09i0m", { scale: 1, transformOrigin: "50% 30%" }, { scale: 1.07, duration: 7.70, ease: "none" }, 219.74);
tl.from("#s09i0l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 220.04);
tl.to("#s09i0l", { opacity: 0, duration: 0.35 }, 224.19);
tl.to("#s09i1", { opacity: 1, duration: 0.45, ease: "power2.out" }, 227.44);
tl.fromTo("#s09i1m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 7.70, ease: "none" }, 227.44);
tl.from("#s09i1l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 227.74);
tl.to("#s09i1l", { opacity: 0, duration: 0.35 }, 231.89);
tl.to("#s09i2", { opacity: 1, duration: 0.45, ease: "power2.out" }, 235.14);
tl.fromTo("#s09i2m", { scale: 1, transformOrigin: "50% 30%" }, { scale: 1.07, duration: 7.70, ease: "none" }, 235.14);
tl.from("#s09i2l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 235.44);
tl.to("#s09i2l", { opacity: 0, duration: 0.35 }, 239.59);
tl.to("#s09i3", { opacity: 1, duration: 0.45, ease: "power2.out" }, 242.84);
tl.fromTo("#s09i3m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 7.70, ease: "none" }, 242.84);
tl.from("#s09i3l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 243.14);
tl.to("#s09i3l", { opacity: 0, duration: 0.35 }, 247.29);
tl.from("#ch09", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 220.44);
tl.to("#ch09in", { opacity: 0, duration: 0.4 }, 227.04);
tl.set("#ch09in", { opacity: 0 }, 227.44);
tl.to("#s10i0", { opacity: 1, duration: 0.45, ease: "power2.out" }, 250.54);
tl.fromTo("#s10i0m", { scale: 1, transformOrigin: "50% 30%" }, { scale: 1.07, duration: 10.80, ease: "none" }, 250.54);
tl.from("#s10i0l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 250.84);
tl.to("#s10i0l", { opacity: 0, duration: 0.35 }, 254.99);
tl.to("#s10i1", { opacity: 1, duration: 0.45, ease: "power2.out" }, 261.34);
tl.fromTo("#s10i1m", { scale: 1.07, transformOrigin: "50% 30%" }, { scale: 1, duration: 10.81, ease: "none" }, 261.34);
tl.from("#s10i1l", { opacity: 0, x: -18, duration: 0.4, ease: "power2.out" }, 261.64);
tl.to("#s10i1l", { opacity: 0, duration: 0.35 }, 265.79);
tl.from("#ch10", { opacity: 0, y: 26, duration: 0.55, ease: "power3.out" }, 251.24);
tl.to("#ch10in", { opacity: 0, duration: 0.4 }, 257.84);
tl.set("#ch10in", { opacity: 0 }, 258.24);
tl.to("#s11a", { opacity: 1, duration: 0.5 }, 272.15);
tl.fromTo("#s11am", { y: 0 }, { y: -420, duration: 7.30, ease: "sine.inOut" }, 272.25);
tl.to("#s11b", { opacity: 1, duration: 0.5 }, 279.65);
tl.from("#s11bin", { opacity: 0, y: 36, duration: 1, ease: "power3.out" }, 279.75);
tl.fromTo("#s11bin", { scale: 1 }, { scale: 1.035, duration: 24.45, ease: "none" }, 280.05);
window.__timelines["main"] = tl;
</script>
</body>
</html>