Como adicionar animação a um site no Carrd

Qual plano do Carrd você precisa para cada tipo de animação?

A página de planos e a documentação do Carrd dividem os recursos assim (preços listados em carrd.com/pro em outubro de 2026, com cobrança anual):

A documentação do Carrd informa diretamente os requisitos do Pro Lite e do Pro Standard, mas não publica os limites de upload do plano grátis, então teste um GIF grande antes de montar o site em cima dele.

Como adicionar uma animação do Rive com um elemento Embed?

1. Clique em Add Element e depois em Embed.
2. Defina Type como Code.
3. Defina Style como Inline, que coloca o código exatamente onde o elemento fica na página.
4. Cole o snippet em Code, com a URL do seu próprio .riv.
5. Publique o site. O Carrd informa que o embed não exibe nada no editor.

<div style="width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const canvas = document.getElementById("mascot");
  const mascot = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas,
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => mascot.resizeDrawingSurfaceToCanvas(),
  });
  // Play the yes reaction when someone clicks the character.
  canvas.addEventListener("click", () => {
    mascot.viewModelInstance?.trigger("yes")?.trigger();
  });
</script>

O wrapper limita o mascote a 360 pixels e o mantém quadrado no celular. Altere max-width conforme seu layout. Se você usar vários embeds do Rive, carregue o runtime uma vez só: coloque a linha <script src> em um Embed separado com Style Hidden e local Head, e deixe inline apenas o canvas e o código de inicialização. Não use Body End para o runtime: ele carrega depois dos embeds inline, então o código de inicialização deles rodaria antes de rive existir.

O Carrd avisa que um erro de sintaxe no código do embed pode deixar todo o site publicado em branco. Se a página aparecer vazia depois de publicar, abra o console do navegador, corrija o erro e publique de novo.

Onde hospedar o arquivo .riv para o Carrd?

Fora do Carrd. No Carrd, os uploads pertencem a elementos como Image, Video e Audio, então não há onde enviar um .riv e obter um link para ele. Coloque o arquivo em uma hospedagem estática e cole a URL HTTPS em src.

A hospedagem precisa permitir requisições cross-origin, porque o runtime busca o .riv a partir do domínio da sua página no Carrd. O GitHub Pages envia access-control-allow-origin: * (verificado em outubro de 2026), e serviços de armazenamento de objetos como o Cloudflare R2 permitem adicionar uma política de CORS. Teste uma URL com:

curl -sI -H "Origin: https://yourname.carrd.co" \
  https://YOUR-CDN.example.com/mascot.riv | grep -i access-control

Neste snippet, o próprio runtime carrega do unpkg, junto com o arquivo WASM, então você não precisa hospedá-los.

Como adicionar um MP4 ou GIF em loop sem código?

Elemento Video (Pro Lite em diante): envie um MP4 codificado em H.264, depois ative a reprodução em loop e desative os controles do player para que ele pareça parte do design. O Carrd rejeita arquivos MP4 com outros codecs, então, se um upload falhar, exporte de novo no seu editor em H.264.

Se um vídeo não iniciar sozinho mesmo com Autoplay marcado, a página de solução de problemas do Carrd aponta as causas mais comuns: uma faixa de áudio (deixe sem som ou remova a faixa), um celular no modo de economia de energia ou de dados, ou uma extensão do navegador que bloqueia a reprodução automática. Exporte os clipes de animação sem áudio e a primeira causa desaparece.

GIF: adicione um elemento Image e envie o GIF. O Carrd observa que GIFs feitos no Ezgif às vezes causam falhas na publicação, então, se a publicação falhar, exporte de novo em outra ferramenta. Mantenha os GIFs pequenos; eles são bem maiores que um MP4 do mesmo clipe.

Os dois formatos tocam um único loop fixo e não reagem aos visitantes. Para um clipe com fundo transparente sobre uma seção colorida, use um Embed com uma tag <video> e duas fontes, como em vídeo com fundo transparente em um site.

O mascote pode reagir a cliques ou a um formulário do Carrd?

Sim, com o embed Inline. O código dele roda na própria página, então pode ouvir o restante da página. O snippet acima já toca a reação yes quando o personagem é clicado. Para comemorar depois do envio de um formulário, adicione um listener para o evento submit, que sobe (bubbling) a partir de qualquer formulário:

<script>
  // Add below the snippet above: celebrate when any form on the page is submitted.
  document.addEventListener("submit", () => {
    mascot.viewModelInstance?.trigger("success")?.trigger();
  });
</script>

Os humores funcionam do mesmo jeito: defina mascot.viewModelInstance.number("mood").value como 5 (loading) enquanto algo estiver pendente, ou 9 (attention) para chamar a atenção para uma call to action. Publique e teste no celular depois de cada alteração, já que embeds não rodam no editor.

Quais arquivos exportar para um site no Carrd?

Escolha os arquivos conforme o plano: um GIF para o Basic, um MP4 H.264 para o Pro Lite e um .riv com um pôster estático para o Pro Standard em diante.

O Charmotion faz tudo isso a partir de uma imagem do seu personagem ou logo. Todo conjunto cobre MP4 em 1080x1080, vídeo 9:16 e GIF, com fundo sólido. Os conjuntos vêm com os planos pagos (a partir de US$ 20 por mês), com o .riv com um view model Character (mood de 0 a 9 e os triggers success, error, yes, no, enter e exit) que os snippets desta página usam, além de WebM transparente e MOV HEVC.

Adicione um mascote do Rive a um site no Carrd

1. Confira o plano. Embeds exigem o Pro Standard ou superior; o Pro Lite só adiciona upload de vídeos.
2. Hospede o .riv. Envie o arquivo para uma hospedagem estática que envie Access-Control-Allow-Origin, como o GitHub Pages ou um bucket R2 com política de CORS.
3. Adicione um Embed. Clique em Add Element e depois em Embed, e defina Type como Code e Style como Inline.
4. Cole o snippet. Cole o canvas, o runtime web do Rive com versão fixada e o script de inicialização com a URL do seu .riv.
5. Publique e teste. Publique o site, já que embeds não exibem nada no editor, e depois teste cliques, formulários e o celular.

Perguntas frequentes

Por que meu embed do Carrd fica em branco no editor?

Isso é esperado. O Carrd informa que o elemento Embed não exibe nada no editor, então você precisa publicar o site para vê-lo. Se ele também ficar em branco no site publicado, verifique no console do navegador se há um erro de script ou uma requisição do .riv bloqueada.

Posso enviar um arquivo .riv para o Carrd?

Não. No Carrd, os uploads pertencem a elementos como Image, Video e Audio, então não existe um campo para um .riv. Hospede o arquivo no GitHub Pages, em um object storage com política de CORS ou em outra CDN e cole a URL HTTPS no embed.

O Carrd é compatível com Lottie?

Não como elemento nativo. Assim como o Rive, o Lottie precisa de um script de player, o que exige um elemento Embed no plano Pro Standard ou superior. Nos planos inferiores, converta a animação para MP4 H.264 ou GIF.

Respostas rápidas deste guia

• Qual plano do Carrd permite embeds?

Fontes

• Embedding custom code, Carrd Docs
• Pro plans, Carrd Docs
• Carrd Pro, Carrd
• Adding videos, Carrd Docs
• Troubleshooting, Carrd Docs
• Cross-Origin Resource Sharing (CORS), MDN Web Docs
• Configure CORS, Cloudflare R2 docs
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive