Fix #703: Resolve marquee scrolling issue on landing page

[harshentau-spec]

Summary

Fixed the scrolling issue in the marquee section on the landing page. Previously, there was a visible gap/jump when the marquee looped.

Changes

• Implemented seamless infinite scrolling using framer-motion
• Duplicated the tech items list to eliminate gap at the end of the loop
• Animated the track to -50% instead of -100% for smooth continuous motion
• Added smooth hover and tap effects on individual tech cards
• Added required dependencies: framer-motion, lucide-react, tailwindcss-animate

Testing

• Ran locally using npm run dev in the landing-page folder
• Marquee now scrolls infinitely without any gap or jump
• Tested on desktop and mobile emulation — works smoothly
• No console errors

Closes #703

Thanks for reviewing! 🚀

Screen.Recording.2025-12-31.230956.mp4

Summary by CodeRabbit

• Chores

  • Bumped dependency versions (framer-motion, esbuild).

• Refactor

  • Improved tech marquee: duplicated items for smoother looping, reduced travel distance, extended animation timing, simplified container styling, adjusted spacing and padding, and more robust keying for rendered items.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated two dependency versions in landing-page/package.json and refactored the marquee component marqu.tsx to duplicate the tech list 10×, halve the translation range, and increase animation duration to create a smoother continuous marquee.

Changes

Cohort / File(s)	Summary
Dependency Updates landing-page/package.json	Version bumps: framer-motion (^12.23.12 → ^12.23.26), esbuild (^0.24.0 → ^0.27.2). No added/removed deps or API-signature changes.
Marquee Animation Refactor landing-page/src/Pages/Demo/marqu.tsx	Data formatting normalized; technologies duplicated 10× and flattened; animation X changed from -100%→-50%; duration increased (10→50); mapping uses composite keys (\${index}-\${tech.text}); item spacing and padding adjusted; icon inlined; visual container styling simplified.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped along the scrolling line,
Tenfold the gadgets, all in time,
A gentler glide, no sudden stop,
Soft shadows hum as pixels hop,
My whiskers twitch — the marquee's prime! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: fixing marquee scrolling issue #703 on the landing page, which matches the primary objective of the PR.
Linked Issues check	✅ Passed	The PR successfully implements all coding objectives from issue #703: seamless marquee animation, continuous scrolling without visible resets, and smooth looping effect using framer-motion.
Out of Scope Changes check	✅ Passed	All changes are scoped to the marquee issue: dependency version updates support the marquee animation, and marqu.tsx changes directly implement the seamless scrolling fix requested in #703.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e9fccaa and c8c5e2c.

⛔ Files ignored due to path filters (1)

• landing-page/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• landing-page/package.json
• landing-page/src/Pages/Demo/marqu.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• landing-page/package.json
• landing-page/src/Pages/Demo/marqu.tsx

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

landing-page/src/Pages/Demo/marqu.tsx (1)

13-13: Consider a clearer duplication approach.

While Array(10).fill(technologies).flat() works correctly, it creates 10 references to the same array object. A more explicit approach would be Array.from() or flatMap().

🔎 Alternative implementations

-  const repeatedTechnologies = Array(10).fill(technologies).flat();
+  const repeatedTechnologies = Array(10).fill(null).flatMap(() => technologies);

or

-  const repeatedTechnologies = Array(10).fill(technologies).flat();
+  const repeatedTechnologies = Array.from({ length: 10 }, () => technologies).flat();

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4043751 and e9fccaa.

⛔ Files ignored due to path filters (1)

• landing-page/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• landing-page/package.json
• landing-page/src/Pages/Demo/marqu.tsx

🔇 Additional comments (5)

landing-page/src/Pages/Demo/marqu.tsx (3)

6-10: LGTM! Clean data structure.

The technologies array is well-structured with clear text labels and inline icons from lucide-react. The implementation is readable and maintainable.

---

16-25: Excellent fix for seamless scrolling!

The animation configuration correctly implements the marquee fix:

• 10x duplication (40 items) combined with -50% translation scrolls through exactly 5 complete cycles
• When the animation resets, the pattern aligns perfectly, eliminating the visible gap
• Duration of 50 provides smooth, readable scrolling
• Linear easing maintains constant speed for natural infinite motion

This successfully addresses the PR objective of removing visible resets/jumps.

---

27-42: LGTM! Rendering implementation is solid.

The rendering loop correctly maps over the repeated technologies with:

• Unique keys (index + text combination ensures uniqueness across all 40 items)
• Appropriate spacing and styling with dark mode support
• Smooth hover and tap interactions using framer-motion
• Increased separator spacing for better visual clarity

The use of index in keys is acceptable here since the list is static and never reordered.

landing-page/package.json (2)

47-47: Breaking changes in esbuild 0.25.0 are managed by Vite.

The jump to ^0.27.2 does introduce breaking changes: dev server CORS handling (security fix GHSA-67mh-4wv8-2f99) and changes to the serve() API. However, since this project uses Vite ^7.3.0 as its build tool, Vite handles esbuild compatibility internally. No code changes are required.

---

20-20: Approve framer-motion patch update.

The patch-level update from ^12.23.12 to ^12.23.26 is safe. Version 12.23.26 (released December 10, 2025) includes a bug fix for scale correctors initialization, which improves animation behavior in components like marqu.tsx that use motion transforms. No known issues or vulnerabilities.