Dock

Barra de íconos que se agrandan bajo el cursor, sobre vidrio.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { Dock } 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
items	DockItem[]	"6 íconos"	Íconos del dock: { label, icon, colors?, active? }.
size	number	46	Tamaño base de cada ícono, en px.
magnify	number	1.75	Cuánto crece el ícono bajo el cursor (1 = no crece).
reach	number	110	Distancia, en px, a la que el cursor todavía agranda íconos.
blur	number	1.5	Desenfoque del fondo detrás del vidrio, en px.
refraction	number	1	Fuerza de la refracción en el borde del dock (0 = sin curvar la luz).
scene	boolean	false	Pinta una escena de color animada detrás (para verlo refractar).
onSelect	(label: string) => void	""	Se llama al pulsar un ícono.

Marquesina
Gratis
Marquesina infinita sin saltos: el cursor la frena y la empuja con inercia, las filas van en sentidos opuestos y el foco del teclado la pausa.
Navegación
Notificaciones
Gratis
Notificaciones apiladas como cartas: se despliegan al pasar el cursor o enfocar, se pausan mientras las lees, se cierran solas y se anuncian con aria-live.
Navegación
Pasos
Gratis
Pasos con una línea de progreso que se llena de un nodo al siguiente; el paso nuevo se enciende cuando el trazo llega y la palomita se dibuja al completarse.
Navegación