marquee-text-strip

Summary

Soft-grey horizontal strip of capability words ("Brand Strategy", "Digital studio", "Email Marketing", …) separated by an icomoon glyph. The list is duplicated 8x and translated -100% over 600 seconds for an extremely slow, hypnotic infinite scroll, all in pure CSS.

HTML structure (minimal)

<div class="slide-text-outer">
  <ul class="text-box">
    <li>Brand Strategy</li>
    <li>Digital studio</li>
    <li>Email Marketing</li>
    <li>Data Analytics</li>
    <li>Innovative Ideas</li>
    <li>Ui/ux Design</li>
    <!-- duplicated ~8x to ensure seamless loop -->
  </ul>
</div>

Key SCSS tokens

.slide-text-outer {
  position: relative;
  background: #F2F2F2;
  padding: 40px 0px;
  overflow: hidden; /* implicit via wrapper */
}

.slide-text-outer .text-box {
  display: flex;
  align-items: center;
  gap: 120px;
  width: max-content;
  animation: scroll-left 600s linear infinite;
}

.slide-text-outer .text-box li {
  font-family: var(--title-font); /* Space Grotesk */
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--title-color);
}

.slide-text-outer .text-box li::before {
  content: '\e904';
  font-family: 'icomoon';
  position: absolute;
  font-size: 40px;
  top: 0; right: -80px;
}

@keyframes scroll-left {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.slide-text-outer.light-section { background: #1A1A1A; }
.slide-text-outer.light-section .text-box li { color: #fff; }
.slide-text-outer.light-section .text-box li::before {
  background: var(--theme-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Notable details

• width: max-content prevents the flexbox from clamping the row, so the row really is as long as all 48 items.
• Duplicating the items in markup (rather than CSS or JS) is the simplest way to fake an infinite loop without seam.
• 600s is uniquely slow — most marquees are 20-60s; the slowness is what gives this a calm "always moving in the background" feel rather than a noisy banner.
• Light-section variant flips the icon separator to the brand gradient via -webkit-background-clip: text.

Use when

• Section dividers that should communicate breadth of services without competing visually.
• Brand-keyword bands.
• Hero spacers below a banner that need motion but not focus.

Caveats

• Duplicated markup adds DOM weight and is annoying to maintain — change a word in one place and you have to change it in 8.
• 600s = 10 minutes for a full cycle, so on short visits the user may not notice it's animated at all.
• Icomoon dependency for the separator glyph; replacing the font requires picking a new content code.