Casete

Progreso como casete: la cinta pasa de un carrete al otro con el diámetro de cada bobina cambiando de verdad, ventanita de plástico con reflejo y contador; se puede arrastrar para adelantar o rebobinar.

Plan: Pro · licencia comercial
Dependencias: Solo React
Props: 11 (10 ajustables)

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.

Usar mi licencia

2. Instala Casete

npx shadcn@latest add @furin-pro/cassette-progress

Props

Prop	Tipo	Por defecto	Descripción
value	number	"auto"	Progreso de 0 a 100 (controlado). Si se omite, el componente guarda el suyo.
defaultValue	number	0	Progreso inicial cuando no es controlado.
onChange	(value: number) => void	undefined	Se llama al arrastrar o usar el teclado sobre el casete.
title	string	"MIXTAPE 01"	Título impreso en la etiqueta.
side	string	"A"	Cara del casete (A, B…).
duration	number	2700	Duración total en segundos; el contador de la etiqueta la reparte según el progreso.
autoplay	boolean	false	Avanza solo, se detiene al final, rebobina y vuelve a empezar (si no es controlado).
speed	number	5	Velocidad del avance automático, en % por segundo.
color	string	"#1b1c20"	Color del plástico de la carcasa.
accent	string	"#e8552b"	Color de la franja de la etiqueta.
tilt	number	9	Inclinación máxima bajo el cursor, en grados.

Sigue explorando

Cierre
Pro
Cierre metálico de dientes reales sobre tela de sarga: arrastras el jalador y la tela se abre en V revelando tu contenido, con sombra sobre el forro y un jalador que se balancea como péndulo.
Objetos
Cordón de lámpara
Pro
Lámpara colgante con cordón de cuentas con física: se jala para encender la luz y la escena entera cambia de tema.
Objetos
Diafragma
Pro
Botón-lente con aspas metálicas de diafragma que se cierran y abren con resorte; el aro marca el número f.
Objetos

Instalación

Props

Sigue explorando

Cierre

Cordón de lámpara

Diafragma