Hero sections
Hero - Scramble
Headline that decrypts into place - characters cycle through glyphs then lock left to right. Re-runs on hover.
- Glyph scramble
- Staggered lock-in
- Hover replay
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
The headline starts as random glyphs and decrypts into the real text: each character cycles through a series of symbols and then locks to its final letter, with the lock-ins staggered left to right so the word resolves like a code being cracked. Hovering the headline replays the whole scramble from the start.
When to use it
- A hero for a developer, security, or AI product where a decrypt effect fits the brand
- A landing page that wants an arresting, techy headline reveal on load
- Any section where an interactive, replayable headline adds personality
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 16-80ms
speedTick speed
Related components
Using this block
Buy it, then copy components/blocks/hero-scramble/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.