MotionWeb
Explorar
Documentação

Guia de
Implementação

Aprenda a integrar as animações do acervo MotionWeb em qualquer projeto — do HTML estático ao React moderno — em minutos.

Explorar AcervoVer o Passo a Passo

Como usar as animações

4 passos simples para sair do zero a uma interface premium.

01

01.Escolha uma animação

Navegue pelo acervo e encontre a animação perfeita para o seu projeto. Cada animação tem um preview ao vivo e código pronto para uso.

  • Explore por categoria: hero sections, botões, text reveals e mais
  • Verifique o nível de dificuldade antes de implementar
  • Veja o preview ao vivo direto no card para ter certeza da escolha
02

02.Copie o código

Cada animação possui 4 abas de código disponíveis. Escolha o formato que melhor se adapta ao seu stack.

  • HTML — Estrutura semântica da animação
  • CSS — Estilos, keyframes e responsividade
  • JavaScript — Lógica interativa e efeitos
  • React — Componente pronto gerado automaticamente
03

03.Integre ao seu projeto

Cole o código na estrutura do seu site. Cada formato tem um processo de integração diferente.

  • HTML/CSS/JS: Cole diretamente no seu arquivo .html
  • React: Salve como componente .tsx e importe na sua página
  • Ajuste cores, tamanhos e textos para o seu contexto
04

04.Publique e impressione

Sua página agora tem animações premium que elevam a percepção de valor do seu produto e encantam seus clientes.

  • Teste em diferentes dispositivos e resoluções
  • Otimize a performance com lazy loading quando necessário
  • Combine múltiplas animações para criar experiências únicas

Dois formatos, um resultado

Choose your weapon. Ambos entregam a mesma experiência visual premium.

HTML Vanilla

Para projetos simples, landing pages estáticas ou sites sem framework. Cole o HTML, CSS e JS nos seus arquivos.

Exemplo
<!-- 1. Cole o HTML no body -->
<section class="hero">
  <canvas id="particles"></canvas>
  <div class="hero-content">
    <h1>Seu título aqui</h1>
  </div>
</section>

<!-- 2. Cole o CSS no <style> ou .css -->
<!-- 3. Cole o JS antes de </body> -->

React / Next.js

Para projetos React ou Next.js. Copie o componente gerado automaticamente e importe na sua página.

Exemplo
// 1. Salve como components/HeroAnimation.tsx
// 2. Importe na sua página:

import HeroAnimation from '@/components/HeroAnimation';

export default function Page() {
  return <HeroAnimation />;
}

Estrutura padrão das animações

Todas as animações seguem esse mesmo padrão. Aprenda uma vez, use em todas.

HTML

Estrutura semântica

CSS

Estilos e animações

JavaScript

Lógica interativa

Geração automática

Componente React

Gerado automaticamente a partir do HTML + CSS + JS

Como funciona:

  1. 1Nossa equipe cadastra a animação com HTML, CSS e JS puros — código vanilla que roda em qualquer navegador.
  2. 2O sistema gera automaticamente o preview ao vivo em um iframe sandbox isolado — na página da animação.
  3. 3Ao desbloquear, o usuário pode copiar o código original (HTML/CSS/JS) ou o componente React gerado automaticamente.
  4. 4Animações bloqueadas exigem o código secreto do vídeo no YouTube — uma forma de apoiar a produção do conteúdo.

Dicas de implementação

Otimize o resultado final com essas boas práticas.

Personalize as cores

Todas as animações usam variáveis CSS simples. Troque as cores no CSS para alinhar com a identidade visual do seu cliente.

Teste em tela cheia

As animações são criadas pensando em viewport inteiro. Sempre teste ocupando 100% da largura para ver o efeito completo.

Responsividade

O CSS já inclui media queries e clamp() para adaptação automática. Verifique o resultado em mobile antes de publicar.

Pronto para começar?

Escolha sua primeira animação, copie o código e transforme seu próximo projeto em algo extraordinário.

Explorar AcervoCanal do YouTube