[object Object]

← back to Rentv Master Reel

Long 14.3min pan version (full-page captures, narration gaps, ambient bed)

570b58da6282517c59cef426b557d94a28e1cc34 · 2026-07-28 15:31:14 -0700 · Steve Abrams

Files touched

Diff

commit 570b58da6282517c59cef426b557d94a28e1cc34
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 28 15:31:14 2026 -0700

    Long 14.3min pan version (full-page captures, narration gaps, ambient bed)
---
 index.html                        | 232 +++++++++++++++++++-------------------
 master-gen-long.mjs               |  86 ++++++++++++++
 media/fullpage/admin-command.png  | Bin 0 -> 132509 bytes
 media/fullpage/admin-index.png    | Bin 0 -> 100616 bytes
 media/fullpage/admin-kanban.png   | Bin 0 -> 167669 bytes
 media/fullpage/article.png        | Bin 0 -> 819904 bytes
 media/fullpage/blog.png           | Bin 0 -> 105682 bytes
 media/fullpage/cretalk.png        | Bin 0 -> 709312 bytes
 media/fullpage/desk.png           | Bin 0 -> 79060 bytes
 media/fullpage/home.png           | Bin 0 -> 1250727 bytes
 media/fullpage/markets.png        | Bin 0 -> 158584 bytes
 media/fullpage/publish.png        | Bin 0 -> 100616 bytes
 media/fullpage/pulse.png          | Bin 0 -> 230491 bytes
 media/fullpage/review.png         | Bin 0 -> 1418176 bytes
 media/fullpage/social.png         | Bin 0 -> 137437 bytes
 media/fullpage/theme-midnight.png | Bin 0 -> 1200586 bytes
 media/fullpage/theme-salmon.png   | Bin 0 -> 1245650 bytes
 media/fullpage/v-broadsheet.png   | Bin 0 -> 1481948 bytes
 media/fullpage/v-dashboard.png    | Bin 0 -> 210706 bytes
 media/fullpage/v-magazine.png     | Bin 0 -> 657867 bytes
 media/fullpage/v-terminal.png     | Bin 0 -> 220622 bytes
 media/fullpage/v-wire.png         | Bin 0 -> 1502776 bytes
 media/fullpage/versions.png       | Bin 0 -> 116577 bytes
 23 files changed, 203 insertions(+), 115 deletions(-)

diff --git a/index.html b/index.html
index f4b6ac7..915e7d1 100644
--- a/index.html
+++ b/index.html
@@ -7,129 +7,131 @@
   #root{position:relative;width:1920px;height:1080px;overflow:hidden}
   .clip{position:absolute;inset:0}
   #bg{background:#0b1017}
