Skip to content

Color Sweep Word

Gradient sweep reveal with word cycling

Color Sweep Word preview image 1

Summary

Gradient sweep reveal with word cycling

Description

Write your headline and wrap any word in {option1|option2|option3} to turn it into a cycling slot. Use // to force a line break.

Each word sweeps in with a gradient, and the marked slots swap between alternatives on a timer.

Choose from 7 gradient presets or set custom colors. Adjust the sweep speed, stagger between words, and how long each cycled word holds before the next one.

Two width modes handle length differences between alternatives: fixed width snaps to the widest option, smooth width animates the transition.

Controls

  • Text — headline copy with {a|b|c} cycling syntax and // line breaks

  • Gradient — 7 presets (spectrum, fire, ocean, neon, aurora, lavender, mono) or custom colors

  • Sweep — duration, stagger, easing

  • Cycle — hold time per alternative

  • Width — fixed or smooth (both prevent layout shift)

  • Layout — alignment, word spacing, LTR/RTL, keep-together for line endings

  • Typography — full font controls

  • Accessibility — reduced-motion fallback, screen reader support

Rank history How rankings work →

1501100114338/149/49/2610/1811/9
  • All · #1298

Details

More like this