Tanzaku

Frases en tiras de papel verticales que cuelgan de un hilo y se mecen con el movimiento del cursor.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { Tanzaku } 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	"風鈴\|EL\|CURSOR\|ES EL\|VIENTO"	Frases, una por tira: un arreglo, o un solo texto con las frases separadas por "\|".
paper	string	"#F6F0E4"	Color del papel de las tiras.
ink	string	"#111111"	Color de la tinta (el texto).
accent	string	"#E8452C"	Color de la banda del nudo, arriba de cada tira.
thread	string	"#FFFFFF"	Color de la cuerda y de los hilos.
threadLength	number	44	Largo medio del hilo de cada tira, en px (cada una cuelga a su altura).
wind	number	1	Fuerza del viento que levanta el cursor; 0 lo apaga.
breeze	number	1	Fuerza de la brisa suave de fondo; 0 la apaga.
fontSize	number	30	Tamaño de las letras en px.
gap	number	22	Separación entre tiras en px.
letters	"rectas" \| "giradas"	"rectas"	Cómo se escriben las letras: "rectas" una sobre otra, o "giradas" como texto de lado.
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	undefined	Estilos en línea del contenedor.