-  .shot{overflow:hidden}.simg{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;will-change:transform,opacity}
+  .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,.9);padding:9px 20px;border-radius:10px}
+  .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="336.31" data-fps="30">
-  <div id="bg" class="clip" data-start="0" data-duration="336.31" data-track-index="0"></div>
-  <audio id="vo" src="media/narration.m4a" data-start="0" data-volume="1"></audio>
-  <div id="s0" class="clip shot" data-start="0.000" data-duration="18.286" data-track-index="1"><img id="s0i" class="simg" src="media/captures/home.png" alt="A note for Boomer"></div>
-  <div id="s0l" class="clip label" data-start="0.000" data-duration="18.286" 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="18.286" data-duration="18.751" data-track-index="1"><img id="s1i" class="simg" src="media/captures/home.png" alt="A note for Boomer"></div>
-  <div id="s1l" class="clip label" data-start="18.286" data-duration="18.751" 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="37.037" data-duration="15.825" data-track-index="1"><img id="s2i" class="simg" src="media/captures/home.png" alt="The front page"></div>
-  <div id="s2l" class="clip label" data-start="37.037" data-duration="15.825" 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="52.862" data-duration="22.327" data-track-index="1"><img id="s3i" class="simg" src="media/captures/home.png" alt="The front page"></div>
-  <div id="s3l" class="clip label" data-start="52.862" data-duration="22.327" 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="75.189" data-duration="18.983" data-track-index="1"><img id="s4i" class="simg" src="media/captures/article.png" alt="In-shell reader"></div>
-  <div id="s4l" class="clip label" data-start="75.189" data-duration="18.983" 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="94.172" data-duration="15.268" data-track-index="1"><img id="s5i" class="simg" src="media/captures/review.png" alt="The REview"></div>
-  <div id="s5l" class="clip label" data-start="94.172" data-duration="15.268" 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="109.440" data-duration="18.844" data-track-index="1"><img id="s6i" class="simg" src="media/captures/markets.png" alt="Live markets"></div>
-  <div id="s6l" class="clip label" data-start="109.440" data-duration="18.844" 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="128.284" data-duration="13.457" data-track-index="1"><img id="s7i" class="simg" src="media/captures/pulse.png" alt="Market Pulse"></div>
-  <div id="s7l" class="clip label" data-start="128.284" data-duration="13.457" 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="141.741" data-duration="11.367" data-track-index="1"><img id="s8i" class="simg" src="media/captures/cretalk.png" alt="CRE Talk"></div>
-  <div id="s8l" class="clip label" data-start="141.741" data-duration="11.367" 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="153.108" data-duration="15.221" data-track-index="1"><img id="s9i" class="simg" src="media/captures/versions.png" alt="10 site versions"></div>
-  <div id="s9l" class="clip label" data-start="153.108" data-duration="15.221" 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="168.329" data-duration="10.577" data-track-index="1"><img id="s10i" class="simg" src="media/captures/v-wire.png" alt="The Wire"></div>
-  <div id="s10l" class="clip label" data-start="168.329" data-duration="10.577" 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="178.906" data-duration="9.509" data-track-index="1"><img id="s11i" class="simg" src="media/captures/v-broadsheet.png" alt="Broadsheet"></div>
-  <div id="s11l" class="clip label" data-start="178.906" data-duration="9.509" 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="188.415" data-duration="9.091" data-track-index="1"><img id="s12i" class="simg" src="media/captures/v-terminal.png" alt="Terminal"></div>
-  <div id="s12l" class="clip label" data-start="188.415" data-duration="9.091" 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="197.506" data-duration="6.955" data-track-index="1"><img id="s13i" class="simg" src="media/captures/v-magazine.png" alt="Magazine"></div>
-  <div id="s13l" class="clip label" data-start="197.506" data-duration="6.955" 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="204.461" data-duration="15.593" data-track-index="1"><img id="s14i" class="simg" src="media/captures/v-dashboard.png" alt="Dashboard"></div>
-  <div id="s14l" class="clip label" data-start="204.461" data-duration="15.593" 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="220.054" data-duration="17.776" data-track-index="1"><img id="s15i" class="simg" src="media/captures/theme-midnight.png" alt="10 themes"></div>
-  <div id="s15l" class="clip label" data-start="220.054" data-duration="17.776" 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="237.830" data-duration="11.878" data-track-index="1"><img id="s16i" class="simg" src="media/captures/admin-index.png" alt="Admin dashboards"></div>
-  <div id="s16l" class="clip label" data-start="237.830" data-duration="11.878" 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="249.708" data-duration="17.311" data-track-index="1"><img id="s17i" class="simg" src="media/captures/admin-command.png" alt="Admin dashboards"></div>
-  <div id="s17l" class="clip label" data-start="249.708" data-duration="17.311" 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="267.019" data-duration="14.478" data-track-index="1"><img id="s18i" class="simg" src="media/captures/desk.png" alt="Broker &amp; Owner Desk"></div>
-  <div id="s18l" class="clip label" data-start="267.019" data-duration="14.478" data-track-index="2"><div class="li"><span class="num">19</span><span class="txt">Broker &amp; Owner Desk</span></div></div>
-  <div id="s19" class="clip shot" data-start="281.497" data-duration="11.181" data-track-index="1"><img id="s19i" class="simg" src="media/captures/social.png" alt="Social command center"></div>
-  <div id="s19l" class="clip label" data-start="281.497" data-duration="11.181" 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="292.678" data-duration="13.596" data-track-index="1"><img id="s20i" class="simg" src="media/captures/blog.png" alt="Publishing desk"></div>
-  <div id="s20l" class="clip label" data-start="292.678" data-duration="13.596" 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="306.274" data-duration="30.036" data-track-index="1"><img id="s21i" class="simg" src="media/captures/home.png" alt="rentv.agentabrams.com"></div>
-  <div id="s21l" class="clip label" data-start="306.274" data-duration="30.036" data-track-index="2"><div class="li"><span class="num">22</span><span class="txt">rentv.agentabrams.com</span></div></div>
+  <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 &amp; 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 &amp; 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.4,ease:'power1.out'},0.000);
-    tl.fromTo('#s0i',{scale:1.05},{scale:1.0,duration:18.286,ease:'none'},0.000);
-    tl.from('#s0l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},0.150);
-    tl.from('#s1i',{opacity:0,duration:0.4,ease:'power1.out'},18.286);
-    tl.fromTo('#s1i',{scale:1.05},{scale:1.0,duration:18.751,ease:'none'},18.286);
-    tl.from('#s1l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},18.436);
-    tl.from('#s2i',{opacity:0,duration:0.4,ease:'power1.out'},37.037);
-    tl.fromTo('#s2i',{scale:1.05},{scale:1.0,duration:15.825,ease:'none'},37.037);
-    tl.from('#s2l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},37.187);
-    tl.from('#s3i',{opacity:0,duration:0.4,ease:'power1.out'},52.862);
-    tl.fromTo('#s3i',{scale:1.05},{scale:1.0,duration:22.327,ease:'none'},52.862);
-    tl.from('#s3l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},53.012);
-    tl.from('#s4i',{opacity:0,duration:0.4,ease:'power1.out'},75.189);
-    tl.fromTo('#s4i',{scale:1.05},{scale:1.0,duration:18.983,ease:'none'},75.189);
-    tl.from('#s4l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},75.339);
-    tl.from('#s5i',{opacity:0,duration:0.4,ease:'power1.out'},94.172);
-    tl.fromTo('#s5i',{scale:1.05},{scale:1.0,duration:15.268,ease:'none'},94.172);
-    tl.from('#s5l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},94.322);
-    tl.from('#s6i',{opacity:0,duration:0.4,ease:'power1.out'},109.440);
-    tl.fromTo('#s6i',{scale:1.05},{scale:1.0,duration:18.844,ease:'none'},109.440);
-    tl.from('#s6l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},109.590);
-    tl.from('#s7i',{opacity:0,duration:0.4,ease:'power1.out'},128.284);
-    tl.fromTo('#s7i',{scale:1.05},{scale:1.0,duration:13.457,ease:'none'},128.284);
-    tl.from('#s7l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},128.434);
-    tl.from('#s8i',{opacity:0,duration:0.4,ease:'power1.out'},141.741);
-    tl.fromTo('#s8i',{scale:1.05},{scale:1.0,duration:11.367,ease:'none'},141.741);
-    tl.from('#s8l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},141.891);
-    tl.from('#s9i',{opacity:0,duration:0.4,ease:'power1.out'},153.108);
-    tl.fromTo('#s9i',{scale:1.05},{scale:1.0,duration:15.221,ease:'none'},153.108);
-    tl.from('#s9l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},153.258);
-    tl.from('#s10i',{opacity:0,duration:0.4,ease:'power1.out'},168.329);
-    tl.fromTo('#s10i',{scale:1.05},{scale:1.0,duration:10.577,ease:'none'},168.329);
-    tl.from('#s10l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},168.479);
-    tl.from('#s11i',{opacity:0,duration:0.4,ease:'power1.out'},178.906);
-    tl.fromTo('#s11i',{scale:1.05},{scale:1.0,duration:9.509,ease:'none'},178.906);
-    tl.from('#s11l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},179.056);
-    tl.from('#s12i',{opacity:0,duration:0.4,ease:'power1.out'},188.415);
-    tl.fromTo('#s12i',{scale:1.05},{scale:1.0,duration:9.091,ease:'none'},188.415);
-    tl.from('#s12l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},188.565);
-    tl.from('#s13i',{opacity:0,duration:0.4,ease:'power1.out'},197.506);
-    tl.fromTo('#s13i',{scale:1.05},{scale:1.0,duration:6.955,ease:'none'},197.506);
-    tl.from('#s13l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},197.656);
-    tl.from('#s14i',{opacity:0,duration:0.4,ease:'power1.out'},204.461);
-    tl.fromTo('#s14i',{scale:1.05},{scale:1.0,duration:15.593,ease:'none'},204.461);
-    tl.from('#s14l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},204.611);
-    tl.from('#s15i',{opacity:0,duration:0.4,ease:'power1.out'},220.054);
-    tl.fromTo('#s15i',{scale:1.05},{scale:1.0,duration:17.776,ease:'none'},220.054);
-    tl.from('#s15l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},220.204);
-    tl.from('#s16i',{opacity:0,duration:0.4,ease:'power1.out'},237.830);
-    tl.fromTo('#s16i',{scale:1.05},{scale:1.0,duration:11.878,ease:'none'},237.830);
-    tl.from('#s16l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},237.980);
-    tl.from('#s17i',{opacity:0,duration:0.4,ease:'power1.out'},249.708);
-    tl.fromTo('#s17i',{scale:1.05},{scale:1.0,duration:17.311,ease:'none'},249.708);
-    tl.from('#s17l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},249.858);
-    tl.from('#s18i',{opacity:0,duration:0.4,ease:'power1.out'},267.019);
-    tl.fromTo('#s18i',{scale:1.05},{scale:1.0,duration:14.478,ease:'none'},267.019);
-    tl.from('#s18l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},267.169);
-    tl.from('#s19i',{opacity:0,duration:0.4,ease:'power1.out'},281.497);
-    tl.fromTo('#s19i',{scale:1.05},{scale:1.0,duration:11.181,ease:'none'},281.497);
-    tl.from('#s19l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},281.647);
-    tl.from('#s20i',{opacity:0,duration:0.4,ease:'power1.out'},292.678);
-    tl.fromTo('#s20i',{scale:1.05},{scale:1.0,duration:13.596,ease:'none'},292.678);
-    tl.from('#s20l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},292.828);
-    tl.from('#s21i',{opacity:0,duration:0.4,ease:'power1.out'},306.274);
-    tl.fromTo('#s21i',{scale:1.05},{scale:1.0,duration:30.036,ease:'none'},306.274);
-    tl.from('#s21l',{y:24,autoAlpha:0,duration:0.45,ease:'power2.out'},306.424);
+    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>
\ No newline at end of file
diff --git a/master-gen-long.mjs b/master-gen-long.mjs
new file mode 100644
index 0000000..49a931e
--- /dev/null
+++ b/master-gen-long.mjs
@@ -0,0 +1,86 @@
+import fs from 'fs';
+import { SCENES } from './master-gen.mjs';
+const W = 1920, H = 1080;
+const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+// full-page pixel heights (from the capture agent)
+const HEIGHT = {
+  home: 2645, article: 2470, review: 3292, markets: 1497, pulse: 1713, cretalk: 2712,
+  blog: 1099, versions: 1084, 'v-wire': 1893, 'v-broadsheet': 2409, 'v-terminal': 1238,
+  'v-magazine': 1080, 'v-dashboard': 1080, 'admin-index': 1080, 'admin-command': 1133,
+  'admin-kanban': 1080, publish: 1080, desk: 1092, social: 1080,
+  'theme-midnight': 2645, 'theme-salmon': 2645,
+};
+const PAN_SPEED = 33;   // px/sec (lower = slower/longer)
+const HOLD = 3.0;       // seconds for short pages
+const PAN_CAP = 46;     // max pan-extra seconds per scene
+
+// scaled full-page height when displayed at 1920 wide (captures are 1920 wide already)
+function panExtra(cap) {
+  const h = HEIGHT[cap] || 1080;
+  if (h <= 1140) return HOLD;
+  return Math.min((h - H) / PAN_SPEED, PAN_CAP);
+}
+
+// per-scene durations from the block audio durations (blockDurs) + pan extra
+export function durations(blockDurs) {
+  return SCENES.map(([id, cap], i) => +(blockDurs[i] + panExtra(cap)).toFixed(3));
+}
+export function panExtras() { return SCENES.map(([id, cap]) => +panExtra(cap).toFixed(3)); }
+
+function emit(durs) {
+  const clips = [], tw = [];
+  let t = 0;
+  const TOTAL = +durs.reduce((a, b) => a + b, 0).toFixed(2);
+  SCENES.forEach(([id, cap, label], i) => {
+    const d = durs[i], st = t.toFixed(3), du = d.toFixed(3);
+    const h = HEIGHT[cap] || 1080;
+    const travel = Math.max(0, h - H);
+    clips.push(`  <div id="s${i}" class="clip shot" data-start="${st}" data-duration="${du}" data-track-index="1"><img id="s${i}i" class="fp" src="media/fullpage/${cap}.png" alt="${esc(label)}"></div>`);
+    clips.push(`  <div id="s${i}l" class="clip label" data-start="${st}" data-duration="${du}" data-track-index="2"><div class="li"><span class="num">${String(i + 1).padStart(2, '0')}</span><span class="txt">${esc(label)}</span></div></div>`);
+    tw.push(`tl.from('#s${i}i',{opacity:0,duration:0.5,ease:'power1.out'},${st});`);
+    if (travel > 40) {
+      tw.push(`tl.fromTo('#s${i}i',{y:0},{y:${-travel},duration:${du},ease:'none'},${st});`);
+    } else {
+      tw.push(`tl.fromTo('#s${i}i',{scale:1.04},{scale:1.0,duration:${du},ease:'none'},${st});`);
+    }
+    tw.push(`tl.from('#s${i}l',{y:24,autoAlpha:0,duration:0.5,ease:'power2.out'},${(t + 0.2).toFixed(3)});`);
+    t += d;
+  });
+  const html = `<!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:${W}px;height:${H}px;overflow:hidden}
+  .clip{position:absolute;inset:0}
+  #bg{background:#0b1017}
+  .shot{overflow:hidden}
+  .fp{width:${W}px;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="${W}" data-height="${H}" data-duration="${TOTAL}" data-fps="30">
+  <div id="bg" class="clip" data-start="0" data-duration="${TOTAL}" 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>
+${clips.join('\n')}
+  </div>
+  <script>
+    window.__timelines = window.__timelines || {};
+    const tl = gsap.timeline({ paused: true });
+${tw.map(x => '    ' + x).join('\n')}
+    window.__timelines['main'] = tl;
+  </script>
+</body></html>`;
+  fs.writeFileSync('index.html', html);
+  return TOTAL;
+}
+
+const [cmd, a] = process.argv.slice(2);
+if (cmd === 'panextras') console.log(JSON.stringify(panExtras()));
+else if (cmd === 'durs') console.log(JSON.stringify(durations(JSON.parse(fs.readFileSync(a, 'utf8')))));
+else if (cmd === 'emit') console.log('TOTAL=' + emit(JSON.parse(fs.readFileSync(a, 'utf8'))));
diff --git a/media/fullpage/admin-command.png b/media/fullpage/admin-command.png
new file mode 100644
index 0000000..e525303
Binary files /dev/null and b/media/fullpage/admin-command.png differ
diff --git a/media/fullpage/admin-index.png b/media/fullpage/admin-index.png
new file mode 100644
index 0000000..8841358
Binary files /dev/null and b/media/fullpage/admin-index.png differ
diff --git a/media/fullpage/admin-kanban.png b/media/fullpage/admin-kanban.png
new file mode 100644
index 0000000..07295e0
Binary files /dev/null and b/media/fullpage/admin-kanban.png differ
diff --git a/media/fullpage/article.png b/media/fullpage/article.png
new file mode 100644
index 0000000..55637dc
Binary files /dev/null and b/media/fullpage/article.png differ
diff --git a/media/fullpage/blog.png b/media/fullpage/blog.png
new file mode 100644
index 0000000..d069a4f
Binary files /dev/null and b/media/fullpage/blog.png differ
diff --git a/media/fullpage/cretalk.png b/media/fullpage/cretalk.png
new file mode 100644
index 0000000..75331d4
Binary files /dev/null and b/media/fullpage/cretalk.png differ
diff --git a/media/fullpage/desk.png b/media/fullpage/desk.png
new file mode 100644
index 0000000..6125500
Binary files /dev/null and b/media/fullpage/desk.png differ
diff --git a/media/fullpage/home.png b/media/fullpage/home.png
new file mode 100644
index 0000000..e162b9b
Binary files /dev/null and b/media/fullpage/home.png differ
diff --git a/media/fullpage/markets.png b/media/fullpage/markets.png
new file mode 100644
index 0000000..9a7051a
Binary files /dev/null and b/media/fullpage/markets.png differ
diff --git a/media/fullpage/publish.png b/media/fullpage/publish.png
new file mode 100644
index 0000000..8841358
Binary files /dev/null and b/media/fullpage/publish.png differ
diff --git a/media/fullpage/pulse.png b/media/fullpage/pulse.png
new file mode 100644
index 0000000..ec33287
Binary files /dev/null and b/media/fullpage/pulse.png differ
diff --git a/media/fullpage/review.png b/media/fullpage/review.png
new file mode 100644
index 0000000..e860a91
Binary files /dev/null and b/media/fullpage/review.png differ
diff --git a/media/fullpage/social.png b/media/fullpage/social.png
new file mode 100644
index 0000000..e8a656e
Binary files /dev/null and b/media/fullpage/social.png differ
diff --git a/media/fullpage/theme-midnight.png b/media/fullpage/theme-midnight.png
new file mode 100644
index 0000000..d50bc49
Binary files /dev/null and b/media/fullpage/theme-midnight.png differ
diff --git a/media/fullpage/theme-salmon.png b/media/fullpage/theme-salmon.png
new file mode 100644
index 0000000..85ff7c6
Binary files /dev/null and b/media/fullpage/theme-salmon.png differ
diff --git a/media/fullpage/v-broadsheet.png b/media/fullpage/v-broadsheet.png
new file mode 100644
index 0000000..0ef6e21
Binary files /dev/null and b/media/fullpage/v-broadsheet.png differ
diff --git a/media/fullpage/v-dashboard.png b/media/fullpage/v-dashboard.png
new file mode 100644
index 0000000..650bb72
Binary files /dev/null and b/media/fullpage/v-dashboard.png differ
diff --git a/media/fullpage/v-magazine.png b/media/fullpage/v-magazine.png
new file mode 100644
index 0000000..8285b07
Binary files /dev/null and b/media/fullpage/v-magazine.png differ
diff --git a/media/fullpage/v-terminal.png b/media/fullpage/v-terminal.png
new file mode 100644
index 0000000..99d411c
Binary files /dev/null and b/media/fullpage/v-terminal.png differ
diff --git a/media/fullpage/v-wire.png b/media/fullpage/v-wire.png
new file mode 100644
index 0000000..0bacb10
Binary files /dev/null and b/media/fullpage/v-wire.png differ
diff --git a/media/fullpage/versions.png b/media/fullpage/versions.png
new file mode 100644
index 0000000..d3b1906
Binary files /dev/null and b/media/fullpage/versions.png differ

← 5188b27 RENTV master reel rebuild (Boomer, expanded 22-scene, Steve  ·  back to Rentv Master Reel  ·  (newest)