50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T524,

Let your words move!

Type Shuffle is a powerful Framer component designed for creators who want to push the boundaries of digital typography. Whether you're building an edgy portfolio, a bold landing page, or a creative experiment, this component gives your users the power to play with your message.

With a seamless toggle between Glyph and Word modes, you can transform static text into a tactile, draggable experience.

Key Features:

Shuffle Modes: Switch between rearranging individual letters (Glyphs) or entire terms (Words) with a single click.
Fluid Reordering: Powered by production-ready physics for smooth, snappy, and satisfying drag-and-drop animations.
Fully Customizable: Take control over fonts, sizing and colors directly from the properties panel.

Pick Shuffle Mode -> Type your text -> Pick font -> Pick text color

& have fun with the letters!

52:Ta5b,

Overview

This is a customizable Mask Scroll Reveal component for Framer, utilizing vector masks for seamless transitions. It enables dynamic, scroll-triggered animations with full control over shapes and timing. Copy it to your project and use the property panel to craft unique transitions effortlessly.

How to use the component?

Upload your media
- Custom vector image (preferably logo, short slogan or shape). Bold shapes work best.
- Background Media (image or video)
- Foreground Media (image or video)
- If you don't want to use images or videos for the background or foreground, feel free to leave these sections empty.
  If you leave Background Media empty, the component automatically uses the "Fallback Background" color (which you can customize as you wish).If you leave Foreground Media empty, the component automatically applies the "Vector Overlay Color" to fill your uploaded vector.
Adjust mask properties
- Set Starting Mask Size
- Set Ending Mask Size
- Set Scroll Length
  If you want the mask to reach its final size before the user finishes scrolling through the section, adjust it here:
If you want the mask to be filled with a selected overlay color at the start of the animation, choose a color in the Vector Overlay Color property.You can also set the Start Overlay Opacity and define the exact moment the overlay will fade out (for example, after 50% of the scroll progress).

Share it, remix it, have fun!

Jakub Okupnik

Follow for more content

[X profile]

[okupnik.com]

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-c2971535-25c0-432d-909c-0ae56ae5c977-all:/unified/creator/c2971535-25c0-432d-909c-0ae56ae5c977/activity/":[{"data":[{"id":"01a0deac-ac0a-705f-ba3e-bac39fc94bc8","type":"comment.liked","target":{"type":"comment","id":"01a0b58e-76cb-7750-ae56-427c72c4d33a","preview":"Nice","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nice"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019dbb0d-6389-799e-b660-4ebba0482061","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0b58e-76cb-7750-ae56-427c72c4d33a"},"repost":null}},"context":{"type":"post","id":"019dbb0d-6389-799e-b660-4ebba0482061","preview":"Type Shuffle","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/amr1qnKTICuSTBnMoY3V/type-shuffle-eopnHKAtwnFOx1w4dA5QjjhH2eCiAp","targetDeleted":false,"owned":true,"actions":{"postId":"019dbb0d-6389-799e-b660-4ebba0482061","like":{"count":3,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","slug":"jakub-okupnik","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-26T17:04:13.318Z","latestAt":"2026-09-26T17:04:13.318Z"},{"id":"019edf18-8054-74bf-a213-bba650356835","type":"creator.followed","target":{"type":"creator","id":"827a339e-2d46-41b2-9f77-3f05c29de5a9","preview":"Nandi","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29583/avatar-UPfop9vtI2KgN6WreJoFN7Ytns0o9Q.jpg","slug":"nandi","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","slug":"jakub-okupnik","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-19T08:56:25.423Z","latestAt":"2026-06-19T08:56:25.423Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:c2971535-25c0-432d-909c-0ae56ae5c977:/unified/posts/?creator=c2971535-25c0-432d-909c-0ae56ae5c977&with=reposts":[{"data":[{"id":"019dbb0d-6389-799e-b660-4ebba0482061","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","slug":"jakub-okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"amr1qnKTICuSTBnMoY3V","resolved":true,"title":"Type Shuffle","body":"$51","bodyJson":null,"introduction":"Interactive Typography Playground","slug":"type-shuffle","author":{"framerUserId":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","slug":"jakub-okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/amr1qnKTICuSTBnMoY3V/type-shuffle-eopnHKAtwnFOx1w4dA5QjjhH2eCiAp","metadata":{"tint":{"h":153,"s":75,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-12T23:55:22.743Z","updatedAt":"2026-04-23T13:49:24.495Z","publishedAt":"2026-04-23T15:55:10.089Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dazzled-papaya-953377.framer.app/","price":"10","paymentUrl":"https://contra.com/payment-link/L9VH0Gbr-type-shuffle-interactive-typography-playground","workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"duhBZBvcGoenj2QWlS5x","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-23T15:55:10.089Z","updatedAt":"2026-04-23T15:55:10.089Z"},{"id":"019d903c-ede9-7e58-b52b-981ab63afc27","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","slug":"jakub-okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"aoWk5dJwaWhC4VfZOy5J","resolved":true,"title":"Mask Scroll Reveal","body":"$52","bodyJson":null,"introduction":"Customizable Vector Mask Scroll Reveal","slug":"mask-scroll-reveal","author":{"framerUserId":"c2971535-25c0-432d-909c-0ae56ae5c977","name":"Jakub Okupnik","slug":"jakub-okupnik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/129890/avatar-Lv7ZdupFhLAl2Uw6WWLczKxMSSbfXH.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/aoWk5dJwaWhC4VfZOy5J/mask-scroll-reveal-hbh0rZDOPcRNMBtuYxQy34vpF1bg1b","metadata":{"tint":{"h":204,"s":42,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-08T19:35:11.347Z","updatedAt":"2026-04-14T21:51:31.875Z","publishedAt":"2026-04-15T08:23:25.417Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/ScrollMaskReveal-kxiuIp.js@cOfcvhoAnA4UCakEbTqF","previewUrl":"https://incredible-employees-638816.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"cOfcvhoAnA4UCakEbTqF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":25,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T08:23:25.417Z","updatedAt":"2026-04-15T08:23:25.417Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]