RENTV portal: targeted motion layer — hero Ken-Burns, roadmap line-draw + sequential nodes, chart draw-on-reveal easing, count-up easing, prefers-reduced-motion guards (DTD verdict B)

11f8cf94c503e7194b7859ecb43f3f97478770f8 · 2026-07-19 07:37:27 -0700 · Steve Abrams
Files touched

M build.mjs
M public/portal.html
Diff

commit 11f8cf94c503e7194b7859ecb43f3f97478770f8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sun Jul 19 07:37:27 2026 -0700

    RENTV portal: targeted motion layer — hero Ken-Burns, roadmap line-draw + sequential nodes, chart draw-on-reveal easing, count-up easing, prefers-reduced-motion guards (DTD verdict B)
---
 build.mjs          | 26 ++++++++++++++++++++------
 public/portal.html | 26 ++++++++++++++++++++------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/build.mjs b/build.mjs
index 5a82a3c..5083f86 100644
--- a/build.mjs
+++ b/build.mjs
@@ -353,8 +353,9 @@ body.nav .menu{transform:none}body.nav .scrim{opacity:1;pointer-events:auto}
 .menu .minfo{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}.menu .minfo p{font-size:13px;line-height:1.7;color:var(--dim);border:0;padding:2px 0}.menu .minfo a{display:inline;font-size:13px;color:var(--gold);border:0;padding:0}
 .hero{min-height:96vh;position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,7vw,120px);overflow:hidden}
 .slides{position:absolute;inset:0;z-index:0}
-.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 7s ease}
-.slide.on{opacity:1;transform:scale(1)}
+.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.4s ease;will-change:transform,opacity}
+.slide.on{opacity:1;animation:kenburns 13s ease-out forwards}
+@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
 .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,16,22,.94),rgba(12,16,22,.6) 55%,rgba(12,16,22,.35));z-index:1}
 .hero .in{position:relative;z-index:2;max-width:920px}
 .kick{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
@@ -406,7 +407,15 @@ td.mo{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:18px;wi
 .f5 .fph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(160deg,#123048,#0c1016);opacity:.9}
 .f5 .ft{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--gold);padding:14px 16px 4px}.f5 .fa{font-size:12.5px;color:var(--dim);padding:0 16px 16px}
 .sugg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);margin-top:20px}.sugg .s{background:var(--bg);padding:26px 24px}.sugg .s .p{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.sugg .s h4{font-family:'Cormorant Garamond',serif;font-size:20px;margin:8px 0}.sugg .s p{font-size:15px;color:var(--dim);line-height:1.55}
-.road{list-style:none;margin-top:20px}.road li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:26px}.road .w{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:15px;letter-spacing:.2em;text-transform:uppercase;min-width:130px}.road .d{color:var(--dim)}
+.road{list-style:none;margin-top:20px;position:relative;padding-left:36px}
+.road:before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(200,161,90,.14));transform:scaleY(0);transform-origin:top;transition:transform 1.5s cubic-bezier(.5,0,.2,1)}
+.road.drawn:before{transform:scaleY(1)}
+.road li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:26px;position:relative}
+.road li:before{content:'';position:absolute;left:-32px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--bg);transform:scale(0);transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
+.road.drawn li:before{transform:scale(1)}
+.road.drawn li:nth-child(1):before{transition-delay:.30s}.road.drawn li:nth-child(2):before{transition-delay:.62s}.road.drawn li:nth-child(3):before{transition-delay:.94s}.road.drawn li:nth-child(4):before{transition-delay:1.26s}
+.road .w{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:15px;letter-spacing:.2em;text-transform:uppercase;min-width:130px}.road .d{color:var(--dim)}
+@media(prefers-reduced-motion:reduce){.slide.on{animation:none;transform:scale(1)}.road:before{transition:none;transform:scaleY(1)}.road li:before{transition:none;transform:scale(1)}.accbody{animation:none!important}}
 .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
 /* Live Deal Desk (real CRCP data) */
 #dealmap{height:440px;border:1px solid var(--line);border-radius:8px;margin-top:34px;background:#0a0d12}
