Vibeset

Tarjeta holográfica

No hay bucle de animación. El puntero escribe dos números (su posición dentro de la tarjeta, de 0 a 1) en variables de CSS, y todo lo demás es una cuenta de CSS sobre ellas: la inclinación, el brillo holográfico, el parallax. El suavizado lo pone una transición, no un requestAnimationFrame. La inclinación se reparte entre los dos ejes con la misma cuenta, la posición menos la mitad por el ángulo máximo, así que en el centro está plana y en una esquina llega justo al tope. Al salir el puntero se posa más despacio de lo que seguía. El brillo es adorno (aria-hidden, sin eventos) y debajo todo es HTML normal: la acción es un enlace o un botón de verdad.

Y el original de React Bits: Profile Card

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Profile Card, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para presentar a una persona o a un equipo en una web de portfolio. Con una o pocas tarjetas: llama la atención y gasta.

Ojo con

Trae dos paquetes de iconos solo para pintar un sobre de correo: @hugeicons/core-free-icons pesa unos 80 MB instalado (se reparte por iconos, pero la instalación es la que es). Cambia el icono por uno que ya tengas.

Accesibilidad

Respeta el movimiento reducido del sistema y trae textos alternativos. En iOS pide el permiso del sensor de orientación, como debe.