Jelly UI: Física de corpo mole para controles nativos de formulário HTML

Artigo original ↗ Discussão no Hacker News ↗

Uma nova biblioteca “Jelly UI” adiciona animações elásticas, de estilo corpo mole, a controles padrão de formulário HTML, buscando fazer botões, sliders e inputs parecerem lúdicos e táteis. Os comentaristas elogiam a criatividade e o suporte a reduced-motion, mas muitos criticam scroll-jacking, comportamento inconsistente de interação, problemas de acessibilidade e possíveis custos de desempenho e bateria com animações constantes. A maioria a vê como uma opção divertida para jogos, sites infantis ou efeitos pontuais, e não para interfaces de produção do dia a dia.

Recepção geral e possíveis casos de uso

  • Muitos acham os efeitos de gelatina encantadores, fofos e criativamente revigorantes; alguns dizem que é a primeira ideia de UI “divertida” que viram em anos.
  • Outros consideram exagerado, distrativo, enjoativo ou “uncanny”, e esperam que nunca apareça em apps sérios de produção.
  • Nichos sugeridos: jogos, sites voltados para crianças, lojas de doces/sorvetes, interações lúdicas com IA, apps de alfabetização inicial, UIs de jogos.
  • Vários observam que usá-lo com moderação (um único botão, sliders ou controles especiais) pode ser elegante; aplicá-lo em tudo seria brega.

Preferências de movimento e acessibilidade

  • A biblioteca respeita prefers-reduced-motion, desativando animações. Isso confundiu muita gente, que inicialmente viu apenas controles arredondados e assumiu que estava quebrado.
  • Alguns apreciam a adesão estrita às configurações do sistema, especialmente pessoas com sensibilidades visuais.
  • Outros não gostam que toggles globais do sistema operacional sejam aplicados a demos, ou tinham o Reduce Motion ativado apenas para acelerar animações do SO; eles querem uma substituição dentro da página.
  • O autor depois adiciona uma notificação e um controle de substituição.

Comportamento de scroll e design de interação

  • A demo usava scroll snapping / scrolljacking, que muitos descrevem como abrupto, quebrando o scroll esperado, causando ultrapassagem do ponto e dificuldade para ler ou usar barras de rolagem.
  • Alguns gostaram das transições em estilo slide e culparam o comportamento do navegador.
  • Após críticas persistentes, o scroll snapping foi removido.

“Física de corpo mole” e design do efeito

  • Vários comentaristas dizem que a anunciada “física de corpo mole” não é óbvia, especialmente com o movimento reduzido; eles veem deformação, mas não um comportamento físico convincente.
  • Alguns criticam a inconsistência na interação: clicar e arrastar às vezes deforma, às vezes não; soltar o clique fora às vezes ainda ativa, às vezes não (parcialmente corrigido depois).
  • Pedidos incluem direções alternativas de deformação, efeitos de hover, mais 3D/iluminação e efeitos de gelatina que também influenciem o texto, não apenas os contornos.

Desempenho e preocupações de implementação

  • Há debate sobre um loop de requestAnimationFrame e se ele repinta desnecessariamente o documento inteiro vs. apenas componentes ativos.
  • Alguns argumentam que isso é desperdiçador na web e ruim para a bateria; outros comparam com jogos e dizem que desenhar alguns widgets por frame deveria ser barato.
  • Perfis sugerem que grande parte do custo pode vir das animações Lottie no cabeçalho/rodapé, e não do próprio motor de gelatina, mas isso continua controverso.

UX dos componentes, acessibilidade e compatibilidade

  • Críticas detalhadas miram componentes específicos: entradas OTP (vários campos de um caractere), paginação, abas, diálogos de disclosure, switches e interações de menu.
  • Preocupações: alvos de toque pequenos, lacunas nas áreas clicáveis, comportamento ruim do teclado, elementos desativados usando baixa opacidade e pointer-events: none apesar de alegações de WCAG.
  • Alguns relatam desempenho lento e animações quebradas ou ausentes no Firefox (mobile e desktop) e em certas configurações do Chrome.
  • Outros elogiam o uso de web components e demonstram interesse pelo código-fonte e pelo empacotamento, observando que o repositório no GitHub é difícil de descobrir.