@@ -655,13 +664,15 @@ footer{padding:56px clamp(24px,7vw,120px);border-top:1px solid var(--line);color
 
 <script>
 (function(){var s=document.querySelectorAll('.hero .slide'),i=0;if(s.length<2)return;setInterval(function(){s[i].classList.remove('on');i=(i+1)%s.length;s[i].classList.add('on');},5200);})();
-function countUp(el){var t=+el.dataset.c;if(!t)return;var d=1200,st=null;function step(ts){st=st||ts;var p=Math.min((ts-st)/d,1);el.textContent=Math.round(t*p).toLocaleString();if(p<1)requestAnimationFrame(step);}requestAnimationFrame(step);}
+var REDUCE=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;
+function countUp(el){var t=+el.dataset.c;if(!t)return;if(REDUCE){el.textContent=t.toLocaleString();return;}var d=1300,st=null;function step(ts){st=st||ts;var p=Math.min((ts-st)/d,1),e=1-Math.pow(1-p,3);el.textContent=Math.round(t*e).toLocaleString();if(p<1)requestAnimationFrame(step);}requestAnimationFrame(step);}
 var secs=[].slice.call(document.querySelectorAll('section[id]'));var accs=[];
 secs.forEach(function(sec){var eb=sec.querySelector(':scope>.eyebrow'),h2=sec.querySelector(':scope>h2');if(!eb&&!h2)return;accs.push(sec);
   var head=document.createElement('button');head.type='button';head.className='acchead';var txt=document.createElement('div');txt.className='htext';if(eb)txt.appendChild(eb);if(h2)txt.appendChild(h2);
   var chev=document.createElement('span');chev.className='chev';chev.textContent='+';head.appendChild(txt);head.appendChild(chev);sec.insertBefore(head,sec.querySelector('.accbody'));
-  head.addEventListener('click',function(){var open=sec.classList.toggle('open');chev.textContent=open?'\\u2013':'+';if(open){initCharts();initDesk();}});});
-function setAll(o){accs.forEach(function(s){s.classList.toggle('open',o);var c=s.querySelector('.chev');if(c)c.textContent=o?'\\u2013':'+';});if(o){initCharts();initDesk();}}
+  head.addEventListener('click',function(){var open=sec.classList.toggle('open');chev.textContent=open?'\\u2013':'+';if(open){initCharts();initDesk();drawRoad(sec);}});});
+function drawRoad(sec){var rd=sec.querySelector('.road');if(rd)setTimeout(function(){rd.classList.add('drawn');},140);}
+function setAll(o){accs.forEach(function(s){s.classList.toggle('open',o);var c=s.querySelector('.chev');if(c)c.textContent=o?'\\u2013':'+';if(o)drawRoad(s);});if(o){initCharts();initDesk();}}
 document.getElementById('xall').onclick=function(){setAll(true);};document.getElementById('call').onclick=function(){setAll(false);};
 document.querySelectorAll('.menu a[href^="#"]').forEach(function(a){a.addEventListener('click',function(){var id=a.getAttribute('href').slice(1),s=document.getElementById(id);if(s&&!s.classList.contains('open')&&s.querySelector('.acchead')){s.querySelector('.acchead').click();}if(s)setTimeout(function(){s.scrollIntoView({behavior:'smooth'});},80);});});
 var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12});
