---
title: "Text Shuffle — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Aviral Lakhanpaul · Text. Drop the Text Shuffle component onto your canvas 2."
canonical: "https://framer.elliotli.dev/component/text-shuffle"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Shuffle

# Text Shuffle

Shuffling animated text effect

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

![Text Shuffle preview image 1](https://framer.elliotli.dev/og/component/text-shuffle/1a80b348a55609dd/1600x1200.jpg)

## Summary

Drop the Text Shuffle component onto your canvas 2.

## Description

### Best suited for moments on your website where words need personality and impact.

## Features

-   Character-level shuffle animation powered by Framer Motion
    
-   Automatically selects a portion of characters per word for visual balance
    
-   Multiple shuffle modes: Linear, Random, and Even/Odd
    
-   Shuffle direction control: Left or Right
    
-   Looping with configurable delay between loops
    
-   Trigger on view (once or always) and on-hover retrigger
    
-   Fully responsive and wrap-aware — ideal for long headings
    

## Customisation Options

-   Text content and typography via Font control
    
-   Shuffle direction, duration, stagger, and max delay
    
-   Shuffle count (number of shuffles per character)
    
-   Shuffle mode: Linear / Random / Even-Odd
    
-   Colours for initial and final states
    
-   Trigger settings: On View / On Hover / Looping / Loop Delay
    

## Set up

1\. Drop the **Text Shuffle** component onto your canvas

2\. Enter your headline or content in the **Text** field

3\. Play with the properties, and you're done!

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your Framer project to import it.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-j2jvek3i-d6jUwEXvJhM40f1FGrp2SCx8Owstnw)](https://polar.sh)

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

-   All · #8238

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $5.00
- **Published**: 2025-12-03
- **Updated**: 2026-01-18
- **Added**: 2025-11-28
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing