111 componentes grátis que deixam a página com cara de produto caro
Esse MacBook gira quando você rola a página. No post eu libero o prompt pra mandar a IA instalar, com a tela do seu produto.
Esse MacBook gira quando você rola a página. É o efeito que fez o Aceternity famoso.
No post eu libero o prompt pra mandar a IA instalar na primeira dobra, com a tela do seu produto, sem pesar a página.
O ui.aceternity.com tem parte paga. O que interessa pra maioria está no gratuito. São 111 componentes no catálogo aberto. Você entra, vê rodando, copia. Sem conta, sem cartão.
O pago é All-Access: bloco e template de página inteira, pagamento único. Nada do que eu mostro aqui está atrás disso. E você não instala a biblioteca inteira. Entra na ficha, pega um efeito, sai. A maioria pede Motion e Tailwind. Se o projeto já tem, cola e ajusta cor. Se não tem, manda a IA ler a documentação e instalar só o que aquele efeito pediu.
O que fez o site famoso: o MacBook Scroll
O nome no catálogo é Fey.com Macbook Scroll. A ficha diz isso sem enrolar: você rola a página e a imagem sai da tela, como no site da Fey. O notebook abre. Gira. A tela sai da tampa. Uma interface flutua na frente, em perspectiva.
É o efeito que colocou o Aceternity na boca de todo mundo que monta landing. Não é um fundo. Não é um botão. É um objeto 3D amarrado no scroll. A pessoa desce um pouco e o produto se explica sozinho.
Serve numa coisa só: primeira dobra de página de produto, com headline curta. O MacBook é a demo. Headline em cima, ou na frente. Duas linhas. O notebook faz o resto. A pessoa entende o produto sem ler parágrafo.
Não serve no meio de artigo. Não serve atrás de formulário. Não serve em página de conteúdo longo. Não serve em dashboard. O scroll vira o espetáculo, e o que estava pra converter perde. Se a pessoa precisa ler, esse não é o bloco.
Na ficha você troca a imagem da tela. Sem isso, o notebook mostra o exemplo deles, não o seu produto. Screenshot real do app, da oferta, da tela que você vende. Placeholder mata. Headline por cima precisa de contraste: letra clara em cima de tela clara some.
Também não empilha aurora em cima. Os dois brigam. Um efeito grande. O resto da página quieta. No celular, testa no aparelho mais simples do seu público. 3D mais scroll pode lutar com o dedo. Se travar, esse não é o efeito daquela página.
Os que valem o clique
O MacBook sozinho já justifica o clique. Se a página pede outra coisa, estes. Cada um tem lugar. Fora do lugar, vira enfeite.
- Aurora Background: aquele fundo com luz do norte que se move devagar. Coloque ele atrás de uma headline curta, em página que precisa de clima, não de objeto. Não mistura com o MacBook. Aurora clara com letra clara some.
- Background Beams: feixes finos varrendo o fundo. Mais discreto que a aurora. Quando você quer movimento sem roubar a cena. Não põe atrás de parágrafo longo.
- Tracing Beam: o fio de luz que acompanha o texto enquanto você lê. É o único desta lista que nasceu pra artigo longo, não pra primeira dobra. Landing de uma oferta só, é desperdício.
- Hero Parallax: grade de imagens que roda e some conforme você desce. Pede foto de verdade do produto, do time, do resultado. Placeholder mata o efeito.
- Evervault Card: cartão que revela chuva de caracteres no hover. Um por página, no preço ou no diferencial. Dois vira brinquedo. Celular não tem hover: testa no telefone.
- Container Scroll: bloco que rotaciona em 3D quando entra na tela. Mesma família do MacBook, menor. Serve numa seção, não no topo inteiro. Não empilha os dois.
Eu já vi página morrer de excesso. Aurora no topo, feixe no meio, cartão brilhando no preço, MacBook no rodapé. Vira parque de diversão. Esses efeitos funcionam porque chamam atenção. Se tudo chama, nada chama.
Se nenhuma dessas frases descreve a sua página, você ainda não precisa do Aceternity. Precisa de copy e de hierarquia.
Como instalar: manda a IA
Na ficha de cada efeito tem Copy prompt. É o briefing da peça, pronto pra colar. Você não fica conferindo Motion e Tailwind na mão. Manda a IA ler a página de instalação e a ficha, e instalar.
No MacBook isso importa duas vezes. Primeiro porque o efeito pede o que a ficha pede, e só isso. Segundo porque a tela do notebook precisa ser a sua. Se a IA colar o exemplo, você gastou o scroll pra mostrar o produto de outro.
O prompt
Aceternity. Instala o MacBook Scroll na primeira dobra desta página.
Cola o código (ou o Copy prompt) da ficha.
Troca a imagem da tela do notebook pela screenshot do meu produto. Não deixa o exemplo do site.
Pinta com as cores do meu tema, não as do exemplo.
Instala só o que este componente pedir.
Nenhum outro efeito animado nesta seção.
O MacBook fica ATRÁS da headline curta, ou a headline fica acima. Texto por cima precisa de contraste.
Carrega o efeito só quando a seção entrar na tela.
Otimiza pra ficar com o menor peso possível.Troca o nome do efeito se for Aurora, Tracing Beam, o que for. A última linha não é enfeite. Esses efeitos pesam. 3D, canvas, WebGL. Se a IA já entra com ordem de emagrecer, a página agradece. Carregar só quando a seção entra na tela é o mínimo. Sem isso, a primeira visita paga o peso de um efeito que a pessoa ainda não viu.
O que ficar de olho
- A licença é permissiva, e eu quase errei nessa. Fica em ui.aceternity.com/licence, com C, grafia britânica. Pode usar em site seu, de cliente, produto que você vende. Não pode redistribuir o código-fonte, revender em marketplace nem montar template pra vender.
- São efeitos pesados. Vários usam canvas e WebGL. Celular fraco trava. Testa no aparelho mais simples do seu público. E pede pra IA otimizar o peso.
- É vitrine, não painel. Tabela, formulário, seletor de data: não é aqui. Pra isso, outra biblioteca.
Pra deixar uma landing com cara de produto caro em uma tarde, continua sendo a referência. O MacBook sozinho já justifica o clique. Comenta AURORA que eu te mando o passo a passo e o prompt. Bora testar.