5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Tbfe,

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/

Tutorial: https://language-scramble.framer.website/tutorial

Code Override: 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.

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.

5a:[["$","$L5d",null,{"post":{"id":"019ff1ba-b36a-7798-8eef-084f455dcde7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1","name":"Kullen Jahnke","slug":"kullen","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534579/avatar-0ElvrFI1uFRAsMmJsB8iv8CRDfqXKY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"wSE74O4fiWVuOsYtcLgJ","resolved":true,"title":"Language Scramble","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Language Scramble","marks":[{"type":"bold"}]},{"type":"text","text":" 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. "}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Works well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multilingual portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency sites with international clients"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product pages localized per market"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect when you want a language switch visitors actually notice. "}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Customization:","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable via the properties panel:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Switch to"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Target locale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Style (Scramble, Cascade, Center out, Edges in, Wipe)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Refresh rate"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Characters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom set"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scope"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Max characters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keep whitespace"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Exclude selector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas guide"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"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. "}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive Behavior:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fills whatever button you place it in, at any breakpoint"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animates the rendered page text, no per-viewport setup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion: instant switch, or a short scramble capped at 150 ms"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Screen readers always get the final text"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Preview:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://language-scramble.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://language-scramble.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Tutorial: ","marks":[{"type":"bold"}]},{"type":"text","text":"https://language-scramble.framer.website/tutorial","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://language-scramble.framer.website/tutorial","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Code Override: ","marks":[{"type":"bold"}]},{"type":"text","text":"https://framer.com/m/LanguageScrambleOverrides-cqlqq2.js@46JWH5GReZRyW5CuV2Wu#withScramble","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.com/m/LanguageScrambleOverrides-cqlqq2.js@46JWH5GReZRyW5CuV2Wu#withScramble","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Included:","marks":[{"type":"bold"}]},{"type":"text","text":" The component, setup steps on the preview site, the marking override, and support on X at "},{"type":"text","text":"@KullenJahnke","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://x.com/KullenJahnke","target":"_blank"}}]},{"type":"text","text":". "}]},{"type":"paragraph","content":[{"type":"text","text":"Good to know:","marks":[{"type":"bold"}]},{"type":"text","text":" 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. "}]}]},"introduction":"Text scramble on language switch","slug":"language-scramble","author":{"framerUserId":"64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1","name":"Kullen Jahnke","slug":"kullen","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534579/avatar-0ElvrFI1uFRAsMmJsB8iv8CRDfqXKY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1/019ff1ba-8354-745c-8824-136cbdd9f6d4.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2714,"height":2035}}],"post":null,"createdAt":"2026-08-11T16:49:32.023Z","updatedAt":"2026-08-11T20:39:22.062Z","publishedAt":"2026-08-11T16:49:32.020Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/LangaugeScramble-bhxMrE.js@ueWdR3gmzpqOfmj5nF0X","previewUrl":"https://language-scramble.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"ueWdR3gmzpqOfmj5nF0X","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-11T16:49:32.522Z","updatedAt":"2026-08-11T16:49:32.522Z","reported":false}}],"$L5f"]

Suggested for you