Scramble Trigger

Show Preview
Scramble Trigger
Scramble Trigger

About Scramble Trigger

A text component that decodes itself on hover and click, adding a satisfying layer of motion to any headline, button, or link.

ScrambleHover animates your text by rapidly cycling through random characters before settling into the real word or sentence, like a terminal decrypting a message. Triggered on hover and on click, it gives users tactile, responsive feedback that makes interfaces feel alive without being distracting.

Key Features

  • Dual trigger — Scrambles on hover, and again on click, so it responds naturally to how users actually interact

  • Customizable character set — Choose symbols, letters, or numbers used during the scramble

  • Adjustable speed & duration — Control how fast the scramble cycles and how long it takes to resolve

  • Works with any text — Headlines, nav links, buttons, or body copy

  • Lightweight & performant — No layout shift, smooth animation, optimized for Framer canvas and live sites

  • No-code friendly — Just drop it in, connect your text, adjust settings from the properties panel.

Ideal for

Portfolio sites, agency landing pages, editorial or experimental layouts.

From Anisa Oktariani

Text Indentation

Related Components

AutoCover
TextFluxUnveil
Shape Spinner
Sticky Projects