Scramble Text

Text 32

About

A small text component that masks its content with encrypted characters, then reveals the real value one character at a time. On mount (or whenever the text changes) it runs a decrypt-style animation from scrambled symbols to the final string, with a configurable interval, grapheme-aware segmentation via Intl.Segmenter, an accessible live-region fallback, and respect for reduced-motion preferences.

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

Code

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

Usage.tsx

"use client";

import { ArrowClockwiseIcon } from "@phosphor-icons/react";
import { useState } from "react";
import { ScrambleText } from "@/components/ui/scramble-text";

const inviteCodes = [
  "7K4F2Q9M-X8NV",
  "H3Q89V2C-M7KA",
  "R6PF4L9T-Q2VX",
  "W9ND7B4H-K5TZ",
];

export default function Default() {
  const [index, setIndex] = useState(0);

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
      <div className="flex items-center gap-3">
        <code className="rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-1.5 font-mono text-sm text-neutral-700">
          dqnamo.com/invite/<ScrambleText>{inviteCodes[index]}</ScrambleText>
        </code>
        <button
          type="button"
          aria-label="Regenerate invite code"
          onClick={() => setIndex((value) => (value + 1) % inviteCodes.length)}
          className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border border-neutral-950 bg-neutral-950 px-2.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
        >
          <ArrowClockwiseIcon aria-hidden="true" size={15} weight="bold" />
          Regenerate
        </button>
      </div>
    </div>
  );
}