Optimize: Reduced LCP time #317

Bikash-jha11 · 2025-12-29T15:43:03Z

About Fix:

Initially LCP was too high...

So i animated wrapper, not h1.
LCP fires immediately
Animation still works

Summary by CodeRabbit

Refactor
- Adjusted animation handling and responsive typography styling in the Hero section heading. The layout and content remain unchanged, with animation responsibility redistributed for improved structure.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2025-12-29T15:43:07Z

@Bikash-jha11 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-12-29T15:43:13Z

📝 Walkthrough

Walkthrough

The Hero component's heading animation was restructured by wrapping the h1 element in a motion.div container that now carries animation properties. The inner h1's className was simplified by removing explicit size and transform-related utility classes, consolidating animation logic at the wrapper level.

Changes

Cohort / File(s)	Summary
Hero Component Animation Refactor `apps/web/src/components/landing-sections/Hero.tsx`	Shifted animation responsibility from `motion.h1` to a `motion.div` wrapper. The wrapper now receives `initial="hidden"`, `animate="visible"`, and `itemVariants` props. Inner h1 element's className simplified by removing size and transform utilities.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

Beneath the Hero's shining gaze,
Animation finds a better place,
From h1 to div it takes its flight,
Simpler classes, still looking bright ✨🐰

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Optimize: Reduced LCP time' directly relates to the main change: optimizing LCP by restructuring which DOM element handles animation, shifting animation from h1 to wrapper div.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

apps/web/src/components/landing-sections/Hero.tsx (2)
75-76: Remove redundant animation props.

The explicit initial="hidden" and animate="visible" props are redundant when using variants={itemVariants} (line 77). The parent container at lines 49-54 already orchestrates the animation through containerVariants with staggerChildren, and the variants define the hidden/visible states.

For consistency, see line 55-58 where a similar motion.div uses only variants={itemVariants} without explicit initial/animate props.
🔎 Suggested refactor
-        <motion.div
-          initial="hidden"
-          animate="visible"
-          variants={itemVariants}
-        >
+        <motion.div variants={itemVariants}>
           <h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
             Only platform you need to get into Open Source
           </h1>
         </motion.div>
74-78: Consider adding will-change for consistency.

For consistency with other animated elements in this component (lines 57, 106), consider adding [will-change:transform,opacity] to the wrapper's className since it animates both opacity and y-transform via itemVariants.
🔎 Suggested addition
-        <motion.div variants={itemVariants}>
+        <motion.div 
+          variants={itemVariants}
+          className="[will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
+        >
           <h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
             Only platform you need to get into Open Source
           </h1>
         </motion.div>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4c48e6 and 5d1aad4.

📒 Files selected for processing (1)

apps/web/src/components/landing-sections/Hero.tsx

🧰 Additional context used

📓 Path-based instructions (11)

**/*.{ts,tsx,js,jsx}