Skip to content

fix(hero): correct Earth globe sizing, scroll range, and transition easing #224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krishkhinchi merged 1 commit into from
Sep 18, 2026
Merged

fix(hero): correct Earth globe sizing, scroll range, and transition easing #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"sonner": "^2.0.7",
"tailwind-merge": "^3.6.0",
"tailwindcss": "^4.3.0",
"three": "^0.186.0",
"tw-animate-css": "^1.4.0",
"vite-plugin-cesium": "^1.2.23",
"zod": "^4.4.3",
Expand All @@ -55,6 +56,7 @@
"@types/node": "^24.13.3",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@types/three": "^0.186.0",
"@vitejs/plugin-react": "^6.0.1",
"@vitest/browser-playwright": "^4.1.10",
"@vitest/coverage-v8": "^4.1.10",
Expand Down
Binary file added frontend/public/textures/earth/2k_earth_clouds.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/2k_earth_daymap.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/8081_earthbump4k.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/8081_earthlights4k.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/8081_earthspec4k.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/lensflare0.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/lensflare1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/night.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/textures/earth/specularClouds.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 16 additions & 25 deletions frontend/src/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import { Link } from "react-router-dom";
import { MouseParallax } from "./MouseParallax";

const TELEMETRY = [
{ label: "OBJECTS TRACKED", value: "34,900+" },
{ label: "OBJECTS TRACKED", value: "64,000+" },
{ label: "ACTIVE CONJUNCTIONS", value: "128" },
{ label: "AVG. LEAD TIME", value: "36 HRS" },
{ label: "MODEL CONFIDENCE", value: "97.2%" },
{ label: "MODEL CONFIDENCE", value: "98.2%" },
];

const fadeUp = {
Expand All @@ -25,41 +25,32 @@ const fadeUp = {

export function Hero() {
return (
<section className="relative flex min-h-screen w-full items-center overflow-hidden bg-[radial-gradient(120%_90%_at_50%_10%,#0B111F_0%,#05070C_60%)] font-[Inter]">
<MouseParallax className="absolute inset-0" strength={20}>
<section id="hero" className="relative flex min-h-screen w-full items-center overflow-hidden bg-[radial-gradient(120%_90%_at_50%_10%,#0B111F_0%,#05070C_60%)] font-[Inter]">
<MouseParallax className="absolute inset-0 z-0" strength={20}>
<Particles quantity={220} />
</MouseParallax>


{/* Full-bleed Fixed Viewport Globe Layer */}
<div className="pointer-events-none fixed inset-0 z-[1] will-change-transform">
<Globe />
</div>

{/* Orbit satellites overlay synced with GSAP scroll timeline */}
<div
className="absolute left-1/2 top-[32%] h-[240px] w-[240px] max-w-[85vw] -translate-x-1/2 -translate-y-1/2 opacity-40
sm:left-auto sm:right-[3%] sm:top-1/2 sm:h-[380px] sm:w-[380px] sm:translate-x-0 sm:-translate-y-1/2 sm:opacity-70
lg:right-[5%] lg:h-[520px] lg:w-[520px] lg:opacity-90"
id="orbit-satellites-wrapper"
className="pointer-events-none absolute left-1/2 top-[32%] h-[240px] w-[240px] max-w-[85vw] -translate-x-1/2 -translate-y-1/2 opacity-0
sm:left-auto sm:right-[3%] sm:top-1/2 sm:h-[380px] sm:w-[380px] sm:translate-x-0 sm:-translate-y-1/2
lg:right-[5%] lg:h-[520px] lg:w-[520px] z-[2] transition-opacity duration-300"
>
<MouseParallax strength={10}>
{/* <MouseParallax strength={10}>
<OrbitSatellites />
</MouseParallax>

<MouseParallax strength={20} className="absolute inset-0 flex items-center justify-center">
<Globe className="h-max-[480px] w-max-[480px]" />
</MouseParallax>
</MouseParallax> */}
Comment on lines +45 to +47

@codeant-ai codeant-ai Bot Sep 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The satellite component is commented out while its wrapper remains, so the timeline animates an empty overlay and no satellites appear.

Assessment: 🟠 Major · 🔁 Occurrence: Often · 🏷️ Incomplete implementation

Use CodeAnt Skill Fix in Cursor Fix in VSCode Claude

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** frontend/src/components/Hero.tsx
**Line:** 45:47
**Comment:**
	*Incomplete Implementation: The satellite component is commented out while its wrapper remains, so the timeline animates an empty overlay and no satellites appear.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

</div>

<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(90deg,#05070C_0%,rgba(5,7,12,0.85)_38%,rgba(5,7,12,0.25)_62%,transparent_85%)] sm:bg-[linear-gradient(90deg,#05070C_0%,rgba(5,7,12,0.85)_38%,rgba(5,7,12,0.25)_62%,transparent_85%)]" />

<div className="relative z-10 mx-auto w-full max-w-[1280px] px-6 sm:px-8 lg:px-10 pt-[120px] sm:pt-[160px] pb-12">
<div className="max-w-[620px]">
<motion.div
initial="hidden"
animate="show"
custom={0}
variants={fadeUp}
className="mb-5 inline-flex items-center gap-2 font-[JetBrains_Mono] text-xs tracking-[0.2em] text-[#8793AC]"
>
<span className="h-1.5 w-1.5 rounded-full bg-[#4CD6F0] shadow-[0_0_8px_#4CD6F0]" />
ORBITAL INTELLIGENCE PLATFORM
</motion.div>

<motion.h1
initial="hidden"
animate="show"
Expand Down
Loading
Loading