Scroll this page. The top bar fills with your scroll ratio.
Build a thesis from the quant library.
Code the strategy with the agent.
Backtest on real historical data.
Send it live and watch the edge accrue.
A two-pixel sacred-gold bar fixed at the very top of the viewport. Its fill width is a transform driven by a single custom property, --scroll-progress, which a passive scroll listener keeps at the page scroll ratio from zero to one.
Long-form pages with real scroll length, one per page. Skip it on short pages where the ratio never moves.
Do not add a CSS transition to the fill; it must track scroll instantly or it lags. Do not smooth-scroll the page for the sake of the bar. Do not use on pages shorter than two viewports.
<style>
:root{
--bg:#0b0a08;--surface:#14110b;--ivory:#efe8d6;--muted:#9c9078;--faint:#5a5446;
--line:#2a2519;--line-faint:rgba(239,232,214,.08);--gold:#c9a24b;--gold-soft:#e7cd8c;
--font-display:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
--font-title:'Libre Caslon Condensed',ui-serif,Georgia,'Times New Roman',serif;
--font-body:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--ease:cubic-bezier(.22,1,.36,1);--dur-fast:200ms;--dur-base:400ms;
--scroll-progress:0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ivory);font-family:var(--font-body);min-height:100vh}
.sp{position:fixed;inset-inline:0;top:0;z-index:70;height:2px;aria-hidden:true}
.sp-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--scroll-progress));background:linear-gradient(to right,rgba(201,162,75,.4),var(--gold),var(--gold-soft))}
.sp-body{padding:64px 48px}
.sp-body .wrap{max-width:80rem;margin:0 auto}
.sp-body h2{font-family:var(--font-title);font-weight:400;font-size:clamp(2rem,5vw,3.5rem);line-height:1.04;color:var(--ivory)}
.sp-body h2 .g{color:var(--gold-soft)}
.sp-body p{color:var(--muted);font-size:1rem;font-weight:300;line-height:1.7;max-width:60ch;margin-top:20px}
.sp-body section{padding:64px 0}
</style>
<div class="sp-body"><div class="wrap">
<h2>A 2px sacred-gold bar whose fill tracks the page <span class="g">scroll ratio</span>.</h2>
<p>Scroll this page. The top bar fills with your scroll ratio.</p>
<section><h2>Research</h2><p>Build a thesis from the quant library.</p></section>
<section><h2>Build</h2><p>Code the strategy with the agent.</p></section>
<section><h2>Validate</h2><p>Backtest on real historical data.</p></section>
<section><h2>Deploy</h2><p>Send it live and watch the edge accrue.</p></section>
</div></div>
<script>
(function(){
var frame = 0;
function update(){
var doc = document.documentElement;
var max = doc.scrollHeight - doc.clientHeight;
var ratio = max > 0 ? Math.min(1, doc.scrollTop / max) : 0;
doc.style.setProperty("--scroll-progress", ratio.toFixed(4));
frame = 0;
}
function onScroll(){ if(!frame) frame = requestAnimationFrame(update); }
update();
window.addEventListener("scroll", onScroll, {passive:true});
window.addEventListener("resize", onScroll, {passive:true});
})();
</script>