Skip to content

component

Color Sweep Word

By Sanna Granqvist

Details

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

Introduction

Gradient sweep reveal with word cycling

Rank history

Daily rank per list, from the first snapshot — lower is better.

1501100114338/148/228/309/79/15
  • All · #1085