Tablero

Tablero de paletas que voltean en 3D, carácter por carácter, hasta formar cada frase, como en los tableros de estación.

Vista previa en vivo

Bienvenido a Furin

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { Tablero } 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
frases	string[] \| string	"Bienvenido a Furin\|El cursor es el viento\|Anden 3 salida 18:45"	Frases que el tablero muestra en ciclo: un arreglo, o un solo texto con las frases separadas por "\|".
value	string	""	Texto fijo: si lo pasas, el tablero deja de ciclar y muestra este; vacío usa las frases.
columns	number	12	Celdas por fila; las frases largas saltan de línea entre palabras.
interval	number	4200	Milisegundos que cada frase se queda quieta antes de cambiar a la siguiente.
flipSpeed	number	70	Milisegundos que dura cada volteo de paleta.
size	number	64	Alto de cada celda en px a tamaño completo (se encoge si el tablero no cabe).
gap	number	5	Separación entre celdas en px.
tileColor	string	"#111111"	Color de las paletas.
letterColor	string	"#FFFFFF"	Color de las letras.
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	undefined	Estilos en línea del contenedor.