fix(hero): correct Earth globe sizing, scroll range, and transition easing - #224
Merged
Merged
Conversation
🤖 CodeAnt AI — Review Status
|
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: ⛔ Files ignored due to path filters (10)
📒 Files selected for processing (8)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
codeant-ai
Bot
added
the
size:XL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
Comment on lines
+45
to
+47
| {/* <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> */} |
There was a problem hiding this comment.
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
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
Comment on lines
+47
to
+52
| const renderer = new THREE.WebGLRenderer({ | ||
| canvas, | ||
| antialias: true, | ||
| alpha: true, | ||
| powerPreference: "high-performance", | ||
| }); |
There was a problem hiding this comment.
Suggestion: WebGLRenderer construction can throw when WebGL is unavailable, and this effect has no fallback, causing the landing page to fail instead of rendering usable content.
Assessment: 🔴 Critical · 🔁 Occurrence: Rarely · 🏷️ Possible bug
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/globe.tsx
**Line:** 47:52
**Comment:**
*Possible Bug: `WebGLRenderer` construction can throw when WebGL is unavailable, and this effect has no fallback, causing the landing page to fail instead of rendering usable content.
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
Comment on lines
+62
to
+64
| const dayTexture = textureLoader.load( | ||
| "/textures/earth/2k_earth_daymap.jpg", | ||
| () => setIsLoaded(true) |
There was a problem hiding this comment.
Suggestion: If the day texture request fails, isLoaded never becomes true and the canvas remains transparent indefinitely.
Assessment: 🟠 Major · 🔁 Occurrence: Sometimes · 🏷️ Possible bug
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/globe.tsx
**Line:** 62:64
**Comment:**
*Possible Bug: If the day texture request fails, `isLoaded` never becomes true and the canvas remains transparent indefinitely.
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| setupTimeline({ | ||
| w0: { x: 1.20, y: -0.2, scale: 0.85, tiltX: THREE.MathUtils.degToRad(23.5) }, | ||
| w1: { x: 1.2, y: 0.15, scale: 1.20, tiltX: THREE.MathUtils.degToRad(18) }, | ||
| w2: { x: 1.55, y: -0.2, scale: 2.80, tiltX: THREE.MathUtils.degToRad(26) }, |
There was a problem hiding this comment.
Suggestion: On desktop, the globe grows to radius 2.8 while the camera moves to z 2.7, placing the camera inside front-sided Earth and cloud meshes and making them disappear or render incorrectly.
Assessment: 🟠 Major · 🔁 Occurrence: Often · 🏷️ Logic error
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/globe.tsx
**Line:** 296:296
**Comment:**
*Logic Error: On desktop, the globe grows to radius 2.8 while the camera moves to z 2.7, placing the camera inside front-sided Earth and cloud meshes and making them disappear or render incorrectly.
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| currentDragRotation = THREE.MathUtils.lerp(currentDragRotation, targetDragRotation, 0.08); | ||
|
|
||
| // Additive idle rotation (independent of scroll — keeps globe alive when paused) | ||
| idleRotation += delta * 0.04; |
There was a problem hiding this comment.
Suggestion: Reduced-motion users still receive continuous idle rotation because the animation loop updates idleRotation regardless of the preference.
Assessment: 🟠 Major · 🔁 Occurrence: Sometimes · 🏷️ Logic error
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/globe.tsx
**Line:** 368:368
**Comment:**
*Logic Error: Reduced-motion users still receive continuous idle rotation because the animation loop updates `idleRotation` regardless of the preference.
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| ref={canvasRef} | ||
| className={cn( | ||
| "size-full opacity-0 transition-ui contain-[layout_paint_size]" | ||
| "h-full w-full select-none touch-none pointer-events-auto transition-opacity duration-700", |
There was a problem hiding this comment.
Suggestion: The fixed canvas covers the whole viewport and overrides its parent’s pointer-events-none, so it captures clicks on links and controls in sections beneath the hero.
Assessment: 🟠 Major · 🔁 Occurrence: Sometimes · 🏷️ Possible bug
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/ui/globe.tsx
**Line:** 432:432
**Comment:**
*Possible Bug: The fixed canvas covers the whole viewport and overrides its parent’s `pointer-events-none`, so it captures clicks on links and controls in sections beneath the hero.
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
CodeAnt Nitpicks3 code suggestions1.
|
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
2 participants
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.
User description
Summary
Fixes the hero section's 3D Earth globe scroll animation — corrects oversized initial rendering, scopes the scroll-driven sequence to the hero instead of the full page, smooths the end-of-sequence transition, and reduces cloud density on the surface texture.
Closes #223
Changes
ScrollTriggerstart/end is now scoped to a short, explicit distance near the top of the page (~1–1.5x viewport height) instead of spanning the entire page height. The intro grow/move/rotate sequence completes early, before mid-page content sections.pointer-events: none+ visibility handling) so it no longer overlaps or obscures subsequent sections (feature blocks, stats, CTA, footer). Removed a leftover pin-spacer that was causing layout inconsistency after unpin.matchMedia.prefers-reduced-motionfallback still renders a static frame with no scroll-linked transform.Before / After
Before
After
Testing
prefers-reduced-motion: reduceenabled in OS/browser settings.Notes for reviewers
CodeAnt-AI Description
Add a scroll-driven 3D Earth animation to the hero section
What Changed
Impact
✅ Richer Earth visualization✅ Scroll-guided hero storytelling✅ Responsive globe placement💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit