Descifrar

Texto que aparece mezclado y se asienta letra por letra, al montar el componente o al pasar el cursor. Pensado para titulares y etiquetas.

Vista previa en vivo

Descifra lo imposible

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { Descifrar } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
text	string	"Descifra el mensaje"	Texto final que se revela.
speed	number	16	Letras que se asientan por segundo.
delay	number	0	Milisegundos de desorden antes de que se asiente la primera letra.
scrambleChars	string	"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+<>/?!"	Alfabeto del que salen los caracteres aleatorios.
revealDirection	"izquierda" \| "derecha" \| "centro" \| "aleatorio"	"izquierda"	Por dónde empiezan a asentarse las letras.
trigger	"montar" \| "cursor" \| "ambos"	"ambos"	Cuándo se descifra: al montar, al pasar el cursor, o ambos.
color	string	"heredado"	Color de las letras ya asentadas (por defecto hereda el del texto).
scrambleColor	string	"texto atenuado"	Color de las letras que aún se mezclan (por defecto, el mismo texto atenuado).
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	"{}"	Estilos en línea del contenedor (aquí va el tamaño y la fuente).