---
title: "Word Shifter — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Sanna Granqvist · Text. Rotating words with adaptive highlight"
canonical: "https://framer.elliotli.dev/component/word-shifter"
---

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

# Word Shifter

Rotating words with adaptive highlight

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

![Word Shifter preview image 1](https://framer.elliotli.dev/og/component/word-shifter/837202a7acf1b2c8/1600x1200.jpg)

## Summary

Rotating words with adaptive highlight

## Description

Create a sentence like “Build bold text components.” and let the middle word rotate through your own list.

You control three parts:

-   **textBefore**
    
-   **words**
    
-   **textAfter**
    

The component handles the animation and keeps the layout steady while the word changes.

### Highlight styles

Choose how the rotating word is presented:

-   **Pill** – Rounded background behind the word
    
-   **Solid** – Changes the word color
    
-   **None** – Pure rotation, no extra styling
    

The pill background can resize automatically to match each word, or stay fixed if you prefer a locked width.

### Animation controls

-   Auto-rotates every 2.5 seconds
    
-   Smooth slide-up entrance and exit
    
-   Adjustable in and out durations
    
-   Respects prefers-reduced-motion
    

### Layout controls

-   Fine-tune vertical offset
    
-   Adjust gap spacing
    
-   Left, center, or right alignment
    

### Best used for

-   Hero sections
    
-   SaaS landing pages
    
-   Feature intros
    

### Refund policy

All sales are final. No refunds are offered after purchase.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1739

## Details

- **Author**: Sanna Granqvist
- **Price**: $12.00
- **Published**: 2026-02-23
- **Updated**: 2026-02-23
- **Added**: 2026-02-15
- **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