Jelly UI: Física de cuerpo blando para controles de formulario HTML nativos

Artículo original ↗ Discusión en Hacker News ↗

Una nueva biblioteca “Jelly UI” añade animaciones blandas, tipo cuerpo blando, a controles de formulario HTML estándar, con el objetivo de hacer que botones, deslizadores y entradas se sientan juguetones y táctiles. Los comentaristas elogian la creatividad y el soporte para movimiento reducido, pero muchos critican el scroll-jacking, el comportamiento inconsistente de la interacción, los problemas de accesibilidad y los posibles costes de rendimiento y batería por las animaciones constantes. La mayoría lo ve como una opción divertida para juegos, sitios para niños o efectos puntuales, más que para interfaces de producción del día a día.

Recepción general y posibles casos de uso

  • Muchos consideran que los efectos jelly son encantadores, adorables y creativamente refrescantes; algunos dicen que es la primera idea de interfaz “divertida” que han visto en años.
  • Otros lo ven exagerado, distractor, nauseabundo o “uncanny”, y esperan que nunca aparezca en aplicaciones serias de producción.
  • Nichos sugeridos: juegos, sitios para niños, tiendas de dulces/helados, interacciones juguetonas con IA, apps de alfabetización temprana, interfaces de videojuegos.
  • Varios señalan que usarlo con moderación (un solo botón, deslizadores o controles especiales) podría ser elegante; aplicarlo en todas partes sería estridente.

Preferencias de movimiento y accesibilidad

  • La biblioteca respeta prefers-reduced-motion, desactivando las animaciones. Esto confundió a muchos, que al principio solo vieron controles redondeados y asumieron que estaba roto.
  • Algunos agradecen la estricta adhesión a la configuración del sistema, especialmente quienes tienen sensibilidades visuales.
  • A otros no les gusta que los interruptores globales del sistema operativo se apliquen a demos, o tenían Reduce Motion activado solo para acelerar las animaciones del SO; quieren una anulación dentro de la página.
  • Más tarde, el autor añade una notificación y un control de anulación.

Comportamiento del desplazamiento y diseño de interacción

  • La demo usaba scroll snapping / scrolljacking, que muchos describen como brusco, rompiendo el desplazamiento esperado, causando sobrepasos y dificultando la lectura o el uso de las barras de desplazamiento.
  • A algunos les gustaron las transiciones tipo diapositiva y culparon al comportamiento del navegador en su lugar.
  • Tras críticas sostenidas, se eliminó el scroll snapping.

“Física de cuerpo blando” y diseño del efecto

  • Varios comentaristas dicen que la anunciada “física de cuerpo blando” no es obvia, especialmente con el movimiento reducido; ven deformación pero no un comportamiento físico convincente.
  • Algunos critican la interacción inconsistente: a veces hacer clic y arrastrar deforma, a veces no; a veces soltar el clic fuera aún activa, a veces no (parcialmente corregido después).
  • Las peticiones incluyen direcciones de deformación alternativas, efectos hover, más 3D/iluminación, y efectos jelly que también afecten al texto, no solo a los contornos.

Preocupaciones de rendimiento e implementación

  • Hay debate sobre un bucle requestAnimationFrame y si repinta innecesariamente todo el documento en lugar de solo los componentes activos.
  • Algunos sostienen que esto es derrochador en la web y malo para la batería; otros lo comparan con los juegos y dicen que dibujar unos pocos widgets por fotograma debería ser barato.
  • Los perfiles sugieren que gran parte del coste puede venir de las animaciones Lottie del encabezado/pie de página más que del propio motor jelly, pero esto sigue siendo polémico.

UX de componentes, accesibilidad y compatibilidad

  • Las críticas detalladas apuntan a componentes específicos: entradas OTP (varios campos de un solo carácter), paginación, pestañas, diálogos de divulgación, interruptores e interacciones de menú.
  • Preocupaciones: zonas de toque pequeñas, huecos en áreas clicables, mal comportamiento con teclado, elementos deshabilitados usando baja opacidad y pointer-events: none pese a las afirmaciones WCAG.
  • Algunos reportan rendimiento lento y animaciones rotas o ausentes en Firefox (móvil y escritorio) y en ciertas configuraciones de Chrome.
  • Otros elogian el uso de web components y muestran interés por el código fuente y el empaquetado, señalando que el repositorio de GitHub es difícil de encontrar.