Disco telefónico

Entrada de código con un disco de teléfono antiguo: arrastras desde el agujero hasta el tope y regresa con resorte, con clics.

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 Disco telefónico

npx shadcn@latest add @furin-pro/rotary-dial

Prop	Tipo	Por defecto	Descripción
length	number	4	Cantidad de dígitos del código.
sound	boolean	true	Sonido sintetizado de clics y resorte (solo tras una interacción del usuario).
secret	string	""	Código correcto: si se indica, una luz verde o roja avisa al completar.
auto	boolean	false	Se marca solo un código de ejemplo cuando nadie lo toca.
size	number	300	Diámetro del disco, en px.
label	string	"CÓDIGO"	Texto impreso en la tarjeta del centro.
onChange	(code: string) => void	undefined	Se llama cada vez que cambia el código marcado.
onComplete	(code: string) => void	undefined	Se llama al marcar el último dígito.

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
Medalla
Pro
Medalla en WebGL con relieve real (mapa de normales generado en código), acabado satinado con surcos concéntricos y relieve pulido, reflejos de un estudio procedural, listón de tela que se balancea y giro 3D con brillo especular que sigue al cursor; un clic la voltea.
Objetos