---
title: "Scrambleshuffle_Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Julius Ayo · Text. Interactive glitch text & scroll anims."
canonical: "https://framer.elliotli.dev/component/scrambleshuffle-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scrambleshuffle\_Text

# Scrambleshuffle\_Text

Interactive glitch text & scroll anims.

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

![Scrambleshuffle\_Text preview image 1](https://framer.elliotli.dev/og/component/scrambleshuffle-text/81428c44dd66f16a/1600x1200.jpg)

## Summary

Interactive glitch text & scroll anims.

## Description

**What it does**

-   Animates text by scrambling each character before settling on the final letter.
    
-   Supports direction-based shuffling, staggered timing, optional color interpolation, hover/in-view triggers, and looping.
    

**How it works**

-   Splits text into characters.
    
-   Each character cycles through random symbols (scrambleCharset) shuffleTimes times.
    
-   Animation timing is controlled by duration (per character) and stagger (between characters).
    
-   Uses useInView to trigger on scroll and hover logic if enabled.
    
-   Looping restarts the animation after total duration + loopDelay.
    

**Key features**

-   **Triggers:** on scroll (once or repeat), on hover, or looped.
    
-   **Direction:** shuffle left or right.
    
-   **Color:** optional transition from colorFrom → colorTo across progress.
    
-   **Typography:** supports Framer Font control (size, weight, spacing, alignment).
    
-   **Responsive:** inline characters with spacing for spaces.
    

**Main props**

-   Text & style: text, color, fontSize, fontWeight, font
    
-   Animation: duration, stagger, shuffleTimes, shuffleDirection
    
-   Scramble: scrambleCharset
    
-   Color transition: enableColorTransition, colorFrom, colorTo
    
-   Triggers: triggerOnce, triggerOnHover
    
-   Looping: loop, loopDelay
    

**Defaults**

-   Text: “Shuffle Text”
    
-   Duration: 0.5s, Stagger: 0.04s, Shuffle times: 3
    
-   Direction: right
    
-   Color transition: off
    
-   Trigger once on view, no loop
    

**Use case**

-   Eye-catching headings or hero text in Framer with fine-grained animation control.
    

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

-   All · #7433

## Details

- **Author**: Julius Ayo
- **Price**: $5.00
- **Published**: 2025-12-22
- **Updated**: 2026-03-12
- **Added**: 2025-12-15
- **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