Docs·Encrypted Text

Encrypted Text

A viewport-triggered scramble effect that resolves gibberish into readable text one character at a time.

Installation

$pnpm dlx shadcn@latest add @spiderui/encrypted-text

Usage

API Reference

PropTypeDefault
textText to scramble and reveal.
string—
revealDelayMsDelay in milliseconds between revealed characters.
number50
flipDelayMsDelay in milliseconds between scramble character flips.
number50
charsetCharacters used to generate the scrambled text.
stringLetters, numbers, and symbols
encryptedClassNameClasses applied to unrevealed characters.
string—
revealedClassNameClasses applied to revealed characters.
string—
classNameAdditional classes applied to the root span.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Welcome to the MatrixWelcome to the Matrix5&mo}g$ k- ?<I CXN46M
import { EncryptedText } from "@/components/ui/encrypted-text"
export default function Page() {
  return (
    <EncryptedText
      text="Welcome to the Matrix"
      revealDelayMs={50}
      flipDelayMs={40}
      encryptedClassName="text-muted-foreground"
      revealedClassName="text-foreground"
    />
  )
}