fix(docsite): keep the hero's aurora glow pinned on mobile

[imdreamrunner]

Follow-up to #5415. Keeps its fix; restores the appearance it changed.

What happened

#5415 stopped the aurora glow painting past the end of the page below 1024px, which is what let overscroll-behavior-y: none retreat to desktop widths and gave mobile back its pull-to-refresh. That is right and stays.

It did it by unpinning the glow — position: fixed → absolute in ordinary flow. That also changed how the hero looks. The three aurora blobs sit low in the glow's 1050px box (65–85% down), so:

• pinned, they parked near the bottom edge of the screen, largely out of frame
• unpinned, they scroll up through the viewport with the hero

So mid-scroll the mobile home page is now visibly warmer than it was. Scroll the home page to ~600px on a phone and compare against the deployed site before yesterday: the cream wash behind the cards is new.

	before #5415	after #5415
pixels shifted ≥10/255	—	20–25% of the viewport
peak shift	—	51/255 — rgb(248,244,237) → rgb(243,223,186)

The middle panel is what is deployed today. The right panel is the difference, amplified 8×.

This was not visible in #5415's verification because computed styles at a single scroll position cannot show it, and it is not visible to pixelmatch at default settings either — its perceptual threshold discards a soft wash of exactly this kind. It needs a raw channel-delta check.

The fix

Bounded and pinned are not in conflict, and the hero already had a layer that is both: cardsLayer is position: sticky; height: 0. Sticky pins to the viewport exactly like fixed while the hero is on screen, and stops existing once the band has scrolled by — so it cannot reach the overscroll gap.

The glow moves into that layer as an absolute child, painting under the cards. The layer is renamed pinLayer, since it now carries both.

• below 1024px — glow is pinned again, and still bounded
• at and above 1024px — nothing changes; the glow stays fixed alongside heroContent and the stage, and the desktop rule is untouched

Net diff against main is small: the glow's element moves inside the layer that already existed, and two comments are corrected.

Test plan

New test apps/docsite/src/__tests__/hero-glow-pinning.test.ts asserts both halves of the contract, because each was traded away once:

	pre-#5392 (fixed)	#5415 (in-flow absolute)	this PR
bounded — can't reach the overscroll gap	❌	✅	✅
pinned — doesn't scroll with the hero	✅	❌	✅

Verified by checking out each of those two states and running the test against it: the pre-#5392 source fails both, the merged source fails the pinning assertion, this branch passes both. The pinning half is structural — the glow's element has to be inside the sticky layer — because the property alone (absolute) is identical in the broken and fixed cases.

Measured on this build against the pre-#5392 appearance (the glow put back to fixed in the same DOM), reducedMotion: 'reduce' so the theme reel holds one slide, canary banner removed so the header is production's 48px, ten scroll offsets per viewport:

viewport	differing pixels (threshold 0)	max channel delta	fixed layers reaching the viewport bottom at page end
390×844	0	0/255	1 → 0
900×1200	0	0/255	0 → 0
1280×900	0	0/255	2 → 2 (desktop, unchanged)

overscroll-behavior-y stays auto on mobile — the #5392 fix is intact.

apps/docsite vitest run (405 passed), tsc --noEmit, and pnpm lint:strict (0 errors) are green on current main.

Related

• docsite: contain the desktop-pinned hero layers so overscroll suppression can be removed entirely #5470 tracks the desktop half (the 2 → 2 row above); this PR deliberately does not touch it.
• fix(docsite): pin the hero with sticky rails, drop the overscroll suppression #5480 implements that desktop half on top of fix(docsite): restore pull-to-refresh on mobile, scope the overscroll suppression to desktop #5415, so it inherits the unpinned mobile glow — its 0-pixel baseline is post-fix(docsite): restore pull-to-refresh on mobile, scope the overscroll suppression to desktop #5415. The two are compatible: if it lands first, this change reduces to moving the glow into its narrow-width rail.
• docs(docsite): correct two stale backdropGlow comments left by #5415 #5467 corrects one of the same comments; if that lands first this PR's version supersedes it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 26, 2026 3:50am

[rubyycheung]

The design intent is to keep the gradients to be where the UI elements are

[imdreamrunner]

We will keep the current behavior in doc site~~