Premium Website Animation With AI: The Endless CSS Strip

An endless strip of moving text is the easiest way to give a site that creative-studio feel. With an AI coding agent you can build it in about 30 seconds, in plain HTML and CSS. Below you get the ready prompt, the bug that only shows up on big screens, and how to avoid it from the start.

What It Is

It's called a marquee: a band of text or logos that moves across the screen by itself and never ends. Think of a TV news ticker, but calmer and better looking. There is one trick: write the same row of words twice, then slide it left by exactly half its width, forever.

A good live example is the home page of Boc.Studio, a brand studio in Barcelona we found on siteinspire. After a short orange intro you land on big project images, with a thin orange band across the middle. Inside it you read the studio's name, a short line about their work, its coordinates and the word Barcelona. Then again, and again.

The page's styles show how it's built: a 30-second CSS animation at a perfectly even speed that moves the row by exactly half its width. Inside, the row is there twice. In a window 1,440 pixels wide it moved about 79 pixels per second, slow enough to read. With reduced motion turned on, it stood still.

Why It Helps

A site can be well made and still feel static. A strip like this makes it feel alive without getting in the way, for four reasons:

• It asks for nothing. Nothing pops, flashes or waits for a click. It adds mood, and you can ignore it.
• The speed is even. Slow and steady, like background music. A strip that speeds up and slows down feels like it's trying to say something.
• It runs edge to edge. It touches both sides of the window, so your eye reads it as endless. Stopped in the middle, it would look like a box.
• It anchors the brand. The images behind it change, the name and the city stay. Your eye has something to hold on to.

And it costs almost nothing: no JavaScript, no libraries, two small files.

How to Do It

1. Open an empty folder and give the prompt below to an AI coding agent. We used Claude Code, allowed only to read and write files.
2. Three layers. The band, a "track" inside the band and, on the track, the same list of items twice. The second copy gets aria-hidden, an attribute that tells screen readers to skip it, so a blind visitor hears the list once.
3. Slide by exactly half. The band has overflow hidden, so anything outside its edges is hidden. The track is as wide as its content (max-content), so the words aren't squeezed. Over 30 seconds it moves from zero to minus 50% of its width, linear (same speed start to end) and infinite (never stops). Halfway through, the second copy sits where the first one started, so when the loop restarts your eye never sees the jump.
4. Make each row at least as wide as the screen. Give the row a minimum width of 100vw, the full window, and share the leftover space between the items. It's the fix for the bug you'll see below, so put it in from day one.
5. Respect reduced motion. Some people turn it on in their phone or computer settings, because constant movement makes them dizzy or distracted. With the CSS rule prefers-reduced-motion, the animation stops, the second copy disappears and the items wrap, so every word stays readable.
6. Pause on hover. One line of CSS, and it helps anyone who wants to read a word as it goes by.

Ready to copy. Swap the text in square brackets for your own:

If you already have a strip on your site and you see a gap, this is the fix prompt we used:

Quick Test

Ten minutes, three checks:

1. Wide screen. Open the page in a window 1,920 pixels wide, then 2,560. Wait for the end of a loop and watch the right edge. An empty piece of band means the row is too short.
2. Reduced motion. Turn on reduced motion in your computer settings and reload. The strip should stand still, with every word readable.
3. Screen reader. Let one read the band aloud. The items should come through once, not twice.

Success means no gap, no clipped words and nothing read twice.

In our test the first build looked perfect on a laptop. At 1,920 pixels, at the end of a loop, an orange gap showed up on the right. One row of four items was about 1,650 pixels wide, and two copies only fill a screen if each copy is at least as wide as the screen. The fix prompt added a few lines, and a manual check at 1,920 and 2,560 pixels confirmed the gap was gone.

Watch Out For

• Looking is still your job. In our run the agent couldn't open a browser, said so plainly and asked for a manual check. The bug wasn't in the code it wrote. It was in a screen size nobody had looked at yet.
• Nothing important inside. A marquee is for mood: a name, a tagline, a city. Never something people must read to use the page.
• Pause on hover only helps mouse users. If your strip runs for a long time and holds important words, a small pause button is the kinder choice.
• Duplicate links. If the items are links, keep them in the first copy only, so keyboard users don't tab through the same links twice.
• One per page. One marquee per page is plenty.

Next step: pick a page on your site that feels flat, add one calm strip with your name or tagline, and look at it on the biggest screen you have. Then, for motion that follows the scroll, try the Lenis-style horizontal scroll, or polish the bottom of the page with a premium footer.

This pill is adapted from a piece Alek published on Medium. More effects ready to rebuild, each with its own prompt, live on MagpUI, the gallery Alek is building: every piece belongs to its author and links back to the original. Thanks to Boc.Studio for a home page worth studying.

In short: One slow, even, edge-to-edge text strip makes a site feel alive: AI writes it in 30 seconds, checking wide screens is still your job.