Scramble-in hover text

Scrambles random characters before settling on the real text, triggers on hover by default or on scroll-into-view with startOnView. Good for a nav label or a small interactive detail, overkill for body copy or long headlines.

MIT · magicui animation-text animation-hovermotion

Get a site with blocks like this

Live preview

open in new tab ↗

import { HyperText } from "@/components/magicui/hyper-text"

export function HyperTextDemo() {
  return <HyperText>Hover me</HyperText>
}

Block id: magicui-hyper-textmotion · swap-content

More animation-text blocks

Staggered blur word-reveal headline

linear

Blur-in text animation

magicui

Typewriter typing animation

magicui

Aurora gradient text accent

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call