Infinite Scrolling Marquee Component

[Castellon-ACM]

📝 Description

Implement a modern, high-performance Infinite Marquee (Scrolling Text) component. This will be used to highlight announcements, blog categories, or promotional text in a visually engaging, "exotic" way.

🎯 Acceptance Criteria

• Seamless Loop: The animation must be perfectly infinite with no visible "jumps" or white spaces when restarting.
• Direction: Text moves from right to left.
• Performance: Must use CSS transform: translateX to ensure 60fps smoothness (hardware acceleration).
• Interactivity: The animation should pause on :hover.
• Responsive: Font sizes and container height must adapt to mobile devices.
• Visual Polish: Add semi-transparent gradient masks on the left and right edges for a "fade-in/out" effect.

🛠 Technical Specifications

• HTML Structure: A parent wrapper with overflow: hidden containing a flexbox child with duplicated content.
• CSS Properties:
  • white-space: nowrap to keep text on a single line.
  • will-change: transform for GPU optimization.
  • Linear keyframe animation from 0% to -100%.

💻 Proposed Implementation

HTML Structure

<div class="marquee-wrapper">
  <div class="marquee-content">
    <span>YOUR TEXT HERE • </span>
    <span>YOUR TEXT HERE • </span>
  </div>
</div>