Jelly UI: física soft-body para controles HTML nativos no navegador

O que é o Jelly UI

O Jelly UI e uma biblioteca JavaScript que faz algo bem incomum: adiciona física de corpo mole (soft-body physics) diretamente a elementos HTML nativos como <input>, <button>, <checkbox> e outros controles de formulário. Sem canvas, sem WebGL, sem SVG animado. O efeito acontece nos próprios elementos do DOM.

Lançada em 2026, a biblioteca viralizou no Hacker News rapidamente. Quem trabalha com frontend ficou curioso porque a proposta vai na contramao do que geralmente se faz para efeitos visuais avançados. A maioria das animações de física usam <canvas> porque e mais performatico. O Jelly UI prova que da para fazer algo parecido com elementos HTML comuns e ainda ter bom desempenho.

O projeto nasceu como experimento de como a CSS Transform API e a Web Animations API, combinadas com calculo físico em JavaScript, conseguem simular deformação elástica em elementos do DOM. O resultado visual lembra aquelas interfaces de apps que dao uma resposta tátil a cada interação - como se o botão fosse feito de gelatina.

Como funciona

Por baixo, o Jelly UI usa um modelo de molas (spring physics) para calcular como cada ponto de um elemento se deforma quando sofre uma força externa. Quando você clica em um botão, por exemplo, o modelo calcula a deformação do elemento como se ele fosse uma massa elástica com rigidez e amortecimento configurável.

A deformação e aplicada via CSS Transform com matrizes 2D. O elemento não e redimensionado de verdade - ele recebe uma serie de transformações rápidas que criam a ilusão de deformação. O calculo físico roda a 60fps usando requestAnimationFrame e e sincronizado com o layout do navegador para evitar reflows desnecessários.

Uma parte inteligente da implementação e o uso de ResizeObserver para detectar mudanças no tamanho dos elementos e recalibrar o modelo de mola automaticamente. Isso significa que o efeito funciona mesmo se o layout mudar depois que a biblioteca foi inicializada - responsividade funciona sem configuração extra.

Principais recursos

O que o Jelly UI oferece na prática:

• Soft-body em elementos nativos: inputs, buttons, checkboxes, radio buttons, selects - todos podem ter o efeito sem substituir o elemento HTML nativo.
• Acessibilidade preservada: como o elemento HTML nativo e mantido, toda a acessibilidade nativa (focus, keyboard navigation, screen readers) continua funcionando sem configuração adicional.
• Configuração de física: rigidez, amortecimento, massa e velocidade máxima de deformação são configurados por elemento. Você define se quer algo sutil ou muito exagerado.
• Zero dependências: a biblioteca não depende de React, Vue, Angular ou qualquer framework. E JavaScript puro que funciona com qualquer stack.
• API declarativa via atributos HTML: funciona adicionando atributos data-jelly-* ao elemento, sem precisar de JavaScript adicional na maioria dos casos.

Como começar: instalação e acesso

A instalação e simples via npm ou carregando direto do CDN:

npm install jelly-ui

Ou via CDN para projetos sem bundler:

<script src="https://cdn.jsdelivr.net/npm/jelly-ui/dist/jelly-ui.min.js"></script>

Depois de importar, você inicializa a biblioteca e ela detecta automaticamente os elementos marcados com os atributos corretos:

import JellyUI from 'jelly-ui';

// Inicializa e observa todo o documento
JellyUI.init();

// Ou um container específico
JellyUI.init(document.getElementById('meu-formulário'));

Exemplo prático

O uso mais básico e adicionar o atributo data-jelly ao elemento HTML:

<!-- Botão com efeito jelly padrão -->
<button data-jelly>Enviar</button>

<!-- Input com efeito customizado -->
<input 
  type="text" 
  data-jelly
  data-jelly-stiffness="200"
  data-jelly-damping="15"
  placeholder="Digite algo"
/>

<!-- Checkbox com efeito exagerado -->
<input 
  type="checkbox"
  data-jelly
  data-jelly-mass="2"
  data-jelly-stiffness="100"
/>

