Credencial metálica
Una credencial (una licencia, un pase, un carné) que parece de acero cepillado: su superficie refleja una luz que se desplaza según donde pongas el puntero, con las vetas del cepillado cruzándola. El metal es una pila de capas de fondo, sin elementos extra: cepillado, reflejo ancho, brillo puntual y base. La tarjeta no se inclina ni se desplaza (para eso está la tarjeta holográfica): lo que se anima es la luz, con variables de CSS registradas con @property, y eso es lo que la hace sentir pesada y no una pegatina. El texto va en oscuro sobre un metal que se mantiene claro en todo el recorrido, para que no cruce el contraste mínimo en mitad del movimiento. Y no usa la cámara ni pide ningún permiso.
- CSS, sin dependencias, sin cámara
Y el original de React Bits: Reflective Card
Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Reflective Card, y esto es lo que vimos del suyo por si prefieres usar el original.
Cuándo sí
Para un acceso, un pase o una credencial en la demo de un producto. Con un vídeo propio como reflejo, no con la cámara.
Ojo con
La opción webcam pide permiso de cámara al navegador: en una web que promete no rastrear a nadie, solo como demo explícita y apagada por defecto. Pesa 39,9 KB y lleva dos paquetes de iconos.
Accesibilidad
Respeta el movimiento reducido del sistema. No trae soporte de teclado: es una pieza para mirar, no para manejar.
- Reflective Card
pnpm dlx shadcn@latest add @react-bits/ReflectiveCard-TS-TW