Kate Monroe 1.0 — scrubbing hero

Produs Ruben Stom: Scrubbing Hero with Claude. Pagina live: /kate-monroe/ · sursa zip: 26. Scrubbing Hero with Claude · documentatie: 26. Kate Monroe Hero Prompts.

• Loader alb-os care se stinge, cu numele care trece din maro in alb.
• La incarcare: portret pe tot ecranul, numele centrat peste el, subtitlul care apare dedesubt.
• Pe masura ce derulezi un ecran, portretul se strange din tot ecranul in coloana din dreapta, numele urca in stanga sus si isi schimba culoarea, iar citatul cu miniatura apar de jos.
• Video-ul din portret nu ruleaza singur: este derulat de scroll — pozitia in film urmareaza pozitia in pagina.

• Nicio librarie. Tot e scris de mana: requestAnimationFrame, lerp si un ease propriu.
• Doua fonturi Google: Ovo si Montserrat.
• Header si footer dezactivate din setarile de pagina.
• bodyClasses: katemonroe — de acolo vine si min-height: 200vh, adica spatiul pe care se face derularea.

O sectiune, un element Code. Sursa era un singur fisier, cu CSS si JS inline; le-am despartit in cssCode (4,4 KB) si javascriptCode (5,7 KB), iar markup-ul (1,3 KB) a intrat in code. Totul scopat sub .kb; :root a ramas global.

Din cele patru fisiere din arhiva, doar doua sunt folosite. Miniatura de interior: 7 MB PNG → 77 KB JPG la 600px. Portretul video: reincodat cu fiecare cadru keyframe (1280×720, CRF 28, 2,8 MB), plus un poster JPG.

Celelalte doua fisiere din assets/ (un PNG de 9,8 MB si portrait.jpg) nu sunt referite nicaieri in sursa; posterul l-am facut din portrait.jpg.

• Nu scrie <style> in comentariile din cssCode. Bricks decide daca sa invaleasca CSS-ul in tag-uri printr-un simplu strpos($css, '<style>'). Comentariul meu de antet continea cuvantul, deci Bricks a crezut ca stilul e deja invelit, l-a scos ca text simplu, iar <script>-ul de dupa a intrat in mijlocul lui. Rezultat: nici CSS-ul, nici JS-ul nu s-au aplicat, si nicio eroare nicaieri. Acelasi lucru pentru o pereche <script>…</script> in javascriptCode.
• Video derulat de scroll cere keyframe-uri dese. Sursa foloseste un mp4 cu GOP normal, deci currentTime sare din keyframe in keyframe. Reincodat cu -g 1 -keyint_min 1 -sc_threshold 0: 1,9 MB → 2,8 MB, dar derularea e fluida. Serverul trebuie sa raspunda la cereri pe intervale de octeti (206 Partial Content) — verificat, raspunde.
• Sursa nu foloseste rem, deci nu a fost nevoie de conversie.
• De verificat cu mana: derularea propriu-zisa a video-ului. Intr-un tab de fundal browserul nu incarca metadatele video (readyState ramane 0), deci currentTime nu se poate misca. Restul — loader, strangerea portretului, aparitia citatului — le-am verificat.

1. Ia din arhiva index.html, miniatura de interior si clipul.
2. Miniatura in JPG la 600px; clipul reincodat all-keyframe la 1280px; un poster JPG. Toate in biblioteca media.
3. Desparte CSS-ul si JS-ul din <style> / <script>, prefixeaza selectorii cu .kb (lasa :root, html, body), si inlocuieste cele sase document.querySelector cu cautari in radacina sectiunii.
4. Markup-ul: caile catre uploads, poster pe video, invelit in <div class="kb">.
5. Un element Code intr-o sectiune fara padding; setarile de pagina ca mai sus.