Para controle programático, a API JavaScript permite aplicar o efeito em elementos específicos e configurar callbacks para cada estado:

import { Jelly } from 'jelly-ui';

const meuBotao = document.querySelector('#btn-submit');

const jelly = new Jelly(meuBotao, {
  stiffness: 180,
  damping: 12,
  mass: 1,
  onPress: () => console.log('pressionado'),
  onRelease: () => console.log('solto')
});

// Remove o efeito depois
jelly.destroy();

Um caso de uso real: formulários de cadastro onde cada campo da um feedback tátil visual enquanto o usuário digita ou interage. Isso aumenta a percepção de qualidade do produto sem mudar a funcionalidade.

Comparação com alternativas

Existem outras formas de criar efeitos parecidos, mas cada uma tem um tradeoff diferente:

• Canvas/WebGL: máximo de controle e performance, mas você perde os elementos HTML nativos. Acessibilidade precisa ser reimplementada do zero. Complexidade alta para algo simples.
• CSS animations puras: fáceis de implementar, mas muito limitadas para física realista. Você consegue bounce e spring, mas não deformação soft-body.
• Framer Motion (React): ótima biblioteca de animação com suporte a spring physics, mas presa ao React. Não funciona em HTML puro ou outros frameworks nativamente.
• GSAP: biblioteca profissional e muito poderosa, mas cara para projetos comerciais (licença) e tem curva de aprendizado maior.

O Jelly UI se destaca por ser a única opcao que faz soft-body em elementos HTML nativos, sem dependência de framework e com acessibilidade preservada por padrão.

Pontos positivos e limitações

O que funciona bem: a acessibilidade nativa e o ponto mais forte. Você não abre mao de nada do comportamento padrão do elemento HTML. O efeito e visualmente impressionante para demos e landing pages. A API e simples e o setup e rápido.

Limitações reais que você vai encontrar:

• Em dispositivos de baixo desempenho (celulares entry-level), o calculo físico a 60fps pode causar janks visíveis. A biblioteca tem um modo de performance reduzida, mas você precisa ativar manualmente.
• O efeito de deformação e 2D. Sem perspectiva 3D ou profundidade. Para efeitos 3D, Canvas/WebGL ainda são necessários.
• Em listas longas com muitos elementos jelly simultâneos, o consumo de CPU pode ser alto. Use com moderação em páginas com centenas de elementos interativos.
• A documentação ainda e básica (projeto relativamente novo). Para casos de uso avançados, você vai precisar ler o código-fonte.

Casos de uso reais

O Jelly UI faz mais sentido em contextos onde a experiência do usuário e um diferencial competitivo:

• Landing pages e páginas de produto: botões de CTA com efeito jelly chamam atenção e aumentam a percepção de qualidade. Especialmente eficaz em páginas de SaaS que querem parecer mais modernas.
• Formulários de onboarding: cada passo do onboarding com campos que dao feedback tátil visual torna a experiência menos robótica. Funciona bem em fluxos curtos de 3 a 5 etapas.
• Aplicativos de gamificação: botões de ação em sistemas de pontuação, conquistas ou recompensas ficam muito mais satisfatórios com física soft-body.
• Prototipação e demos: para apresentar uma ideia de produto a stakeholders, a física adiciona um fator wow que impressiona sem precisar de implementação completa.

Dicas e boas práticas

Vale a pena?

Para quem trabalha com produtos que competem em experiência do usuário, sim. O Jelly UI entrega um diferencial visual sem sacrificar acessibilidade ou adicionar muita complexidade ao codebase. O setup e de menos de 10 minutos e o impacto visual e imediato.

Para quem trabalha com sistemas internos, dashboards administrativos ou qualquer interface onde a usabilidade objetiva importa mais que o fator wow, o Jelly UI provavelmente vai mais atrapalhar do que ajudar. Física em elementos de formulário de ERP não faz sentido.

O próximo passo e simples: acesse o site oficial (jelly-ui.com), veja o playground interativo que eles tem na página inicial e brinque com os sliders de física. Em 5 minutos você já sabe se o efeito faz sentido para o seu projeto ou não.