Ola de grosor

El grosor de una fuente variable ondula según la cercanía del cursor, letra por letra.

Vista previa en vivo

Weight

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { WeightWave } 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	"Weight"	El texto (acepta saltos de línea).
size	number	112	Tamaño de la letra, en px.
family	string	"Roboto Flex"	Familia de Google Fonts con eje de peso (wght).
minWeight	number	100	Peso de las letras lejos del cursor.
maxWeight	number	1000	Peso de las letras justo bajo el cursor.
radius	number	190	Radio de influencia del cursor, en px.
idle	boolean	true	Cuando no hay cursor cerca, una ola recorre el texto sola.
color	string	"#F4F5F7"	Color del texto.

Ráfaga
Gratis
Letras que salen volando con el cursor.
Texto
Revelado por máscara
Gratis
Líneas que suben detrás de una máscara, escalonadas, como en la presentación de un producto.
Texto
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