Fix Earth globe scroll animation: sizing, scroll range, and easing issues

[krishkhinchi]

Summary

The hero section's 3D Earth globe (Three.js/react-three-fiber + GSAP ScrollTrigger) has several issues affecting layout and animation quality: incorrect initial sizing/position, an oversized scroll-driven animation range that hides mid-page content, an abrupt/unpolished end-of-animation transition, and excess cloud density obscuring the surface texture.

Current Behavior

1. Oversized globe: On page load, the globe renders too large for the hero — it bleeds off the top edge (overlapping the navbar) and off the bottom edge of the viewport, instead of sitting fully contained within the hero with clean padding.
2. Scroll range too long: The scroll-driven pin/scrub animation currently spans nearly the entire page height. This keeps the globe large and pinned on top of mid-page sections (e.g. "From tracked object to resolved conflict", the Ingest/Predict/Resolve/Record feature blocks), making that content effectively unreadable/obscured until the user scrolls almost to the bottom.
3. Rough end-of-animation transition: When the scroll sequence finishes and the globe shrinks/fades out, the transition feels like a snap/pop rather than a smooth ease-out. Suspect a ScrollTrigger pin-release issue (mismatched final transform state, or a leftover pin-spacer causing a layout jump).
4. Excess cloud density (partially addressed — verify still needed): The cloud layer previously made the surface texture hard to see under heavy cloud cover.

Expected Behavior

1. Globe is fully visible and proportionally contained within the hero section at initial load — comparable diameter/position to reference design (right-aligned, vertically centered, margin from navbar and fold line preserved), scaled relative to the hero container rather than a fixed pixel value.
2. The scroll-driven grow/move/rotate sequence completes within a short, explicit scroll range near the top of the page (e.g. within ~1–1.5x viewport height), not across the full page.
3. Once the intro sequence completes, the globe is fully unpinned and removed from the visual flow (faded out + pointer-events: none + render loop stopped, or docked to a small decorative position — TBD per design decision) so all subsequent sections render fully visible and unobstructed at every scroll position.
4. The end-of-sequence transition (shrink/fade/unpin) is smooth and eased, with no visible snap, pop, or layout jump. No leftover pin-spacer elements should remain in the DOM after unpinning.
5. Cloud layer is removed or reduced to a low-opacity/low-density state so land/ocean texture remains clearly visible.
6. Animation remains bidirectional (scrubs correctly on scroll-up), responsive across breakpoints, performant (no dropped frames/render-loop leaks once out of view), and respects prefers-reduced-motion.

Steps to Reproduce

1. Load the landing page at desktop viewport width.
2. Observe the globe's size/position relative to the navbar and hero bounds on initial load.
3. Scroll down slowly through the full page and observe:
   • How long the globe stays large/pinned relative to page sections.
   • Whether mid-page content (feature blocks, stats) is visible or obscured.
   • The visual quality of the transition where the globe shrinks/disappears.
4. Compare against attached reference screenshots/recordings.

Acceptance Criteria

• Globe size/position at scroll = 0 matches reference proportions (contained within hero, no clipping at navbar or fold).
• ScrollTrigger start/end range is scoped to an explicit short scroll distance (not full page height) — value documented in code comments.
• After the intro sequence ends, scrolling through the rest of the page shows all sections fully visible with no globe overlap at any scroll position.
• No leftover pin-spacer or invisible blocking elements after unpin (verify in DevTools).
• End-of-sequence shrink/fade is smooth and eased in both scroll directions.
• Cloud layer opacity/visibility adjusted per design decision (removed or reduced).
• Verified on desktop and mobile breakpoints.
• prefers-reduced-motion: reduce fallback still functions (static frame, no scroll-linked transform).
• No console errors/warnings; no frame drops on mid-range hardware during the intro sequence.

Technical Notes

• Likely implicated: ScrollTrigger config (start, end, scrub, pin), the waypoint scale/position values, and pin-release cleanup logic.
• Check pinSpacing and whether ScrollTrigger.refresh() is needed after unpinning.
• Confirm whether scale is currently a hardcoded value vs. computed relative to hero container dimensions — likely root cause of Bug 1.
• Cross-reference with Lenis smooth-scroll integration if in use, to rule out scroll-position sync issues contributing to the rough transition.

Labels

bug, frontend, 3d/webgl, landing-page