22 componentes do shadcn, só que derretendo

O Gooey refaz 22 componentes do shadcn/ui com efeito gosmento e cada um substitui o original no mesmo lugar, com as mesmas propriedades. É grátis, instala com um comando e mostra a receita do efeito com os números. O que tem lá e o que conferir antes de instalar.

Muito site feito com IA usa os mesmos componentes do shadcn/ui: o mesmo interruptor, a mesma aba, o mesmo menu. Funciona bem, e é por isso que todo mundo usa. Só que a página fica com a mesma cara de todas as outras, justamente nas partes em que a pessoa clica.

O Gooey pega 22 desses componentes e faz eles derreterem. A forma estica, pinga e se funde quando muda de lugar, como uma gota. E o melhor: cada um entra no lugar do original do shadcn, com as mesmas propriedades, então o resto do teu código continua igual.

O que tem lá, por tipo

A página é uma vitrine só, rolando de cima pra baixo, com todos os componentes funcionando. Dá pra clicar em cada um antes de instalar. São sete grupos:

• Alternadores: o interruptor, em que a bolinha se solta e escorre até o outro lado; o grupo de opções, em que a seleção viaja como uma gota; e o grupo de alternância, em que os botões apertados lado a lado se fundem numa forma só.
• Navegação: abas, em que a pílula pula pro destino e deixa um fio fino pra trás, e paginação.
• Menus: menu suspenso, menu de contexto, seleção, caixa de busca e barra de menus. Todo menu se desprende do botão quando abre e escorre de volta quando fecha.
• Valores: controle deslizante, barra de progresso, carregando e campo de código de verificação.
• Sobreposições: dica, janelinha e cartão flutuante, que nascem de uma gota do lado do botão.
• Exibição: calendário, em que um intervalo de datas vira uma cápsula só, e carrossel.
• Botões e chat: o botão que revela uma palavra de ação, o grupo de botões e o balão de chat, em que a mensagem nova nasce de uma gota no canto.

Um detalhe bom de saber: o carregando é feito em CSS, então ele continua girando mesmo quando a página está ocupada processando outra coisa. É exatamente o momento em que um carregando mais importa.

A parte boa: troca no lugar

A seção de instalação diz que cada componente substitui o equivalente do shadcn no mesmo lugar, com as mesmas propriedades e exportações. Na prática: se a tua página já usa as abas do shadcn, você instala as abas do Gooey e a página não precisa ser reescrita. O componente que estava ali passa a derreter.

Tem um comando que instala quase todos de uma vez (o botão que revela tem o comando dele, separado) e um endereço pra cada componente, pra quem quer instalar só um. Se você monta com IA, manda a tua IA instalar pela lista da página, um por um, só os que você vai usar.

A receita, com os números

O melhor da página é que ela não esconde como o efeito é feito. São dois ingredientes: um desfoque que junta as formas quando elas chegam perto, e molas que separam essas formas em velocidades diferentes. A seção da receita mostra os valores: o raio do desfoque, o corte que deixa a borda sólida de novo e a rigidez e o amortecimento da mola.

Com esses números na mão, dá pra pedir pra tua IA o mesmo efeito num botão que não está na lista. Você cola a receita no pedido e diz onde quer a gota.

Antes de instalar

• Ele troca o arquivo do componente. Se você já mexeu nas abas ou no interruptor do shadcn do teu projeto, essa mudança some quando o Gooey entra no lugar. Salva o projeto antes.
• É muito novo. O repositório foi criado no sábado, 26 de setembro. Confere se o site continua no ar e se teve atualização antes de usar em página que vende.
• Não tem licença escrita. O código é público, mas o repositório não declara licença. Pra projeto interno e teste, tudo bem. Pra página de cliente, eu perguntaria pro criador antes.
• Movimento tem custo. Instala só os componentes que aparecem no teu funil e testa no celular.

O que eu faria

Não trocaria a biblioteca inteira. Pegaria as duas ou três peças em que a pessoa mais clica, como o interruptor de plano mensal e anual numa página de preço, as abas de uma área de membros e o balão de chat do atendimento, e trocaria só essas. É onde o efeito aparece e onde ele faz a página parecer mais cuidada que a do concorrente.

A vitrine com os 22 está aqui: Gooey.