Seamless CSS Marquees
The tax you pay to run multiple agents
Meet Cline Kanban, a CLI-agnostic visual orchestration layer that makes multi-agent workflows usable across providers. Multiple agents, one UI. It’s the air traffic controller for the agents you're already running, regardless of where they live.
* Interoperable: Claude Code and Codex compatible, with more coming soon.
* Full Visibility: Confidently run multiple agents and work through your backlog faster.
* Smart Triage: See which agents are blocked or in review and jump in to unblock them.
* Chain Tasks: Set dependencies so Agent B won't start until Agent A is complete.
* Familiar UI: Everything in a single Kanban view.
* Stop tracking agents and start directing them. Get a meaningful edge with the beta release.
Install Cline Kanban Today: npm i -g cline
Creating an infinite scrolling marquee used to be a job for heavy JavaScript libraries. If you tried to do it with CSS, you’d often run into a “jump” or a “gap” once the animation looped.
You can actually build a perfect, infinite marquee with just a few lines of CSS.
The Logic: The “Double-Content” Trick
To make a marquee seamless, you need to duplicate your content once. If you have a list of logos, you render that same list twice back-to-back inside your container.
When you animate the container to translateX(-50%), you are essentially moving the first half out of view. Because the second half is an identical copy, the moment the animation resets to 0, the eye can’t see the jump. It looks like one continuous loop.
The Code:
.marquee > div {
display: inline-flex;
/* Move half the total width of the doubled content */
animation: marqueeLeft 62s linear infinite;
}
@keyframes marqueeLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
Here’s the result:
Why this works:
Compositor Layers: Using transform instead of left or margin ensures the animation runs on the GPU. This prevents “stuttering” as the logos move across the screen.
Mathematical Precision: By using -50%, you don’t need to know the exact pixel width of your content. Whether your marquee is 1000px or 5000px wide, the loop will always be frame-perfect.
Accessibility: Unlike the old HTML tag, you can easily add a prefers-reduced-motion media query to pause the animation for users who find it distracting.
You can see it in action here: Marquee with Pause on Hover
Happy coding!
Marko