ABYSS — zanurzenie przez scroll

<main><div class="ocean-story" id="ocean-story"><div class="ocean-sticky" aria-hidden="true"><img src="https://codepen.pl/media/codepen/immersive-2026/abyss.jpg" alt="" width="1536" height="1024" fetchpriority="high"><div class="ocean-shade"></div><div class="crosshair"></div></div><header><a href="#surface" class="wordmark">ABYSS</a><span>Ocean journal</span><a href="#atlas">Otwórz atlas</a></header><aside class="depth-rail" aria-label="Postęp opowieści"><span id="chapter-index">01 / 03</span><div><i></i></div><span>Przewijaj w głąb</span></aside><section class="chapter surface" id="surface" data-chapter="0"><p>Świat pod powierzchnią</p><h1>Mniej hałasu.<br>Więcej oceanu.</h1><div class="surface-bottom"><span>Opowieść w trzech zanurzeniach.</span><a href="#light" aria-label="Przejdź do rozdziału o świetle">Zanurz się <span aria-hidden="true">↓</span></a></div></section><section class="chapter light" id="light" data-chapter="1"><span class="chapter-number">01 — Światło</span><h2>Tutaj słońce<br>ma inny rytm.</h2><p>Smugi światła rozcinają wodę. Każda fala na powierzchni zmienia obraz pod nią. Ten sam kadr nigdy nie wygląda tak samo.</p></section><section class="chapter silence" id="silence" data-chapter="2"><span class="chapter-number">02 — Przestrzeń</span><h2>Mały człowiek.<br>Wielki błękit.</h2><p>Przesuń uwagę z pierwszego planu na daleki horyzont. W oceanie pusta przestrzeń jest częścią krajobrazu.</p><a class="text-link" href="#atlas">Zajrzyj do atlasu</a></section></div><section class="atlas" id="atlas"><div class="atlas-heading"><h2>Trzy sposoby<br>patrzenia.</h2><p>Wybierz motyw, który chcesz obserwować.</p></div><div class="atlas-controls" role="group" aria-label="Motyw atlasu"><button data-motif="0" aria-pressed="true">Światło</button><button data-motif="1" aria-pressed="false">Rafa</button><button data-motif="2" aria-pressed="false">Przestrzeń</button></div><div class="atlas-detail"><span id="motif-label" role="status">Obserwujesz: światło</span><p id="motif-copy">Szukaj jasnych smug i cieni fal. Zwróć uwagę, jak zmieniają kształt na skałach.</p><div class="lens"><img src="https://codepen.pl/media/codepen/immersive-2026/abyss.jpg" alt="Promienie słońca w błękitnej wodzie" width="1536" height="1024" loading="lazy"></div></div></section></main><footer><a href="#surface">ABYSS / wróć na powierzchnię</a><span class="credit">Projekt koncepcyjny. Fotorealistyczny obraz wygenerowany przez AI.</span><button type="button" class="motion-toggle" aria-pressed="false">Animacje</button></footer>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}h1,h2,h3,p,figure{margin:0}button,input,select{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;min-height:44px}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus,currentColor);outline-offset:5px}img{display:block;max-width:100%}p{line-height:1.6}button,input,select{border-radius:0}[hidden]{display:none!important}section{scroll-margin-top:25px}.credit{font-size:11px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:#03121f;color:#f1fcff;font-family:Arial,sans-serif;--focus:#a4f0ff}.ocean-story{position:relative;isolation:isolate}.ocean-sticky{position:sticky;top:0;height:100svh;min-height:500px;margin-bottom:-100svh;z-index:-1;overflow:hidden;background:#052847}.ocean-sticky img{width:100%;height:100%;object-fit:cover;transform:scale(var(--ocean-scale,1.02));filter:brightness(var(--ocean-light,.72));will-change:transform}.ocean-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,12,30,.55),rgba(0,12,30,.1) 45%,rgba(0,12,30,.6))}header{position:absolute;top:0;left:0;right:0;padding:25px 5%;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px;background:rgba(0,16,35,.25)}header a{text-decoration:none}.wordmark{font-size:28px;font-weight:900;letter-spacing:-2px}header>span{margin-left:auto;margin-right:5%}.chapter{min-height:100svh;padding:90px 10%;display:flex;flex-direction:column;justify-content:center}.surface{min-height:100svh;padding:135px 5% 35px;justify-content:space-between}.surface>p{font-size:14px}.surface h1{font-size:clamp(52px,8.5vw,135px);font-weight:400;letter-spacing:-.06em;line-height:.98;max-width:11ch;margin:35px 0}.surface-bottom{display:flex;justify-content:space-between;gap:25px;align-items:end;font-size:13px}.surface-bottom a{display:flex;gap:28px;align-items:center;text-decoration:none;font-size:16px;padding:12px;border:1px solid #c3deea}.surface-bottom a span{font-size:32px}.depth-rail{position:sticky;top:40vh;height:0;z-index:3;width:25px;left:96%;font:10px monospace;pointer-events:none}.depth-rail>div{width:1px;height:100px;background:#5c7f90;margin:12px 0}.depth-rail i{display:block;width:3px;height:100%;transform:scaleY(var(--progress,.03));transform-origin:top;background:#c4f4ff}.depth-rail>span:last-child{writing-mode:vertical-rl;margin-left:-5px}.chapter-number{font:12px monospace;margin-bottom:30px}.chapter h2{font-weight:400;font-size:clamp(44px,7vw,100px);line-height:1.05;letter-spacing:-.045em;margin-bottom:30px}.chapter>p:not(.surface>p){max-width:38ch;font-size:20px}.light{align-items:flex-end;text-align:right}.light p{background:#031a2bd9;padding:18px}.silence>p{background:#031a2bd9;padding:18px}.text-link{align-self:flex-start;margin-top:30px}.atlas{padding:90px 7%;background:#e9f4f4;color:#092938}.atlas-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.atlas h2{font-size:clamp(38px,5vw,70px);font-weight:400;letter-spacing:-3px;line-height:1.06}.atlas-heading p{max-width:26ch}.atlas-controls{display:flex;gap:12px;border-bottom:1px solid #829a9f;margin-top:45px}.atlas-controls button{border:0;background:none;color:#092938;padding:16px 20px}.atlas-controls button[aria-pressed="true"]{background:#092938;color:#e9f4f4}.atlas-detail{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}.atlas-detail>span{font:13px monospace}.atlas-detail>p{max-width:40ch}.lens{grid-column:1 / -1;height:360px;overflow:hidden}.lens img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:object-position 700ms,transform 700ms}footer{padding:30px 5%;display:flex;justify-content:space-between;gap:30px;font-size:13px}@media(max-width:650px){header>span{display:none}.surface h1{font-size:58px}.surface-bottom{align-items:start;flex-direction:column}.chapter{padding-left:7%;padding-right:10%}.light{align-items:start;text-align:left}.chapter>p:not(.surface>p){font-size:17px}.depth-rail{left:96%;width:10px}.depth-rail>span{display:none}.atlas{padding:60px 7%}.atlas-heading,.atlas-detail{display:block}.atlas-heading p,.atlas-detail p{margin:22px 0}.atlas-controls{gap:0}.atlas-controls button{padding:14px 16px}.lens{height:260px}footer{flex-direction:column}.ocean-sticky img{object-position:65% center}}
footer{flex-wrap:wrap}.motion-toggle{background:transparent;border:1px solid currentColor;color:inherit;font:11px monospace;padding:10px 14px;min-height:44px}body.motion-off .ocean-sticky img{transform:none!important;filter:brightness(.65)!important}
.ocean-sticky{pointer-events:none}.chapter{position:relative;z-index:1}.atlas,footer{position:relative;z-index:2}

$(function(){
const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let motionChoice=null;const motionOff=()=>motionChoice===null?reduce.matches:!motionChoice;function syncMotion(){document.body.classList.toggle('motion-off',motionOff());$('.motion-toggle').attr('aria-pressed',String(!motionOff())).text(motionOff()?'Włącz animacje':'Wyłącz animacje');}$('.motion-toggle').on('click',function(){motionChoice=motionOff();syncMotion();requestPaint();});syncMotion();let queued=false;function paint(){queued=false;update();}function requestPaint(){if(!queued){queued=true;requestAnimationFrame(paint);}}window.addEventListener('scroll',requestPaint,{passive:true});window.addEventListener('resize',requestPaint);reduce.addEventListener('change',function(){syncMotion();requestPaint();});const story=document.getElementById('ocean-story');function update(){const r=story.getBoundingClientRect(),span=Math.max(1,story.offsetHeight-window.innerHeight);const progress=Math.max(0,Math.min(1,-r.top/span));story.style.setProperty('--progress',Math.max(.03,progress));story.style.setProperty('--ocean-scale',motionOff()?1:1.02+progress*.32);story.style.setProperty('--ocean-light',motionOff()?.65:.72-progress*.28);$('#chapter-index').text(String(Math.min(3,Math.floor(progress*3)+1)).padStart(2,'0')+' / 03');}const motifs=[['światło','Szukaj jasnych smug i cieni fal. Zwróć uwagę, jak zmieniają kształt na skałach.','20% 10%',1.2],['rafę','Na granicy skały i wody pojawiają się drobne faktury. Przyjrzyj się szczelinom, porostom i cieniom.','100% 100%',1.8],['przestrzeń','Porównaj sylwetkę nurka z otaczającym błękitem. To proporcje budują poczucie skali.','80% 60%',1]];$('[data-motif]').on('click',function(){const m=motifs[Number($(this).attr('data-motif'))];$('[data-motif]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');$('#motif-label').text('Obserwujesz: '+m[0]);$('#motif-copy').text(m[1]);$('.lens img').css({'object-position':m[2],transform:'scale('+m[3]+')'});});update();
});