Components
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.
npx shadcn@latest add https://21st.dev/r/dqnamo/scramble-textLoading preview...
"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>
);
}