Carregando…

Encrypted Text

Display

Text that decodes character-by-character while unrevealed characters flip through random glyphs — fires once on view. Adapted from Aceternity UI.

UnificadosScramble Hover

Scramble Hover

Unificado

Instalação via CLI

$ npx kikitocn add encrypted-text

Interno:

@/lib/utilsmotion

Exemplo de uso

Encrypted TextExample.tsx

import { EncryptedText } from "@/components/ui/cn/encrypted-text/EncryptedText";

export function EncryptedTextExample() {
  return (
    <EncryptedText text="Exemplo" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`text*`	`string`	—	Texto final revelado
`revealDelayMs`	`number`	`50`	ms entre revelar cada caractere real
`flipDelayMs`	`number`	`50`	ms entre trocas de glifo aleatório
`charset`	`string`	—	Conjunto de caracteres do embaralhamento
`encryptedClassName`	`string`	—	Classe nos caracteres embaralhados
`revealedClassName`	`string`	—	Classe nos caracteres revelados
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…