@@ -670,6 +681,9 @@ document.querySelectorAll('.metrics .v[data-c]').forEach(function(el){var mo=new
 var charted=false;
 function initCharts(){if(charted||!window.Chart)return;charted=true;
   var gold='#c8a15a',dim='rgba(238,241,246,.6)',line='rgba(200,161,90,.18)';Chart.defaults.color=dim;Chart.defaults.font.family='Jost,system-ui,sans-serif';
+  var RM=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;
+  Chart.defaults.animation=RM?false:{duration:1150,easing:'easeInOutQuart'};
+  if(!RM){Chart.defaults.animations={y:{from:function(c){return c.chart.scales.y?c.chart.scales.y.getPixelForValue(0):0;}}};}
   var C=${JSON.stringify(CHART)};
   new Chart(document.getElementById('compChart'),{type:'bar',data:{labels:C.competitors.labels,datasets:[{label:'Audience reach',data:C.competitors.reach,backgroundColor:'rgba(200,161,90,.75)'},{label:'Digital modernization',data:C.competitors.digital,backgroundColor:'rgba(120,170,255,.6)'}]},options:{responsive:true,maintainAspectRatio:false,scales:{y:{grid:{color:line},max:100},x:{grid:{display:false}}},plugins:{legend:{labels:{color:dim}}}}});
   new Chart(document.getElementById('adChart'),{type:'bar',data:{labels:C.advertising.labels,datasets:[{label:'Relative ROI',data:C.advertising.roi,backgroundColor:C.advertising.roi.map(function(v){return v>=88?'rgba(200,161,90,.85)':'rgba(200,161,90,.4)';})}]},options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,scales:{x:{grid:{color:line},max:100},y:{grid:{display:false}}},plugins:{legend:{display:false}}}});
diff --git a/public/portal.html b/public/portal.html
index 3bb4381..76f2b30 100644
--- a/public/portal.html
+++ b/public/portal.html
@@ -30,8 +30,9 @@ body.nav .menu{transform:none}body.nav .scrim{opacity:1;pointer-events:auto}
 .menu .minfo{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}.menu .minfo p{font-size:13px;line-height:1.7;color:var(--dim);border:0;padding:2px 0}.menu .minfo a{display:inline;font-size:13px;color:var(--gold);border:0;padding:0}
 .hero{min-height:96vh;position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,7vw,120px);overflow:hidden}
 .slides{position:absolute;inset:0;z-index:0}
-.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 7s ease}
-.slide.on{opacity:1;transform:scale(1)}
+.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.4s ease;will-change:transform,opacity}
+.slide.on{opacity:1;animation:kenburns 13s ease-out forwards}
+@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
 .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,16,22,.94),rgba(12,16,22,.6) 55%,rgba(12,16,22,.35));z-index:1}
 .hero .in{position:relative;z-index:2;max-width:920px}
 .kick{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
@@ -83,7 +84,15 @@ td.mo{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:18px;wi
 .f5 .fph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(160deg,#123048,#0c1016);opacity:.9}
 .f5 .ft{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--gold);padding:14px 16px 4px}.f5 .fa{font-size:12.5px;color:var(--dim);padding:0 16px 16px}
 .sugg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);margin-top:20px}.sugg .s{background:var(--bg);padding:26px 24px}.sugg .s .p{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.sugg .s h4{font-family:'Cormorant Garamond',serif;font-size:20px;margin:8px 0}.sugg .s p{font-size:15px;color:var(--dim);line-height:1.55}
-.road{list-style:none;margin-top:20px}.road li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:26px}.road .w{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:15px;letter-spacing:.2em;text-transform:uppercase;min-width:130px}.road .d{color:var(--dim)}
+.road{list-style:none;margin-top:20px;position:relative;padding-left:36px}
+.road:before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(200,161,90,.14));transform:scaleY(0);transform-origin:top;transition:transform 1.5s cubic-bezier(.5,0,.2,1)}
+.road.drawn:before{transform:scaleY(1)}
+.road li{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:26px;position:relative}
+.road li:before{content:'';position:absolute;left:-32px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--bg);transform:scale(0);transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
+.road.drawn li:before{transform:scale(1)}
+.road.drawn li:nth-child(1):before{transition-delay:.30s}.road.drawn li:nth-child(2):before{transition-delay:.62s}.road.drawn li:nth-child(3):before{transition-delay:.94s}.road.drawn li:nth-child(4):before{transition-delay:1.26s}
+.road .w{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:15px;letter-spacing:.2em;text-transform:uppercase;min-width:130px}.road .d{color:var(--dim)}
+@media(prefers-reduced-motion:reduce){.slide.on{animation:none;transform:scale(1)}.road:before{transition:none;transform:scaleY(1)}.road li:before{transition:none;transform:scale(1)}.accbody{animation:none!important}}
 .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
 /* Live Deal Desk (real CRCP data) */
 #dealmap{height:440px;border:1px solid var(--line);border-radius:8px;margin-top:34px;background:#0a0d12}
