---
title: "Shuffle Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Kopai Studio · Text. About this component Shuffle Text is a text animation component that allows you to apply a dynamic letter shuffle effect on hover to any text."
canonical: "https://framer.elliotli.dev/component/shuffle-text"
---

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

# Shuffle Text

Smoothly animate your text on hover.

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

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

## Summary

About this component Shuffle Text is a text animation component that allows you to apply a dynamic letter shuffle effect on hover to any text.

## Description

## About this component

Shuffle Text is a text animation component that allows you to apply a dynamic **letter shuffle effect** **on hover** to any text. Perfect for adding subtle motion and interactivity to text elements without disrupting layout or readability.

## Features

-   **Shuffle Speed:** control how quickly characters are shuffled during the animation
    
-   **Animation Duration:** define the total length of the shuffle effect
    
-   **Full Font Control:** easily manage font family, size, weight, and color directly in Framer
    
-   **Hover Text Color:** choose a dedicated color for the text on hover
    
-   **Shuffle Order:** characters are randomly reordered on hover to create the shuffle effect
    

## How it works

**Shuffle Text** applies a letter shuffle animation on hover to your typography while keeping full control over layout and styling. The component integrates seamlessly with Framer’s text system and supports responsive layouts, making it suitable for both small text elements and larger typographic sections.

For the best visual and readability results, **monospaced fonts are recommended:** consistent character widths create a smoother, more stable shuffle animation and a more polished visual outcome.

## Best for

-   Interactive hero sections
    
-   Navigation links and menus
    
-   Creative landing pages
    
-   Playful hover micro-interactions
    

## Support

For any queries and support, contact [kopai.designstudio@gmail.com](mailto:kopai.designstudio@gmail.com)

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

-   All · #2752

## Details

- **Author**: Kopai Studio
- **Published**: 2026-01-12
- **Updated**: 2026-02-14
- **Added**: 2025-12-29
- **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