Text Scramble

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.