🎨 3 bibliotecas de UI para sites animados com cara premium
Nível 2 · 🎶 Sereias · ⏱️ ~20 min para explorar · Pré-requisitos: noções de HTML/JS, Node.js instalado (para usar npx) e, idealmente, um projeto React/Next.js já criado
📌 Pra que serve
O vídeo apresenta três bibliotecas de componentes prontos: Animmaster Lib (o áudio diz "Animaster Live"), Skiper UI (a transcrição diz "Skyper UI") e Vengeance UI. Elas servem para quem quer um site com animações de alto nível sem criá-las do zero, copiando o componente e colando no projeto. Ajudam devs, freelancers e criadores de landing pages.🛠️ Passo a passo
O vídeo dura 30 s e é uma vitrine, não um tutorial de instalação. Os passos abaixo juntam a fala e o que aparece nas telas.1. Abra o Animmaster Lib e vá em Components. O autor fala em mais de 250 componentes animados. A tela "PRO-Level Components" lista as categorias na lateral: Scroll Animations, Mouse Effects, Page Transitions, Grid Animations, Sliders, Hero Animations, WebGL Shaders, Background Animations, Navigation Menus e Hover Effects.
2. Filtre pela categoria que você precisa. No vídeo ele clica em Mouse Effects (efeitos que reagem ao cursor) e em WebGL Shaders (animações gráficas pesadas). Cada card mostra uma prévia animada.
3. Copie e cole. A promessa do autor é "just copy, paste, done". Atenção: os cards têm um ícone de diamante e o topo mostra o botão Unlock PRO e a aba Pricing. Boa parte do acervo parece ser paga, então confira o que é gratuito antes de planejar o projeto.
4. Abra o Skiper UI para seções prontas. Segundo a fala, ele traz hero sections, cards, páginas de preços e outros componentes. A tela mostra um carrossel de planos (Gamora $499/mês, Thanos $899/mês) em que o card ativo ganha brilho verde seguindo o mouse. O vídeo não mostra o endereço do site, então procure pelo nome no busc
ador.
5. Abra o Vengeance UI e navegue pelo menu lateral da documentação. Os grupos vistos são Layout & Cards, Tooltip & Marquee, Loaders e Navbar & Docs. O exemplo aberto é o Expandable Bento Grid, com abas Preview e Code, e uma seção "On this page" com Overview, Preview, Installation e Usage.
6. Instale o componente do Vengeance UI pela linha de comando. Na tela, a página mostra um comando npx shadcn@latest add seguido de uma URL vengeanceui.com/r/..., que aparece cortada. Copie o comando completo pelo botão de copiar da própria página, dentro de um projeto que já usa shadcn/ui (veja a inicialização abaixo).
7. Ajuste ao seu projeto. Troque textos, cores e imagens do componente e teste o desempenho, principalmente nos efeitos WebGL. Esse passo é uma sugestão minha, o vídeo não cobre.
💡 Dica: antes de assinar qualquer plano PRO, monte uma página de teste com componentes gratuitos e veja se o desempenho no celular fica bom. Efeitos WebGL e de scroll pesam em aparelhos mais fracos.
🔗 Links e instalação
Fonte: https://www.instagram.com/reel/DaDRFEezrOP/Sites oficiais:
- Vengeance UI: https://www.vengeanceui.com (o endereço aparece na tela do vídeo)
- Skiper UI: o vídeo não mostra o endereço. Procure pelo nome "Skiper UI" no buscador.
- Animmaster Lib: o vídeo não mostra o endereço. Procure pelo nome "Animmaster Lib" no buscador.
O autor pede para comentar "Libraries" e diz que manda os links por DM. Isso não veio no material, então o único endereço confirmado é o do Vengeance UI.
Para instalar um componente do Vengeance UI, rode o comando na pasta do seu projeto (React/Next.js). O fim da URL muda a cada componente e deve ser copiado da página:
npx shadcn@latest add <URL-do-componente-copiada-da-página>Se o projeto ainda não usa shadcn/ui, rode antes, na raiz do projeto, e siga as perguntas do assistente:
npx
shadcn@latest initO que ficou de fora: o vídeo não mostra a instalação do Animmaster Lib nem do Skiper UI, não informa preços das bibliotecas nem diz quais componentes são gratuitos. Também não traz nenhum código.