fix: correct marquee animation direction and improve smoothness

[madhavansingh]

Addressed Issues:

Fixes #24

Screen Recordings:

Before:

Screen.Recording.2026-03-18.at.3.43.04.PM.mov

• The scrolling tags were appearing from the center and moving abruptly
• Animation felt broken and not smooth

After:

Screen.Recording.2026-03-18.at.6.53.39.PM.mov

• Animation now flows properly in a continuous direction
• Tags move smoothly without any sudden start from the center
• Overall UI feels more polished

Additional Notes:

• Fixed the animation direction and behavior of the scrolling tags
• Adjusted transform values to ensure a consistent flow
• Improved smoothness for a better user experience
• No breaking changes introduced

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

Summary by CodeRabbit

• Style
  • Enhanced marquee animation with a longer, smoother loop and adjusted entrance/loop sequencing.
  • Increased spacing between marquee items and refined item markup for consistent spacing and hover behavior.
• Accessibility
  • Respects reduced-motion preferences to disable or simplify marquee animation for users who prefer reduced motion.
• Performance
  • Extended marquee content to create a longer continuous sequence for a seamless visual flow.

[coderabbitai]

Walkthrough

Updates marquee rendering and animation in src/Pages/Demo/marqu.tsx: duplicates the technologies list 16×, adjusts animation start/end positions and duration, adds reduced-motion handling, and modifies container/item spacing and markup to produce a seamless left-to-right marquee.

Changes

Cohort / File(s)	Summary
Marquee Animation src/Pages/Demo/marqu.tsx	Duplicates technologies 16× and flattens for longer marquee, applies useReducedMotion-aware animation (start at -50% → 0% for non-reduced motion, 45s linear infinite), increases separator spacing, switches container to w-max, wraps items in motion.span, and updates hover/spacing markup.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

Typescript Lang

Poem

🐰 I hop the tags sixteen times round,
A seamless scroll, no center found,
Left to right I spin and prance,
Motion kind for every glance,
Tiny dots keep rhythm in my bound.

🚥 Pre-merge checks | ✅ 4

✅ 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 accurately describes the main changes: correcting marquee animation direction and improving smoothness by extending duration, adjusting transform values, and respecting reduced motion preferences.
Linked Issues check	✅ Passed	The changes directly address issue #24 by implementing seamless marquee animation with duplicated content, adjusting transform values from 0% to -50%, extending duration to 45s, and respecting reduced motion preferences.
Out of Scope Changes check	✅ Passed	All changes are scoped to the marquee animation component; spacing adjustments and hover styling updates are directly related to improving animation smoothness and appearance as intended.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

[madhavansingh]

Hi @Zahnentferner

I’ve fixed the marquee animation issue (#24).

The scrolling now flows smoothly and no longer starts from the center.
Please take a look when you get time.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/Pages/Demo/marqu.tsx`:
- Around line 34-43: The marquee's infinite motion should respect the user's
reduced-motion preference: import useReducedMotion from 'framer-motion', call it
(e.g., const isReducedMotion = useReducedMotion()) and conditionally disable or
simplify the animation props on the motion.div (the element currently using
initial, animate, and transition). If isReducedMotion is true, remove the
infinite repeat (set repeat to 0 or omit transition/animate) and keep a static
or subtle non-moving state (e.g., use initial only), otherwise keep the existing
animate/transition with duration:45, ease:"linear", repeat:Infinity. Ensure the
hook is used in the same component that renders the motion.div so the animation
props are set based on isReducedMotion.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 62a6b7a6-b503-4056-aa8c-799f45622d96

📥 Commits

Reviewing files that changed from the base of the PR and between 1496367 and 961c416.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (1)

• src/Pages/Demo/marqu.tsx

[madhavansingh]

Added support for reduced motion preference and updated animation accordingly.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/Pages/Demo/marqu.tsx (1)

27-77: ⚠️ Potential issue | 🟠 Major

Prevent screen readers from reading duplicated marquee items 16×.

The repeated visual track is decorative, but currently exposed semantically; assistive tech may announce the same tags many times. Hide the animated track and provide one accessible list.

Proposed fix

       <motion.div
+        aria-hidden="true"
         className="flex w-max items-center"
         initial={shouldReduceMotion ? undefined : { x: "-50%" }}
         animate={shouldReduceMotion ? { x: 0 } : { x: "0%" }}
@@
         {duplicatedTechnologies.map((tech, index) => (
@@
         ))}
       </motion.div>
+      <ul className="sr-only">
+        {technologies.map((tech) => (
+          <li key={tech.text}>{tech.text}</li>
+        ))}
+      </ul>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Pages/Demo/marqu.tsx` around lines 27 - 77, The repeated marquee track is
decorative and being announced repeatedly; mark the animated duplicate track and
its repeated items as presentation (add aria-hidden="true" on the motion.div
that renders duplicatedTechnologies and on each duplicated item/motion.span, and
ensure they are not focusable e.g., tabIndex={-1}). Then render a single
accessible list (e.g., a semantic <ul> with one mapping over technologies to
produce <li> entries, include an appropriate aria-label or visually-hidden
heading) so screen readers only encounter one set. Update references:
duplicatedTechnologies, the motion.div container rendering
duplicatedTechnologies, each motion.span and the duplicated <div> item, and
create a single accessible <ul> that maps the original technologies array.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/Pages/Demo/marqu.tsx`:
- Around line 27-77: The repeated marquee track is decorative and being
announced repeatedly; mark the animated duplicate track and its repeated items
as presentation (add aria-hidden="true" on the motion.div that renders
duplicatedTechnologies and on each duplicated item/motion.span, and ensure they
are not focusable e.g., tabIndex={-1}). Then render a single accessible list
(e.g., a semantic <ul> with one mapping over technologies to produce <li>
entries, include an appropriate aria-label or visually-hidden heading) so screen
readers only encounter one set. Update references: duplicatedTechnologies, the
motion.div container rendering duplicatedTechnologies, each motion.span and the
duplicated <div> item, and create a single accessible <ul> that maps the
original technologies array.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: ecdfd508-baca-47ea-9c3f-9682f3210419

📥 Commits

Reviewing files that changed from the base of the PR and between 961c416 and 26cc0de.

📒 Files selected for processing (1)

• src/Pages/Demo/marqu.tsx