redesign(landing): auto-capture-first, interactive playground, bolder identity#3
Conversation
…to-capture-first content Reposition around auto-capture + honest coverage; bolder green-signal palette, monospace display type, interactive command playground, animated gate pipeline, count-up stats, dark/light themes. Content updated to post-merge reality (eval is opt-in, 5.5 MB, query coverage, grey-on-thin-data).
There was a problem hiding this comment.
Code Review
This pull request updates the documentation homepage (docs/index.html) with a significant design overhaul, adding light/dark theme toggling, an interactive terminal playground, a coverage dashboard, and updated copy highlighting the auto-capture feature. The review feedback focuses on optimizing performance and robustness in the newly added JavaScript: first, by caching getBoundingClientRect on pointerenter to avoid layout thrashing during high-frequency pointermove events; and second, by using the observer parameter inside IntersectionObserver callbacks instead of referencing the outer io variable to prevent potential runtime errors.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| [].slice.call(document.querySelectorAll('.card')).forEach(function(c){ | ||
| c.addEventListener('pointermove', function(e){ | ||
| var r = c.getBoundingClientRect(); | ||
| c.style.setProperty('--mx', (e.clientX-r.left)+'px'); | ||
| c.style.setProperty('--my', (e.clientY-r.top)+'px'); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Calling getBoundingClientRect() inside a high-frequency event handler like pointermove triggers synchronous layout reflows (layout thrashing), which can severely degrade scrolling and animation performance. Cache the bounding rectangle on pointerenter instead.
| [].slice.call(document.querySelectorAll('.card')).forEach(function(c){ | |
| c.addEventListener('pointermove', function(e){ | |
| var r = c.getBoundingClientRect(); | |
| c.style.setProperty('--mx', (e.clientX-r.left)+'px'); | |
| c.style.setProperty('--my', (e.clientY-r.top)+'px'); | |
| }); | |
| }); | |
| [].slice.call(document.querySelectorAll('.card')).forEach(function(c){ | |
| var r; | |
| c.addEventListener('pointerenter', function(){ | |
| r = c.getBoundingClientRect(); | |
| }); | |
| c.addEventListener('pointermove', function(e){ | |
| if(!r) r = c.getBoundingClientRect(); | |
| c.style.setProperty('--mx', (e.clientX-r.left)+'px'); | |
| c.style.setProperty('--my', (e.clientY-r.top)+'px'); | |
| }); | |
| }); |
| var io = new IntersectionObserver(function(en){ | ||
| en.forEach(function(x){ if(x.isIntersecting){ show(x.target); io.unobserve(x.target);} }); | ||
| },{threshold:.16}); |
There was a problem hiding this comment.
Referencing the io variable inside the IntersectionObserver callback can lead to runtime errors if the callback is executed synchronously or before the variable assignment completes. Use the second argument passed to the callback (observer) to safely call unobserve.
| var io = new IntersectionObserver(function(en){ | |
| en.forEach(function(x){ if(x.isIntersecting){ show(x.target); io.unobserve(x.target);} }); | |
| },{threshold:.16}); | |
| var io = new IntersectionObserver(function(en, obs){ | |
| en.forEach(function(x){ if(x.isIntersecting){ show(x.target); obs.unobserve(x.target);} }); | |
| },{threshold:.16}); |
| (function(){ | ||
| var stats=[].slice.call(document.querySelectorAll('.stat .v')); | ||
| if('IntersectionObserver' in window){ | ||
| var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){countUp(x.target);io.unobserve(x.target);}});},{threshold:.6}); |
There was a problem hiding this comment.
Avoid referencing the io variable inside the callback. Use the second argument of the callback (observer) to safely call unobserve.
| var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){countUp(x.target);io.unobserve(x.target);}});},{threshold:.6}); | |
| var io=new IntersectionObserver(function(en, obs){en.forEach(function(x){if(x.isIntersecting){countUp(x.target);obs.unobserve(x.target);}});},{threshold:.6}); |
| gates.forEach(function(g,i){ setTimeout(function(){ g.classList.add('lit'); }, 140*i); }); | ||
| } | ||
| if('IntersectionObserver' in window){ | ||
| var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){light();io.unobserve(x.target);}});},{threshold:.3}); |
There was a problem hiding this comment.
Avoid referencing the io variable inside the callback. Use the second argument of the callback (observer) to safely call unobserve.
| var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){light();io.unobserve(x.target);}});},{threshold:.3}); | |
| var io=new IntersectionObserver(function(en, obs){en.forEach(function(x){if(x.isIntersecting){light();obs.unobserve(x.target);}});},{threshold:.3}); |
| function boot(){ if(started) return; started=true; select('coverage'); } | ||
| var play_sec=document.getElementById('play'); | ||
| if('IntersectionObserver' in window && play_sec){ | ||
| var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){boot();io.disconnect();}});},{threshold:.35}); |
There was a problem hiding this comment.
Avoid referencing the io variable inside the callback. Use the second argument of the callback (observer) to safely call disconnect.
| var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){boot();io.disconnect();}});},{threshold:.35}); | |
| var io=new IntersectionObserver(function(en, obs){en.forEach(function(x){if(x.isIntersecting){boot();obs.disconnect();}});},{threshold:.35}); |
Redesigns the landing page around the newly-merged reality:
--features eval; numbers refreshed (5.5 MB, 58 tests, 98% instrumented).node --checkon the inline JS passes.