Act as a senior front-end engineer. Build an infinite marquee for {{page_or_feature}} in my {{tech_stack}} project, showing real items only: client logos we have permission to use, or real quotes with names. Read the existing components first. What moves and why: a slow loop signals there's more than fits on screen. It's background motion, so it must never compete with the content around it. Build: - The items rendered once for people and screen readers, then duplicated once for a seamless loop, with the copy hidden from assistive tech and not focusable - One CSS animation moving the track with translateX from 0 to minus 50%, linear, looping - Speed set in pixels per second, about 40, with the duration calculated from the track width, so adding items doesn't speed it up - Soft edge fades with a mask, and even gaps between items - Logos sized by visual weight, not raw width, in one color at 60% opacity, full opacity on hover Control: - Pauses on hover and whenever an item inside has focus - A visible Pause button, since content moving for over 5 seconds needs a way to stop it under WCAG 2.2.2 - Pauses when off screen or when the tab is hidden - Under prefers-reduced-motion: reduce, no animation: items show in a wrapping row, or a horizontally scrollable list with a visible scroll cue Performance budget: transform only, the animation on the compositor, no JavaScript per frame, and logo files under 10KB each with width and height set, so nothing shifts. Avoid: two rows scrolling in opposite directions, fast speeds, placeholder logos, and marquees of feature buzzwords. Finish with how to add or remove items and the files changed.