40 componentes de graça pra página não parecer template
O Fancy Components recria os efeitos dos sites que ganham prêmio de design: palavra que cai com gravidade, rastro de foto atrás do mouse, texto que se embaralha. É aberto, grátis pra projeto comercial e tem a documentação pronta pra sua IA ler.
Quando a gente pede uma página pra IA, ela devolve quase sempre a mesma coisa: título, botão, três cards e um degradê atrás. Funciona, só que é a mesma página que todo mundo está fazendo.
O Fancy Components é uma biblioteca aberta que vai na direção contrária. A ideia, nas palavras do próprio site, é recriar os componentes mais populares dos sites premiados, pra você usar no seu projeto ou só ter o código como ponto de partida.
O que tem lá dentro
São 40 componentes, feitos com React, TypeScript, Tailwind e Motion (o antigo Framer Motion). O menu separa assim:
- Texto (20): letra que troca quando o mouse passa, texto que se embaralha, marca-texto que vai pintando a frase, máquina de escrever, contador de número, fonte variável que reage ao cursor
- Física (3): elementos que caem com gravidade, linha elástica e um ímã que puxa os elementos pro cursor
- Blocos (10): cards que empilham na rolagem, letreiro que corre por um caminho, rodapé fixo, elementos que você arrasta, o efeito de proteção de tela antigo
- Imagem (2), Fundo (2), Filtro (2) e Carrossel (1): rastro de imagem, parallax, degradê animado, rastro de pixel, efeito gosmento, pixelado e um carrossel em cubo 3D
Dois que mostram a diferença
O Gravity transforma os elementos da página em objetos com física. As palavras caem, batem uma na outra e você pega com o mouse e joga pra cima. A própria documentação mostra um uso que cabe em qualquer site: um rodapé em que os links caem e continuam clicáveis.
O Image Trail vai deixando um rastro de fotos atrás do mouse (ou do dedo, no celular). Funciona também com vídeo, SVG ou qualquer elemento HTML, o que abre espaço pra um rastro de print de depoimento ou de produto.
Como cada componente vem
Toda página tem duas abas, Demonstração e Código, um botão pra abrir o exemplo direto no v0 e a parte de Instalação, com dois caminhos: um comando que coloca o componente no projeto ou o código pra copiar e colar na mão.
Um aviso que a própria página dá: alguns componentes usam outra biblioteca por baixo (o Gravity usa o Matter.js, que é o motor de física) e o comando só anota essa dependência no projeto. Depois ainda precisa rodar a instalação dos pacotes. Se a sua IA estiver fazendo o trabalho, é só pedir pra ela conferir isso.
O que é grátis
Tudo. A introdução diz com todas as letras que o Fancy Components é de código aberto e grátis, e que pode usar em projeto pessoal ou comercial. Não tem plano pago nem cadastro.
Como eu usaria
O erro mais comum com uma biblioteca dessas é sair colocando efeito em tudo. O que eu faria é escolher um efeito só, pro lugar que mais importa da página: o título da primeira dobra, a seção de depoimento, o rodapé.
Aí você abre a página daquele componente, coloca .md no fim do endereço e manda a sua IA ler esse texto antes de mexer no projeto. Pede pra ela instalar o componente, trocar o conteúdo de exemplo pelo seu e respeitar quem ativou a opção de reduzir movimento no aparelho, mostrando o conteúdo parado pra essa pessoa.
Dois cuidados. Os filtros gosmento e pixelado têm suporte limitado ou nenhum no Safari, segundo a própria documentação, então em página de venda vale testar no iPhone antes. E efeito pesado não combina com página de tráfego pago: se a página demora, o anúncio paga a conta.
A biblioteca está aqui: Fancy Components. Abre a página de componentes, passa o mouse nos cards e escolhe um.