---
title: "Color Sweep Word — Free Framer component · Best of Framer"
description: "Free Framer component · by Sanna Granqvist · Text. Gradient sweep reveal with word cycling"
canonical: "https://framer.elliotli.dev/component/color-sweep-word"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Color Sweep Word

# Color Sweep Word

Gradient sweep reveal with word cycling

[View on Framer](https://framer.com/marketplace/components/color-sweep-word/?via=elliot-li)

![Color Sweep Word preview image 1](https://framer.elliotli.dev/og/component/color-sweep-word/f03b3e7181d7ce19/1600x1200.jpg)

## 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 →](/terms#rankings)

-   All · #1298

## Details

- **Author**: Sanna Granqvist
- **Published**: 2026-04-28
- **Updated**: 2026-04-27
- **Added**: 2026-04-18
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos