Marketplace
TemplatesComponentsPluginsVectors

    Color Sweep Word

    Free Typography Component by Sanna Granqvist

    Show Preview
    Color Sweep Word

    About Color Sweep Word

    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

    Sanna GranqvistSanna Granqvist@sanna-granqvist
    Published
    Apr 28, 2026
    Updated
    Apr 27, 2026
    License
    Limited
    Show Preview

    Tags

    • Typography

    From Sanna Granqvist

    Melty Gooey Text
    Melty Gooey Text
    Component·Free
    Word Shifter
    Word Shifter
    Component·$12
    Loop Shiny Text
    Loop Shiny Text
    Component·Free

    Related Components

    ScrollSyncedText
    ScrollSyncedText
    Component·Free
    Scroll Effects Pack
    Scroll Effects Pack
    Component·Free
    Blurred Text Ticker
    Blurred Text Ticker
    Component·Free
    Sanna GranqvistSanna Granqvist@sanna-granqvist
    Published
    Apr 28, 2026
    Updated
    Apr 27, 2026
    License
    Limited
    Show Preview

    Tags

    • Typography
    Marketplace
    TemplatesComponentsPluginsVectors
    TemplatesComponentsPluginsVectors