Text Scramble

Text 55

About

Characters scramble through random glyphs before resolving to the final text, creating a cipher-decoding effect on mount.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Scramble to your project and fits it to your theme.

Code

How Text Scramble is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TextScramble } from "@/components/ui/text-scramble";

export default function TextScrambleHero() {
  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <TextScramble
        as="h1"
        className="max-w-2xl text-center font-bold text-4xl text-foreground tracking-tight sm:text-5xl"
        duration={1.2}
        speed={0.03}
      >
        The future of UI is in motion
      </TextScramble>
    </div>
  );
}