Contorno que se llena

Texto en contorno que se llena de líquido con una ola que nace donde entra el cursor, y se vacía al salir.

Vista previa en vivo

Oleaje

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { OutlineFill } 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	"Oleaje"	Texto a mostrar.
fontSize	number	132	Tamaño máximo de la letra, en px (se ajusta al ancho).
fontWeight	number	900	Grosor de la letra.
color	string	"#3FA9FF"	Color del líquido.
strokeColor	string	"rgba(255,255,255,0.9)"	Color del contorno.
strokeWidth	number	1.6	Grosor del contorno, en px.
waveHeight	number	1	Qué tan alta es la ola al entrar y salir.
autoplay	boolean	false	Se llena y se vacía solo cuando nadie lo toca.

Descifrar
Gratis
Texto que se descifra letra por letra.
Texto
Ensamble de píxeles
Gratis
El texto se arma desde una nube de partículas con resortes; el cursor las dispersa y vuelven solas a su sitio.
Texto
Glitch RGB
Gratis
Texto limpio que cada tanto se parte en ráfagas cortas: canales RGB separados y franjas desplazadas.
Texto