∞ forever components

Kinetic Typography

Marquee Ticker

Two rows of bold words scroll in opposite directions — yellow left, teal right — with red bullet separators on a dark green background, news-ticker style.

csslight complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Brand marquees, event countdowns, portfolio hero sections, or any looping announcement banner needing kinetic energy.

When not to

Contexts where users need to read the text carefully — fast scroll speed and opposing directions make sustained reading difficult.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change row 1 words to ["DESIGN","BUILD","SHIP","ITERATE","LAUNCH"], set yellow to #FF6B6B, and slow row 1 scroll to 20s by editing the .a animation duration. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • row 1 word list (fill t1 array)
  • row 2 word list (fill t2 array)
  • scroll speeds (.a 14s / .b 18s)
  • text colors (.a span #ffd23f / .b span #1dd3b0)
  • font size range (clamp 26px, 11vw, 76px)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • duplicate unit in fill() for seamless 50% loop
  • visibilitychange pause handler
  • prefers-reduced-motion guard
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Seamless loop relies on exact 50% translateX — adding/removing words without duplicating the unit will break the loop
  • No click or hover interactivity; speed cannot be changed at runtime without JS

marqueetickerscrolltypographyloopnews-tickerkinetic-type

More Kinetic Typography components

  • Weight Morph WaveEach letter of a word pulses font-weight and vertical scale in a staggered sine wave, shifting hue from cyan to blue.
  • Scramble DecodeNeon-green monospace words scramble through random glyphs then lock left-to-right like a terminal decrypting. Auto-cycles; click skips to next word.
  • Split-Flap BoardSix amber tiles cycle through letters to spell airport-style words (DEPART, ARRIVE, ONTIME, BOARDS) on a dark charcoal background with a rotateX flip…
  • Gradient ShimmerBold "SHIMMER" text with a rainbow gradient clipped to the letterforms, continuously panning for a glossy iridescent sweep on deep umber.
  • Glitch RGB SplitRed and cyan pseudo-element copies of GLITCH drift and randomly snap with clipped displacement, simulating a CRT RGB-split glitch on near-black.
  • Moving MaskDiagonal gradient light band sweeps across REVEAL, illuminating letters in shifting teal-copper hues against dark. Pure CSS mask + background-clip animation.