cesnimda
3.2 KiB
3.2 KiB
SCROLL_EXPERIENCE.md
1. Governing rule
The scrollbar is a contract. Native scroll physics everywhere: no hijacking, no pinned scenes, no snap-scrolling on prose, no horizontal sections. Recruiters skim with momentum-flicks; anything that interferes reads as hostile.
2. Homepage scroll narrative (desktop)
| Scroll position | What happens | Why |
|---|---|---|
| 0 (load) | Hero static except trace draw (A1) | Decision facts readable instantly |
| 0–120px | Header compresses 72→56px, gains blur backdrop + hairline bottom border (linear-mapped to scroll, not toggled — no pop) | Reclaims space, signals "we're moving" |
| Each section at 20% entry | A2 section arrive, once | Reading rhythm |
| Proof strip enter | Chip dots light in stagger (accent pulse A4) | Draws eye across the four facts |
| Projects enter | Cards rise in 2-stagger; screenshots have 4px max parallax offset relative to card scroll | Depth without gimmick |
| Experience enter | Timeline draw (A8) | Guides top-down reading |
| Contact band enter | No animation — band is high-contrast already | Calm before conversion action |
| Any position | Header CV button + nav always available | ≤1 interaction to CV rule |
Scroll-spy updates nav underline per section. No "back to top" button on homepage (header is sticky; document is ~5 viewports); case studies (longer) get one after 3 viewports, ghost-style, bottom-right.
3. Case-study scroll
- Mini-TOC (≥1200px) tracks reading position with an accent tick; no progress bars (this is a document, not an article funnel — but see next point).
- Long-form sections use generous
space-9rhythm; architecture diagram gets full-width breakout (max 1200px) beyond the 72ch prose measure. - Images lazy-load 1 viewport ahead with aspect-locked skeletons — zero cumulative layout shift is a hard requirement.
- Section anchors offset by header height + 24px; anchor links in TL;DR jump correctly.
4. Mobile scroll
- No parallax, no scroll-linked header compression (fixed 56px slim header from the start); section reveals still fire (opacity-dominant).
- Sticky elements budget: header only. No sticky CTAs covering content (thumb-reach conversion handled by the contact band + header CV icon-button).
- Overscroll behaviour default; PWA-style rubber-banding untouched.
- Gallery swipe is the only horizontal gesture, clearly contained inside the lightbox.
5. Deep-link & restoration behaviour
- Anchor navigation (nav click, TOC, TL;DR links): smooth scroll 400ms max — distance-capped so cross-page-length jumps don't take seconds; reduced motion → instant.
- Back/forward restores scroll position (browser default — do not fight it).
- Language switch preserves scroll ratio where section structure matches (A7); if the target page differs structurally, land at top of the equivalent section rather than a mismatched pixel offset.
6. Performance constraints on scroll effects
- All scroll-linked effects (header compression, spy, reveals) via passive observers/transforms — no scroll-handler layout reads (jank = instant credibility loss with P2).
- Reveal thresholds via IntersectionObserver semantics (conceptually); everything degrades to "visible" when JS is absent — content is never gated behind scroll animation.