Botón confeti

Botón que lanza confeti físico: papelitos que giran en 3D, caen con resistencia del aire y se mecen.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { ConfettiButton } 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	"Celebrar"	Texto del botón.
count	number	120	Cuántos papelitos salen.
colors	string[]	"#ff5470, #ffb84d, #3ddc97, #4da3ff, #a66bff, #ffffff"	Colores de los papelitos.
spread	number	130	Apertura del abanico, en grados.
angle	number	-90	Dirección central de la explosión, en grados (-90 = hacia arriba).
power	number	1	Fuerza del disparo (1 = normal).
origin	"pointer" \| "center"	"pointer"	De dónde salen: del punto del clic o del centro del botón.
background	string	"#f4f4f7"	Color del fondo del botón.
color	string	"#14151a"	Color del texto del botón.

Botón de metal
Gratis
Botón de metal pulido con bisel y reflejo que sigue al cursor.
Botones
Botón de vidrio
Gratis
Botón de vidrio líquido que refracta el fondo.
Botones
Copiar
Gratis
Botón de copiar: el contorno del ícono se transforma en una palomita con un morph de trazo y resorte, y el texto se copia de verdad con navigator.clipboard (con respaldo).
Botones