Text Scramble

Cards 10

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";

const features = [
  { label: "Components", value: "164+" },
  { label: "Bundle size", value: "~4kb" },
  { label: "TypeScript", value: "100%" },
];

export default function TextScrambleStats() {
  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <div className="grid grid-cols-3 divide-x divide-border">
        {features.map(({ label, value }, i) => (
          <div
            className="flex flex-col items-center gap-1 px-8 py-4"
            key={label}
          >
            <TextScramble
              as="span"
              className="font-bold text-3xl text-foreground tabular-nums"
              duration={0.6 + i * 0.2}
              speed={0.03}
            >
              {value}
            </TextScramble>
            <span className="text-muted-foreground text-sm">{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}