Highlight Cycling

Show Preview
Highlight Cycling
Highlight Cycling

About Highlight Cycling

How the cycle works

Hold → Cover → Reveal → repeat. The bar wipes in to hide the current word, the text swaps underneath, then the bar pulls away. One smooth motion, no visible cut.

  • Wipe from any direction — left, right, up, or down

  • Per-word colors that lock in at the start of each cover phase and hold through the full reveal

  • Container width animates between words so the layout adjusts around different lengths

  • Optional appear effect: a one-time scroll-triggered reveal before the loop begins

Timing splits into two controls — how long each word holds, and how long the transitions take. The easing is a power3 curve, so the bar accelerates in and decelerates out of each pass.

Controls: word list, marker colors (per-word or single), wipe direction, cycle hold duration, transition duration, text style, appear effect toggle.

From Sanna Granqvist

Loop Shiny Text
Gradient Scroll Text
Curved Text Ticker
Melty Gooey Text

Related Components

AutoCover
TextFluxUnveil
Shape Spinner
Sticky Projects