Diafragma

Botón-lente con aspas metálicas de diafragma que se cierran y abren con resorte; el aro marca el número f.

Vista previa en vivo

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 Diafragma

npx shadcn@latest add @furin-pro/aperture-button

Prop	Tipo	Por defecto	Descripción
children	ReactNode	"Diafragma"	Texto del botón, bajo la lente.
blades	number	7	Cantidad de aspas del diafragma.
trigger	"click" \| "hover" \| "press"	"click"	Cómo se cierra: alterna con clic, se cierra con el cursor o solo mientras se mantiene pulsado.
defaultClosed	boolean	false	En modo click, empieza cerrado.
size	number	230	Diámetro de la lente, en px.
light	string	"#a9dcff"	Color de la luz que se ve por la abertura.
auto	boolean	false	Recorre aperturas f/1.4 → f/22 solo cuando nadie lo toca.
onToggle	(closed: boolean) => void	undefined	Se llama al alternar (true = cerrado).
disabled	boolean	false	Deshabilita el botón.

Disco telefónico
Pro
Entrada de código con un disco de teléfono antiguo: arrastras desde el agujero hasta el tope y regresa con resorte, con clics.
Objetos
Esquina de página
Pro
Libro de papel: la esquina inferior se despega y se dobla siguiendo al cursor con reverso, sombra y brillo de curvatura; si la sueltas pasada la mitad la página se voltea, y si no, vuelve con resorte.
Objetos
Lenticular
Pro
Impresión lenticular de verdad: cientos de lentes cilíndricas intercalan 2–3 imágenes y cada una aparece según el ángulo; al inclinar con el cursor se ve la franja del cambio, el brillo por lente y el plástico transparente.
Objetos