46 blocos de interface com física, de graça e com o prompt pra tua IA
O Bencho é uma biblioteca de blocos que se mexem como coisa de verdade: slider que balança como líquido, bolha de vidro que entorta a foto, contador que rola. 46 são grátis e cada um tem um botão que copia o prompt pronto, com o código inteiro, pra tua IA encaixar no teu projeto. O que é grátis, o que é pago e como eu usaria.
A IA entrega o slider, o toggle e o menu funcionando. E tudo duro, sem peso nenhum. Porque o que faz uma interface parecer cara não é a cor, é como ela reage quando você mexe nela, e isso a IA quase nunca acerta sozinha.
O Bencho é uma biblioteca de blocos de interface interativos feita pelo designer Lorenzo Cabra. Cada bloco roda de verdade na página: você arrasta, aperta, ajusta e vê o movimento antes de levar. E 46 deles são de graça, com um botão que copia o prompt pronto pra tua IA.
O que tem lá dentro
- Blocos: 158 no total, separados pelo gesto: passar o mouse, apertar, arrastar, deslizar, digitar, selecionar e carregar. Slider com peso, bolha de vidro, dock que aumenta com o mouse, deslizar pra confirmar, contador que rola, medidor de contexto.
- Sons: mais de 140 sons de interface, de clique, de notificação, de navegação. Eles são gerados no próprio navegador, não gravados.
- Achados: uma galeria de interações de outros designers, com o crédito e o link pro original. É referência pura, sem código.
- Bancada: uma tela pra montar e ajustar vários blocos lado a lado.
- MCP: o conector que deixa o Claude Code, o Cursor e o Codex buscarem um bloco e colarem no teu projeto. Esse é do plano pago.
Abrindo um bloco
Clicando num cartão, o bloco abre grande, com um painel do lado. No Slosh slider, o preenchimento tem peso: se você arrasta rápido, ele passa da alça e balança antes de parar. E os controles mudam o comportamento na hora: viscosidade, impulso, canto e inclinação, além do preenchimento claro ou escuro.
Cada bloco tem os controles dele. Na bolha de vidro, por exemplo, você regula o quanto ela entorta a foto, a borda colorida, o tamanho e o canto. E os valores que você deixou no painel são os mesmos que vão pro código.
O botão que interessa pra quem monta com IA
No ícone de código, um bloco grátis mostra quatro partes: o que instalar, como usar, o código inteiro e uma explicação de como ele funciona. E em cima de tudo tem o botão Copy prompt.
Esse botão copia um pedido pronto pra colar no Claude Code, no Cursor ou no Codex. No Slosh slider, ele tem uns 20 mil caracteres. Pede pra IA criar o componente num lugar que faça sentido no teu projeto, juntar o CSS e, na parte que ele mesmo chama de "a que precisa do teu julgamento", trocar as cores e a fonte do Bencho pelas que o teu projeto já usa, em vez de criar coisa nova por cima. Depois vem o código inteiro, do componente e do CSS.
O que é grátis e o que é pago
- Grátis, sem conta: 46 blocos com o código inteiro e o Copy prompt, e 24 sons pra ouvir. Os 46 blocos também estão num repositório aberto no GitHub, junto com os 24 sons em código.
- Cadastro grátis: o botão Join for free cria a tua conta. A bancada sem limite fica no Pro.
- Pro: € 99 por ano, ou € 129 uma vez só no plano Forever (o preço cheio aparece riscado, € 149). Libera os 158 blocos com o código, os mais de 140 sons pra baixar, a bancada sem limite, o MCP e o que entrar depois.
Os preços são em euro e a cobrança é feita pela Dodo Payments, a revendedora deles. Dá pra pedir o dinheiro de volta em até 14 dias, nos dois planos, desde que você não tenha copiado boa parte da biblioteca nesse meio tempo.
O MCP, pra quem paga
O MCP é o jeito da tua IA conversar direto com o Bencho. Você pede "adiciona o dropdown do Bencho no meu projeto" ou "coloca um clique suave nos meus botões", e ela busca o bloco ou o som e cola o componente, o CSS e o que ele precisa pra rodar. Funciona no Claude, no Claude Code, no Cursor, no Codex e no Grok Bot.
Ele vem com o Pro e funciona com uma chave tua, que aparece uma vez só no menu da conta. Essa chave não se compartilha nem vai pra um repositório público. Se você está no grátis, o caminho é o Copy prompt, que faz a mesma coisa, bloco a bloco.
O que eu faria
Abriria o mural e escolheria um bloco só pra ser a cara da seção: o deslizar pra confirmar num checkout, o contador num painel, a bolha de vidro numa galeria. Mexeria nos controles até o movimento ficar do jeito certo, copiaria o prompt e colaria no Claude Code com o projeto aberto.
Antes de mandar, eu acrescentaria duas linhas no fim do prompt: uma pedindo pra não mudar nenhum número da física, porque os números são o efeito, e outra pedindo pra testar no toque do celular. E começaria pelos blocos que respondem ao dedo, o slider, o toggle e o botão de confirmar, porque é ali que a pessoa sente se a interface tem peso ou não.
O que pode e o que não pode
Os blocos grátis têm licença aberta: dá pra usar em empresa, em produto que você vende e em projeto de cliente, mudar à vontade, sem crédito na interface. A única condição é manter o aviso de direitos autorais junto quando você copia um pedaço grande do código. Os sons podem ir em app, site e trabalho de cliente, sem crédito, só não podem ser repassados como pacote de sons.
Os blocos Pro também vão pra projeto de cliente, mas não podem virar kit, biblioteca, template ou conector teu, nem entrar em base pra treinar IA. Uma licença vale pra uma pessoa. Ficam de fora o nome e a marca Bencho e as fotos que aparecem dentro de alguns blocos: no código elas vêm cinza, pra você trocar pelas tuas.
Antes de colocar no ar
- Os blocos são em React. Se o teu site não é React, pede pra tua IA ler o prompt e te dizer se dá pra adaptar antes de começar.
- Um bloco bonito não salva uma página genérica. Ele chama atenção pra seção. O texto e a oferta continuam sendo o que vende.
- Os números do site mudam. As contagens aparecem diferentes em páginas diferentes do próprio Bencho. Antes de pagar, confere o preço no checkout.
O site está aqui: bencho.dev. Abre o mural, escolhe o bloco da tua próxima seção e aperta Copy prompt.