What it looks like
It looks like an airport departures board shuffling letters until the destination appears. The text shows in uppercase and a monospace font, like a terminal. Whenever the mouse passes over it, and on page load when the animateOnLoad option is on, as in the demo, the letters turn into a jumble of random letters that lock into place from left to right until the word forms again, in 0.8 seconds by default. Spaces stay still. On first display, each letter also drops in slightly as it fades in. The component sets no colors and inherits the surrounding text color.
You may be looking for this if you asked for something like
- letters that scramble when I hover over a link
- a hacker-style menu effect on mouse over
- text that quickly shuffles letters and then forms the word again
- that airport board effect on the letters of my headline
- a brand name that scrambles on hover, terminal style
- menu links that feel like a tech website
- a word that flashes random letters before it settles
Also known as
- hyper text
- scramble text
- text scramble hover
- shuffle text effect
- hacker text effect
- randomized letters animation
When to use
- Links and menu items on tech, gaming or digital agency sites
- The brand name in the header, with a terminal touch on hover
- Short section labels, such as services, projects and contact
- Developer and studio portfolios with a tech look
When to avoid
- Long text, which turns into a hard-to-read line of random letters
- Brands that need lowercase or their own typeface, since the component forces uppercase and a monospace font
How to ask your AI
Create a hover scramble text effect for my menu links: letters swap for random characters and settle from left to right in under a second, with an accessible label holding the full text, a static version for reduced motion and my project font.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Hyper Text
Does Hyper Text work on phones?
Hyper Text can play its animation on page load through the animateOnLoad prop, which works on any screen. Replaying it depends on the mouse hover event; on touch screens it only happens if the browser simulates that event on tap, which varies. If the effect matters on mobile, ask your AI to trigger it on tap as well.
Can I change the speed and text of Hyper Text?
Yes. In Hyper Text, the text prop sets the word and the duration prop sets the total animation time in milliseconds, 800 by default, whatever the text length. If the text changes, the animation runs again. The animateOnLoad prop turns on the animation at page load; without it, the effect only plays on hover.
Does Hyper Text always show text in uppercase?
Yes. Hyper Text converts every letter to uppercase and uses a monospace font, which reinforces the terminal look, and the random letters shown during the animation are A to Z only. If your brand needs lowercase or another typeface, ask your AI to drop the conversion and apply your project typography, which the THM Componentes prompt already requires.
