Control segmentado

Control segmentado de vidrio con lente que se desliza.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { GlassSegmented } 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
options	string[]	"Día, Semana, Mes, Año"	Textos de las opciones.
value	string	""	Opción elegida (modo controlado).
defaultValue	string	""	Opción inicial (modo no controlado).
onChange	(value: string) => void	""	Se llama al elegir otra opción.
label	string	"Opciones"	Etiqueta accesible del grupo.
zoom	number	1.22	Cuánto amplía la lente lo que hay debajo (1 = nada).
blur	number	10	Desenfoque del fondo en el riel, en px.
refraction	number	1	Fuerza de la refracción de la lente (0 = sin curvar la luz).
stiffness	number	320	Rigidez del resorte de la lente: más alto es más seco.
autoplay	number	0	Segundos entre cambios automáticos (0 = apagado; se detiene al interactuar).
scene	boolean	false	Pinta una escena de color animada detrás (para verlo refractar).

Deslizador elástico
Gratis
Deslizador (role slider, teclado completo) que se estira como goma al arrastrarlo más allá de sus límites y regresa con rebote; la pista se aplasta para conservar el volumen.
Navegación
Dock
Gratis
Barra de íconos que se agrandan bajo el cursor, sobre vidrio.
Navegación
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