A futuristic text scramble animation revealing phrases in a Matrix-inspired style. Features scroll trigger, scramble-out transitions, cursor blink, and 3 reveal modes. Responsive and customizable. Perfect for hero sections, intros, and tech-themed websites.
Live Preview: https://textscramblepro.framer.website/
About Component
TextScramblePro is a futuristic text scramble animation component for Framer. Characters reveal one by one in a Matrix-inspired glitch style, with scroll trigger, scramble-out transitions and 3 reveal modes. Perfect for hero sections, intros, portfolios and tech-themed websites.
Scramble reveal animation — characters decrypt from scrambled noise into readable text, frame by frame at 60fps
3 reveal modes — choose Left → Right, Right → Left or Random order for each phrase reveal
Scramble out — before cycling to the next phrase, text re-scrambles back into noise for a seamless loop
Multiple phrases — add any number of phrases and they cycle automatically in sequence
Scroll trigger — animation fires only when the component enters the viewport, ideal for scroll-based storytelling
Loop / Play Once — loop all phrases continuously or play through the list once and hold the last phrase
Cursor blink — a blinking terminal cursor appears at the end of the text for a code-editor aesthetic
Demo mode — switch Reveal Mode, Loop and Text Color live from a floating interactive panel
Responsive scaling — font size adjusts automatically so text never overflows its container at any size
Fade-in on mount — the component fades in on load or viewport entry, with adjustable duration
Full typography control — font family, size, weight and letter spacing are all customizable
Works out of the box — 3 Matrix-inspired phrases with green-on-dark defaults included on first drop
What's Included
1 TextScramblePro component (.tsx) ready to paste into Framer
3 default phrases with Matrix-inspired green-on-dark styling out of the box
Demo Mode with interactive floating panel for live previews
11 property controls — fully editable from the Framer property panel
Responsive font scaling, scroll trigger and fade-in built in, no extra setup needed
How It Works
Drop the component into your Framer project and it starts animating immediately. Each phrase begins fully scrambled, then characters reveal one by one using your chosen mode — left to right, right to left, or random. Once fully revealed, the text holds for a set duration, then optionally scrambles back out before the next phrase begins. Enable Scroll Trigger to delay the animation until the component enters the viewport. Turn on Demo Mode to interactively preview Reveal Mode, Loop and Text Color from a floating panel — useful for presentations and client demos. All timing, typography and color settings are exposed as simple controls in the property panel.
Use Cases
Hero sections — set the tone above the fold with a cinematic text reveal
Agency & portfolio sites — make your headline impossible to scroll past
Tech & SaaS landing pages — reinforce a modern, code-native brand identity
Onboarding screens — guide users through key messages one phrase at a time
Digital art & experimental sites — use the scramble effect as a visual statement
Presentations & prototypes — Demo Mode lets you switch styles live in front of a client
Keywords
text scramble, scramble animation, text reveal, matrix text, glitch text, animated text, scramble effect, text animation, hero text animation, matrix effect, character scramble, code text effect, decrypt animation, typewriter alternative, scramble reveal, glitch animation, text scramble framer, animated headline, scramble text component, hero section text, intro animation, cinematic text, tech text effect, futuristic text, matrix animation, text loop, phrase animation, scroll trigger text, viewport animation, scroll reveal text
Ahmet Loca
