Burbujas tras vidrio

Manchas de color que flotan detrás de un vidrio esmerilado.

Vista previa en vivo

Vidrio esmerilado

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { GlassBlobs } 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	ReactNode	""	Contenido que va sobre el panel esmerilado.
colors	string \| string[]	"#ff4f9a,#5b7bff,#2fe0b8,#ffb04a,#9b5cff,#ff6a4d"	Colores de las manchas, separados por comas o como lista.
count	number	6	Cuántas manchas flotan detrás.
speed	number	1	Velocidad del movimiento: 1 es normal, 0 las detiene.
blur	number	26	Desenfoque del vidrio esmerilado, en px.
grain	number	0.5	Cuánto grano tiene el vidrio, de 0 a 1.
panel	boolean	true	Muestra el panel de vidrio centrado (si no, el desenfoque cubre todo).
radius	number	32	Radio de las esquinas del panel, en px.
background	string	"#0b0d24"	Color de fondo detrás de las manchas.

Cromo líquido
Gratis
Superficie de cromo que ondula y refleja un entorno luminoso.
Fondos
Curvas de nivel
Gratis
Mapa topográfico vivo: curvas de nivel de un terreno que se deforma lento, con curvas maestras acotadas; el cursor levanta una colina.
Fondos
Estanque
Gratis
Superficie de agua con ondas WebGL.
Fondos