Campana

Campana de vidrio que se mece con el cursor y tintinea al tocarla. Funciona como indicador de avisos con contador.

Vista previa en vivo

3 avisos

Instalación

1. Configura el registro Pro una sola vez

Los componentes Pro no están en npm ni en el registro público de shadcn: se instalan con tu licencia desde el registro privado de Furin.

2. Instala Campana

npx shadcn@latest add @furin-pro/campana

Prop	Tipo	Por defecto	Descripción
vidrio	string	"#9ED8FF"	Color del vidrio de la campana.
pintura	string	"#E8452C"	Color de la pintura del borde de la campana (y del número de la tira).
tira	string	"#FFFFFF"	Color de la tira de papel (tanzaku) que cuelga del badajo.
contador	number	0	Número de avisos que se muestra en la tira (0 la deja en blanco); si sube, la campana suena sola.
sonido	boolean	true	Si es true, la campana suena; si es false, solo se mueve. El audio arranca tras la primera interacción de la persona.
volumen	number	0.7	Volumen del tintineo, de 0 a 1.
brisa	number	0.4	Intensidad de la brisa que la mece sola, de 0 (quieta) a 1.
viento	number	1	Qué tanto empuja el viento del cursor: 0 lo ignora, 1 es normal, 2 es un vendaval.
tamano	number	380	Alto de la campana en px (el ancho se calcula solo).
alSonar	(intensidad: number) => void	undefined	Se llama cada vez que suena, con la intensidad del golpe de 0 a 1.
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	"{}"	Estilos en línea del contenedor.