What it looks like
It looks like the movie scene where a computer cracks a password. Each letter of the headline starts by flickering through random characters, smaller, in indigo and a monospaced font. After a little under half a second, the letters lock in one by one, in a wave from left to right, until the whole phrase shows in navy blue. Every position already reserves the width of its final letter, so the text never jumps or resizes during the effect, and words never break in the middle. The animation runs when the headline enters the screen and replays on hover.
You may be looking for this if you asked for something like
- text that scrambles and then forms the word
- a hacker-style headline where letters flicker until the phrase appears
- a password-cracking effect for my site headline
- that movie effect where a computer decodes the text
- random characters that settle into the title when I hover
- a code-looking headline for a cybersecurity landing page
- Matrix-style text that reveals itself when the section scrolls into view
Also known as
- scramble text
- text scramble effect
- decode effect
- decrypt text animation
- hacker text effect
- glyph shuffle
When to use
- Section headings on technology, software or cybersecurity sites
- Product launches that call for a mysterious, code-like tone
- A tech event or hackathon hero with a short phrase
- A key word that should catch the eye when people scroll to it
When to avoid
- Paragraphs and long text, where the scrambling gets in the way of reading
- Warm, friendly brands such as health or kids, where a code look feels off
- Several headlines with the effect on one screen, which gets tiring
How to ask your AI
Create a scramble text effect for the section heading: letters start as random glyphs and lock in one by one when the heading enters the screen and on hover, without shifting the layout, with the final text available to screen readers and a static version for reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Cifra
Does Cifra work on phones?
Yes. On phones, Cifra decodes when it enters the screen and replays when someone taps the headline. It is rated Light in THM Componentes because it uses only text elements, with no canvas or WebGL, and for people who turn on reduced motion the phrase shows up complete, without scrambling.
Is Cifra accessible to screen readers?
It was built for that. Cifra exposes the final phrase in an accessible label and hides the glyphs that flicker during the animation from screen readers, so people do not hear a stream of random characters. It is worth testing with the screen reader your audience uses most.
Can I change the characters and timing of Cifra?
Yes. In Cifra, the characters prop sets the glyphs used for scrambling, for example only 0 and 1 for a binary feel. You can also tune the interval between swaps, the delay between letters and the initial scramble time, switch to a monospaced font and play the effect only the first time the headline appears.
