Cómo agregar animación a un sitio de Carrd

¿Qué plan de Carrd necesitas para cada tipo de animación?

La página de planes y la documentación de Carrd reparten las funciones así (precios publicados en carrd.com/pro en octubre de 2026, con facturación anual):

La documentación de Carrd indica directamente los requisitos de Pro Lite y Pro Standard; no publica los límites de carga del plan gratis, así que prueba un GIF pesado antes de construir tu sitio en torno a él.

¿Cómo agrego una animación de Rive con un elemento Embed?

1. Haz clic en Add Element y luego en Embed.
2. Configura Type en Code.
3. Configura Style en Inline, que coloca el código exactamente donde está el elemento en la página.
4. Pega el fragmento en Code, con la URL de tu propio .riv.
5. Publica el sitio. Carrd indica que el embed no muestra nada en el 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>

El contenedor limita la mascota a 360 píxeles y la mantiene cuadrada en teléfonos. Cambia max-width según tu diseño. Si colocas varios embeds de Rive, carga el runtime una sola vez: pon la línea <script src> en un Embed aparte con Style Hidden y ubicación Head, y deja en línea solo el canvas y el código de inicio. No uses Body End para el runtime: se carga después de los embeds en línea, así que su código de inicio se ejecutaría antes de que exista rive.

Carrd advierte que un error de sintaxis en el código de un embed puede dejar en blanco todo el sitio publicado. Si la página aparece vacía después de publicar, abre la consola del navegador, corrige el error y vuelve a publicar.

¿Dónde alojo el archivo .riv para Carrd?

Fuera de Carrd. En Carrd, las cargas pertenecen a elementos como Image, Video y Audio, así que no hay dónde subir un .riv y obtener un enlace. Pon el archivo en un hosting estático y pega su URL HTTPS en src.

El hosting debe permitir solicitudes de origen cruzado, porque el runtime descarga el .riv desde el dominio de tu página de Carrd. GitHub Pages envía access-control-allow-origin: * (verificado en octubre de 2026), y los almacenamientos de objetos como Cloudflare R2 te permiten agregar una política CORS. Comprueba una URL con:

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

En este fragmento, el runtime se carga desde unpkg junto con su archivo WASM, así que no necesitas alojarlos.

¿Cómo agrego un MP4 o GIF en loop sin código?

Elemento Video (Pro Lite o superior): sube un MP4 codificado en H.264, activa la reproducción en loop y desactiva los controles del reproductor para que se vea como parte del diseño. Carrd rechaza los MP4 que usan otros códecs, así que vuelve a exportar desde tu editor con H.264 si falla la carga.

Si un video no se reproduce automáticamente aunque Autoplay esté marcado, la página de solución de problemas de Carrd menciona las causas habituales: una pista de audio (silénciala o elimínala por completo), un teléfono en modo de bajo consumo o de ahorro de datos, o una extensión del navegador que bloquea la reproducción automática. Exporta los clips de animación sin audio y la primera causa desaparece.

GIF: agrega un elemento Image y sube el GIF. Carrd señala que los GIF creados con Ezgif a veces provocan fallos al publicar, así que vuelve a exportarlos con otra herramienta si la publicación falla. Mantén los GIF livianos; pesan mucho más que un MP4 del mismo clip.

Ambos formatos reproducen un único loop fijo y no pueden reaccionar a los visitantes. Para un clip con fondo transparente sobre una sección de color, usa un Embed con una etiqueta <video> y dos fuentes, como en video con fondo transparente en un sitio web.

¿La mascota puede reaccionar a clics o a un formulario de Carrd?

Sí, con el embed Inline. Su código se ejecuta en la página, así que puede escuchar al resto de la página. El fragmento de arriba ya reproduce la reacción yes cuando se hace clic en el personaje. Para celebrar después de enviar un formulario, agrega un listener para el evento submit, que se propaga desde cualquier formulario:

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

Los estados de ánimo funcionan igual: asigna a mascot.viewModelInstance.number("mood").value el valor 5 (loading) mientras algo está pendiente, o 9 (attention) para atraer la mirada hacia una llamada a la acción. Publica y prueba en un teléfono después de cada cambio, ya que los embeds no se ejecutan en el editor.

¿Qué archivos debo exportar para un sitio de Carrd?

Elige los archivos según el plan: un GIF para Basic, un MP4 H.264 para Pro Lite, y un .riv más una imagen fija de póster para Pro Standard o superior.

Charmotion crea todo esto a partir de una imagen de tu personaje o logo. Cada set cubre MP4 a 1080x1080, video 9:16 y GIF, con fondo sólido. Los sets vienen con los planes de pago (desde $20 al mes), con el .riv con un view model Character (mood de 0 a 9 y triggers success, error, yes, no, enter y exit) que usan los fragmentos de esta página, además de WebM y MOV HEVC transparentes.

Agregar una mascota de marca de Rive a un sitio de Carrd

1. Revisa el plan. Los embeds requieren Pro Standard o superior; Pro Lite solo agrega la carga de videos.
2. Aloja el .riv. Sube el archivo a un hosting estático que envíe Access-Control-Allow-Origin, como GitHub Pages o un bucket de R2 con una política CORS.
3. Agrega un Embed. Haz clic en Add Element y luego en Embed, y configura Type en Code y Style en Inline.
4. Pega el fragmento de código. Pega el canvas, el runtime web de Rive con versión fija y el script de inicio con la URL de tu .riv.
5. Publica y prueba. Publica el sitio, ya que los embeds no muestran nada en el editor, y luego prueba los clics, los formularios y la vista en un teléfono.

Preguntas frecuentes

¿Por qué mi embed de Carrd aparece en blanco en el editor?

Es lo esperado. Carrd indica que el elemento Embed no muestra nada en el editor, así que debes publicar el sitio para verlo. Si también aparece en blanco en el sitio publicado, revisa la consola del navegador para ver si hay un error de script o una solicitud del .riv bloqueada.

¿Puedo subir un archivo .riv a Carrd?

No. En Carrd, las cargas pertenecen a elementos como Image, Video y Audio, así que no hay ningún campo para un .riv. Alójalo en GitHub Pages, en un almacenamiento de objetos con una política CORS o en otra CDN, y pega la URL HTTPS en el embed.

¿Carrd es compatible con Lottie?

No como elemento integrado. Igual que Rive, Lottie necesita un script de reproductor, lo que implica usar un elemento Embed en Pro Standard o superior. En planes inferiores, convierte la animación a un MP4 H.264 o a un GIF.

Respuestas rápidas de esta guía

• ¿Qué plan de Carrd permite embeds?

Fuentes

• 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