Revelado por máscara

Líneas que suben detrás de una máscara, escalonadas, como en la presentación de un producto.

Vista previa en vivo

Hecho con cuidado. Pensado para durar. Listo para ti.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { MaskReveal } 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
children	string	"Hecho con cuidado.\\nPensado para durar.\\nListo para ti."	El texto: cada línea (salto de línea) sube por su propia máscara.
size	number	44	Tamaño de la letra, en px.
stagger	number	120	Milisegundos de retraso entre una línea y la siguiente.
duration	number	1050	Milisegundos que dura la subida de cada línea.
dimFrom	number	2	Desde qué línea el texto se atenúa; −1 deja todas iguales.
align	"left" \| "center"	"left"	Alineación del texto.
replayButton	boolean	true	Muestra un botón para repetir la animación.
repeat	boolean	true	Repite la animación cada vez que el texto vuelve a entrar en vista.
color	string	"#F4F5F7"	Color del texto.
dimColor	string	"#6F7480"	Color de las líneas atenuadas.

Rodillo de palabras
Gratis
Una palabra rueda verticalmente entre opciones sobre un tambor con resorte, y su cápsula cambia de ancho con ella.
Texto
Tablero
Gratis
Tablero de paletas que voltean letra por letra.
Texto
Texto ASCII
Gratis
El texto se dibuja con caracteres ASCII; una lente alrededor del cursor los acerca, los gira y los revuelve.
Texto