Ticker Scroll

How it works

Ticker Scroll is an animated entrance & kinetic text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Ticker Scroll exposes 3 dedicated controls — Speed, Direction and Edge Fade — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Ticker Scroll — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Archivo Black', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  display: block;
  width: min(620px, 88vw);
  max-width: 100%;
  overflow: hidden;
  position: relative;
  background: hsl(0 0% 9%);
  border-block: 3px solid hsl(38 55% 32%);
  padding-block: 0.4em;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 23%, black 77%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 23%, black 77%, transparent 100%);
}
.text-effect .fx-track {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: text-effect-scroll 13s linear infinite;
  animation-direction: reverse;
}
.text-effect:hover .fx-track {
  animation-play-state: paused;
}
.text-effect .fx-copy {
  color: hsl(38 95% 60%);
  white-space: nowrap;
}
.text-effect .fx-divider {
  display: inline-block;
  color: hsl(38 35% 42%);
  padding-inline: 0.55em;
  white-space: nowrap;
}

@keyframes text-effect-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

Related Entrance & Kinetic effects

• Fade In
• Letter Wave
• Stagger Reveal
• Typewriter
• Jelly Wobble