@@ -487,13 +496,15 @@ footer{padding:56px clamp(24px,7vw,120px);border-top:1px solid var(--line);color
 
 <script>
 (function(){var s=document.querySelectorAll('.hero .slide'),i=0;if(s.length<2)return;setInterval(function(){s[i].classList.remove('on');i=(i+1)%s.length;s[i].classList.add('on');},5200);})();
-function countUp(el){var t=+el.dataset.c;if(!t)return;var d=1200,st=null;function step(ts){st=st||ts;var p=Math.min((ts-st)/d,1);el.textContent=Math.round(t*p).toLocaleString();if(p<1)requestAnimationFrame(step);}requestAnimationFrame(step);}
+var REDUCE=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;
+function countUp(el){var t=+el.dataset.c;if(!t)return;if(REDUCE){el.textContent=t.toLocaleString();return;}var d=1300,st=null;function step(ts){st=st||ts;var p=Math.min((ts-st)/d,1),e=1-Math.pow(1-p,3);el.textContent=Math.round(t*e).toLocaleString();if(p<1)requestAnimationFrame(step);}requestAnimationFrame(step);}
 var secs=[].slice.call(document.querySelectorAll('section[id]'));var accs=[];
 secs.forEach(function(sec){var eb=sec.querySelector(':scope>.eyebrow'),h2=sec.querySelector(':scope>h2');if(!eb&&!h2)return;accs.push(sec);
   var head=document.createElement('button');head.type='button';head.className='acchead';var txt=document.createElement('div');txt.className='htext';if(eb)txt.appendChild(eb);if(h2)txt.appendChild(h2);
   var chev=document.createElement('span');chev.className='chev';chev.textContent='+';head.appendChild(txt);head.appendChild(chev);sec.insertBefore(head,sec.querySelector('.accbody'));
-  head.addEventListener('click',function(){var open=sec.classList.toggle('open');chev.textContent=open?'\u2013':'+';if(open){initCharts();initDesk();}});});
-function setAll(o){accs.forEach(function(s){s.classList.toggle('open',o);var c=s.querySelector('.chev');if(c)c.textContent=o?'\u2013':'+';});if(o){initCharts();initDesk();}}
+  head.addEventListener('click',function(){var open=sec.classList.toggle('open');chev.textContent=open?'\u2013':'+';if(open){initCharts();initDesk();drawRoad(sec);}});});
+function drawRoad(sec){var rd=sec.querySelector('.road');if(rd)setTimeout(function(){rd.classList.add('drawn');},140);}
+function setAll(o){accs.forEach(function(s){s.classList.toggle('open',o);var c=s.querySelector('.chev');if(c)c.textContent=o?'\u2013':'+';if(o)drawRoad(s);});if(o){initCharts();initDesk();}}
 document.getElementById('xall').onclick=function(){setAll(true);};document.getElementById('call').onclick=function(){setAll(false);};
 document.querySelectorAll('.menu a[href^="#"]').forEach(function(a){a.addEventListener('click',function(){var id=a.getAttribute('href').slice(1),s=document.getElementById(id);if(s&&!s.classList.contains('open')&&s.querySelector('.acchead')){s.querySelector('.acchead').click();}if(s)setTimeout(function(){s.scrollIntoView({behavior:'smooth'});},80);});});
 var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12});
@@ -502,6 +513,9 @@ document.querySelectorAll('.metrics .v[data-c]').forEach(function(el){var mo=new
 var charted=false;
 function initCharts(){if(charted||!window.Chart)return;charted=true;
   var gold='#c8a15a',dim='rgba(238,241,246,.6)',line='rgba(200,161,90,.18)';Chart.defaults.color=dim;Chart.defaults.font.family='Jost,system-ui,sans-serif';
+  var RM=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;
+  Chart.defaults.animation=RM?false:{duration:1150,easing:'easeInOutQuart'};
+  if(!RM){Chart.defaults.animations={y:{from:function(c){return c.chart.scales.y?c.chart.scales.y.getPixelForValue(0):0;}}};}
   var C={"competitors":{"labels":["RENTV","Bisnow","The Real Deal","Comm. Observer","GlobeSt","CoStar News"],"reach":[35,95,90,70,80,88],"digital":[28,96,92,75,70,90]},"advertising":{"labels":["LinkedIn","Newsletter","Google Search","Sponsored Content","Events","X / Social","Programmatic","SEO"],"roi":[95,98,82,78,88,60,55,84]},"timing":{"labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"deals":[60,68,82,88,80,72,58,55,86,92,84,78],"readership":[70,72,88,90,78,64,52,50,84,95,88,80]},"social":{"labels":["Now","+30d","+60d","+90d","+180d","+1yr"],"linkedin":[818,1400,2600,4200,7500,15000]},"revenue":{"labels":["Subscriptions","Conferences","Sponsored Content","Newsletter Ads","Data & Reports","Job Board","Webinars","Video Sponsorships"],"mix":[26,24,18,12,8,5,4,3]}};
   new Chart(document.getElementById('compChart'),{type:'bar',data:{labels:C.competitors.labels,datasets:[{label:'Audience reach',data:C.competitors.reach,backgroundColor:'rgba(200,161,90,.75)'},{label:'Digital modernization',data:C.competitors.digital,backgroundColor:'rgba(120,170,255,.6)'}]},options:{responsive:true,maintainAspectRatio:false,scales:{y:{grid:{color:line},max:100},x:{grid:{display:false}}},plugins:{legend:{labels:{color:dim}}}}});
   new Chart(document.getElementById('adChart'),{type:'bar',data:{labels:C.advertising.labels,datasets:[{label:'Relative ROI',data:C.advertising.roi,backgroundColor:C.advertising.roi.map(function(v){return v>=88?'rgba(200,161,90,.85)':'rgba(200,161,90,.4)';})}]},options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,scales:{x:{grid:{color:line},max:100},y:{grid:{display:false}}},plugins:{legend:{display:false}}}});
← acf5ed6 auto-save: 2026-07-17T21:48:00 (1 files) — data/crm.json · back to Consulting Rentv Com · auto-save: 2026-07-20T10:01:15 (2 files) — public/videos/hey bc2bcc8 →