---
title: "Language Scramble — Free Framer component · Best of Framer"
description: "Free Framer component · by Kullen Jahnke · Text. Language Scramble is a responsive Framer component that runs your language switch: text inside the frames you mark scrambles into the new…"
canonical: "https://framer.elliotli.dev/component/language-scramble"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Language Scramble

# Language Scramble

Text scramble on language switch

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

![Language Scramble preview image 1](https://framer.elliotli.dev/og/component/language-scramble/0a5645d8341f8bfe/1600x1200.jpg)

## Summary

Language Scramble is a responsive Framer component that runs your language switch: text inside the frames you mark scrambles into the new language, resolving left to right.

## Description

**Language Scramble** is a responsive Framer component that runs your language switch: text inside the frames you mark scrambles into the new language, resolving left to right. It's an invisible layer inside a button you design yourself, using Framer's native Localization as the only translation source. No APIs, no keys.

**Use Cases:**

Works well for:

-   Multilingual portfolios
    
-   Agency sites with international clients
    
-   Product pages localized per market
    

Perfect when you want a language switch visitors actually notice.

\--------------------------------------------------------------

**Customization:**

Fully customizable via the properties panel:

-   Switch to
    
-   Target locale
    
-   Style (Scramble, Cascade, Center out, Edges in, Wipe)
    
-   Duration
    
-   Refresh rate
    
-   Characters
    
-   Custom set
    
-   Reduced motion
    
-   Scope
    
-   Max characters
    
-   Keep whitespace
    
-   Exclude selector
    
-   Canvas guide
    

Your button's look stays yours. The component adds no visuals and animates existing text in place, so links, bold spans, and rich text keep their styling.

\--------------------------------------------------------------

**Responsive Behavior:**

-   Fills whatever button you place it in, at any breakpoint
    
-   Animates the rendered page text, no per-viewport setup
    
-   Reduced motion: instant switch, or a short scramble capped at 150 ms
    
-   Screen readers always get the final text
    

\--------------------------------------------------------------

**Preview:** [https://language-scramble.framer.website/](https://language-scramble.framer.website/)

**Tutorial:** [**https://language-scramble.framer.website/tutorial**](https://language-scramble.framer.website/tutorial)

**Code Override:** [**https://framer.com/m/LanguageScrambleOverrides-cqlqq2.js@46JWH5GReZRyW5CuV2Wu#withScramble**](https://framer.com/m/LanguageScrambleOverrides-cqlqq2.js@46JWH5GReZRyW5CuV2Wu#withScramble)

**Included:** The component, setup steps on the preview site, the marking override, and support on X at [@KullenJahnke](https://x.com/KullenJahnke).

**Good to know:** Needs Framer Localization with two or more locales, and the included withScramble override on the frames you want animated. Identical text in both locales stays still on purpose. Published sites navigate to the locale URL; the animation continues on the new page.

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

-   All · #5459

## Details

- **Author**: Kullen Jahnke
- **Published**: 2026-08-11
- **Updated**: 2026-08-11
- **Added**: 2026-08-11
- **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