# Cifra A headline that starts as scrambled letters, numbers and symbols and settles letter by letter into the phrase. > Cifra is an exclusive THM Componentes component that makes a headline appear as scrambled letters, numbers and symbols and then decode letter by letter, from left to right. It plays when the text enters the screen and again on hover, without shifting the layout, and fits technology, cybersecurity and product launch sections. - Category: Text and typography - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/cifra/ ## 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 ```text 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. ## Related components - [Charada](https://vibecode.thmtecnologia.com/en/components/charada/): A sentence that starts as random symbols and resolves letter by letter, from left to right. - [Anagrama](https://vibecode.thmtecnologia.com/en/components/anagrama/): An uppercase word that scrambles its letters on hover and settles back in under a second. - [Gralha](https://vibecode.thmtecnologia.com/en/components/gralha/): Slices of the headline show up shifted sideways with red and cyan trails, like a screen on the fritz. - [Telegrama](https://vibecode.thmtecnologia.com/en/components/telegrama/): Letters appear one by one with a blinking cursor, then disappear to make way for the next word in the list. - [Parafina](https://vibecode.thmtecnologia.com/en/components/parafina/): Words take turns in the headline, melting into one another like merging drops before turning crisp again. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).