Text effects

Looping text ribbon

A colored ribbon carries a repeating phrase along a wavy, circular, or arched path, scrolling endlessly like a seal or badge.

Using Looping text ribbon

A colored ribbon carries a repeating phrase along a wavy, circular, or arched path, scrolling endlessly like a seal or badge.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: phrase, shape, ribbonColor, speed, pauseOnHover

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2331Curved Text LoopText effectsA line of text repeats endlessly along a gentle arched path, auto-scrolling sideways and draggable by hand with momentum that reverses direction.

2221Scrolling content stripText effectsA horizontal strip of small cards drifts sideways in an unbroken loop, pausing in place the moment a pointer rests over any card in it.

1962Flowing gradient headlineText effectsA headline whose letters are filled by a moving two-tone gradient, so a bright band drifts endlessly through the words, with an optional soft bloom behind.

1967Glare Pass TextText effectsMuted label text that periodically catches a narrow band of light gliding across it, like a glare reflecting off glass, then goes quiet before repeating.

1970Gradient shift textText effectsA rounded pill whose text is filled with a two-color gradient that continuously sweeps sideways through the letters.

2177Keystroke TextText effectsText appears one character at a time as if being typed live, with a blinking cursor that keeps going after typing finishes.