Make the landing-page scroll narrative work on mobile#50
Merged
Conversation
Convert the fixed full-viewport hero canvas into a sticky 46vh top band that the text scenes scroll under (mobile scrollytelling), so the figure and text no longer overlap on narrow screens. Desktop is unchanged. - DOM: wrap canvas in .scrolly/.stage; stage is fixed on desktop, position:sticky height:46vh on mobile with an opaque paper background. - drawHero: mobile vertical-composition branch (band-relative baseY/amp, effect panel, std-diff readout; dock disabled); trim tau value labels and sub-captions; reposition the hidden-U cue; center the dot cloud. - Add a mobile-only scroll progress bar. - Mobile-aware IntersectionObserver rootMargin for active-text in the band. WSGA math object untouched (verify_hero_math.mjs still passes). Docs-only change; no version bump required.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The landing page (
docs/index.html) reads beautifully on desktop but collapses on mobile: the fixed full-viewport hero canvas stays frozen mid-screen while the stacked text scrolls through it, leaving the figure and text overlapping into an illegible mess.This PR adapts the curated scroll narrative to narrow screens using the canonical mobile scrollytelling pattern, while leaving desktop pixel-identical.
.scrolly/.stage. On desktop the stage staysposition:fixedfull-viewport (unchanged); on mobile (<= 760px) it becomesposition:sticky, a 46vh top band with an opaque paper background. Text scenes scroll under the pinned figure.drawHero): aMOBbranch retunes the vertical layout to band-relative fractions (baseY/amp, effect panel, std-diff readout; dock disabled since the band is already top-pinned), trims the small tau value labels and inline sub-captions for legibility, repositions the hidden-U cue below the dot lanes, and re-centers thealign=0dot cloud (it was seeded for the desktop right-half).IntersectionObserverrootMarginis now mobile-aware so scene text un-dims in the lower reading band.The continuous scroll-scrubbed morph (effect gap 4pp -> 9pp, std-diff 0.94 -> 0.04) is fully preserved on mobile.
Notes
WSGAmath object is untouched --node specs/verify_hero_math.mjsstill passes (std-diff 0.941 -> 0.041, gap 4.0 -> 9.0pp).prefers-reduced-motionrenders the static balanced end-state inside the band; scene text is real DOM (no-JS safe).CLAUDE.md.Test Plan
node specs/verify_hero_math.mjspassesmain