Skip to content

component

Text Scramble

By Aidan Looker

Details

Summary

What is Text Scramble?

Description

What is Text Scramble? Text Scramble is a premium text animation component that decodes your text character by character. Each letter rapidly cycles through random symbols before slowing down and locking into place with a spring-powered pop and optional glow flash. Ideal for hero headlines, product reveals, portfolio intros, and any section that needs to command attention instantly. Core Features Deceleration settle animation where characters slow down like a slot machine before snapping to the final letter Glow flash on resolve with a three-stage burst that fades to a steady glow Spring overshoot pop with scale bounce and vertical displacement when each character locks in Animated cursor sweep that follows the resolve progress across the text Subtle blur-to-sharp transition on scrambling characters for depth Floating drift micro-animation on unresolved characters Controls inside Framer Text and Typography Text input with multiline support Font family and weight Font size (16px to 200px) Text alignment (Left, Center, Right) Preset Quick-start presets: Terminal, Cipher, Gold, Frost Set to Custom for full manual control over colors and glow Colors (Custom mode) Text color for resolved characters Scramble color for cycling characters Glow color for the resolve flash and steady glow Glow (Custom mode) Enable or disable the glow effect Glow intensity (2px to 40px radius) Animation Trigger mode: On View, On Hover, or Loop Scramble speed (1 to 10) Stagger delay between each letter resolving Loop pause duration (visible only when trigger is set to Loop) Character pool: Mixed, Letters, Numbers, Binary, Symbols, or Custom Custom characters input (visible only when pool is set to Custom) Hover Effect None, Lift, or Scale Best use cases Hero headlines that reveal on scroll or hover Product launch or coming-soon pages with a reveal moment Portfolio or agency landing pages for a premium first impression Loading or transition states that feel intentional rather than empty Drop it onto your canvas, pick a preset or customise every detail, and ship a hero section that feels like it belongs in a feature film. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Introduction

Cinematic text decode animation.

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300135688/148/228/309/79/15
  • All · #2631