Cómo agregar animaciones de Rive y Lottie a Framer

¿Framer es compatible con Rive?

Sí, mediante un plugin oficial que Rive publica en el Framer Marketplace. Su ficha dice que "da a Framer soporte nativo del formato Rive, lo que significa que puedes arrastrar y soltar un archivo .riv directamente en Framer", y que te permite acceder a los inputs de la máquina de estados del archivo y controlarlos desde Framer.

Así que, a diferencia de un embed simple, la máquina de estados sigue funcionando: un personaje puede quedarse en reposo (idle) por sí solo, y Framer puede cambiar un input para pasarlo a otro estado. Esto basta para la mayoría de los sitios de marketing, donde el personaje reacciona al hover, a los toques y a las secciones de la página.

Dos cosas que debes saber antes de empezar:

• El plugin funciona con inputs de la máquina de estados. Los archivos que solo exponen propiedades de Data Binding necesitan la vía del componente de código que se describe más abajo, así que revisa qué sistema usa tu archivo.
• Ponles nombres claros a los inputs en el archivo fuente. Los seleccionarás por nombre dentro de Framer, y un número llamado mood es más fácil de manejar que varios booleanos.

¿Cómo se usa el plugin oficial de Rive?

1. Abre el Framer Marketplace, busca el plugin Rive de Rive y ábrelo en tu proyecto.
2. Arrastra tu archivo .riv al canvas.
3. Selecciona el artboard y la máquina de estados que quieres ejecutar.
4. Ajusta el tamaño de la capa con una relación de aspecto fija que coincida con el artboard, para que el personaje no se recorte en breakpoints más pequeños.
5. Configura los inputs que quieres controlar y conéctalos a tu diseño, por ejemplo mediante variantes de componente para los estados de hover y presionado.

Con un personaje basado en estados de ánimo, una configuración común es un componente de Framer con algunas variantes, cada una con un valor distinto de mood: idle (0) por defecto, happy (1) al hacer hover, attention (9) en una sección que necesita llamar la atención. Los triggers como yes o success encajan con los toques en un botón de llamada a la acción.

Consulta la ficha del plugin para ver sus opciones actuales, ya que las interfaces de los plugins cambian más rápido que la documentación. Si falta un control que necesitas, el componente de código de la última sección te da acceso completo al runtime.

¿Framer es compatible de forma nativa con Lottie y dotLottie?

Framer ofrece componentes Lottie en el menú Insert. Según una guía de LottieFiles, haces clic en Insert, abres Media para encontrar los componentes de animación, agregas un componente Lottie o Dot Lottie y luego lo vinculas a tu archivo. LottieFiles lo describe como soporte nativo; el centro de ayuda de Framer no lo documenta con el mismo detalle, así que revisa el panel Insert de tu editor para ver las opciones actuales.

Usa Lottie para ilustraciones que se reproducen de principio a fin o en loop: una escena para la sección hero, un ícono animado, un dibujo de estado vacío. Prefiere .lottie en lugar de .json cuando tu herramienta de exportación lo ofrezca, porque los archivos dotLottie están comprimidos y pueden contener varias animaciones en un solo archivo.

Si la animación necesita cambiar entre estados según lo que haga el visitante, Rive suele ser la opción más sencilla, ya que la lógica de cambio vive en la máquina de estados del archivo y no en tu layout de Framer. Consulta Rive vs Lottie para una comparación más completa.

¿Cómo agregas un video o un video con fondo transparente en Framer?

El componente Video de Framer reproduce archivos subidos, URLs de MP4 alojados, YouTube y Vimeo. El centro de ayuda de Framer indica que "optimiza la carga del video, pero no optimiza ni comprime el contenido del video en sí", así que exporta un archivo liviano y listo para la web antes de subirlo. Para loops de fondo, activa la reproducción automática, el sonido silenciado y el loop.

El video con fondo transparente requiere cuidado. Chrome, Edge y Firefox muestran el canal alfa de un WebM VP9, pero Safari reproduce el WebM opaco y necesita en su lugar un .mov HEVC con alfa. Por eso, un solo archivo subido no puede ser transparente en todos los navegadores. Para superponer un personaje sobre tu diseño, usa un embed o un componente de código que genere un <video> con ambas fuentes, HEVC primero:

<video autoplay muted loop playsinline preload="metadata"
       width="400" height="400" poster="/mascot-poster.png">
  <!-- Safari: HEVC with alpha must come first -->
  <source src="/mascot.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
  <!-- Chrome, Edge, Firefox: VP9 with alpha -->
  <source src="/mascot.webm" type="video/webm; codecs=vp09.00.41.08">
</video>

Si la transparencia no es esencial, un MP4 cuadrado sobre un fondo del mismo color que tu sección es la opción más sencilla y se reproduce en todas partes.

Agregues lo que agregues, ten en cuenta a los visitantes que activan el movimiento reducido. Motion, la biblioteca de animación sobre la que está construido Framer, documenta que Framer expone su comportamiento de movimiento reducido como un ajuste en Site Settings, luego Accessibility. Ese ajuste cubre las transiciones propias de Framer; no pausa por ti un archivo Rive ni un video. Dale a un personaje en loop un estado de reposo tranquilo y, en un componente de código, comprueba matchMedia("(prefers-reduced-motion: reduce)") y omite la reproducción automática cuando coincida.

¿Cómo vinculas los estados de ánimo de Rive a propiedades de Framer con código?

Los componentes de código de Framer son componentes de React, así que puedes usar el runtime de Rive para React y exponer el estado de ánimo como un property control. Esto les da a los diseñadores un slider en el canvas y te permite conectar la propiedad a variantes u overrides.

import { addPropertyControls, ControlType } from "framer";
import { useEffect } from "react";
import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

const SM = "CharacterStateMachine";

export default function Mascot({ src, mood }: { src: string; mood: number }) {
  const { rive, RiveComponent } = useRive({ src, stateMachine: SM, autoplay: true });
  const moodInput = useStateMachineInput(rive, SM, "mood");

  useEffect(() => {
    if (moodInput) moodInput.value = mood;
  }, [moodInput, mood]);

  return <RiveComponent style={{ width: "100%", height: "100%" }} />;
}

addPropertyControls(Mascot, {
  src: { type: ControlType.File, allowedFileTypes: ["riv"] },
  mood: { type: ControlType.Number, min: 0, max: 9, step: 1, defaultValue: 0 },
});

La documentación para desarrolladores de Framer explica cómo se resuelven las importaciones de paquetes en los archivos de código; consúltala si la importación de Rive no carga. Charmotion genera, a partir de un personaje subido, un .riv con este input mood (de 0 idle a 9 attention) y los triggers success, error, yes, no, enter y exit, junto con código React que puedes adaptar aquí.

Cómo agregar un personaje de Rive a un sitio de Framer

1. Instala el plugin. Abre en tu proyecto el plugin oficial de Rive desde el Framer Marketplace.
2. Agrega el archivo. Arrastra el .riv al canvas y selecciona su artboard y su máquina de estados.
3. Ajusta el tamaño de la capa. Dale a la capa una relación de aspecto fija que coincida con el artboard y prueba cada breakpoint.
4. Controla los inputs. Define el valor de mood o los triggers desde variantes para los estados de hover, presionado y sección.
5. Usa código para lógica personalizada. Para todo lo que el plugin no puede expresar, envuelve useRive en un componente de código con un property control de mood.

Preguntas frecuentes

¿El plugin de Rive para Framer es oficial?

Sí. El plugin de Rive del Framer Marketplace lo publica Rive. Agrega soporte de arrastrar y soltar para archivos .riv y expone los inputs de la máquina de estados del archivo para que puedas controlarlos desde Framer. Instálalo desde el Framer Marketplace y ábrelo dentro de tu proyecto para empezar a arrastrar archivos .riv.

¿Por qué mi WebM con fondo transparente se ve negro en Framer con Safari?

Safari reproduce WebM, pero ignora su canal alfa. Proporciona un .mov HEVC con alfa como primera fuente y el WebM como segunda, mediante un embed o un componente de código, o usa un archivo Rive, que se renderiza en un canvas transparente en todos los navegadores principales y suele pesar menos que cualquiera de los dos archivos de video.

¿Framer comprime los videos subidos?

No. El centro de ayuda de Framer dice que optimiza la carga del video, pero no optimiza ni comprime el contenido del video en sí. Codifica un MP4 o WebM liviano y listo para la web antes de subirlo, sobre todo para loops de fondo con reproducción automática, que se descargan en cada visita a la página.

Respuestas rápidas de esta guía

• ¿Framer es compatible con Rive y Lottie?

Fuentes

• Rive plugin, Framer Marketplace
• Add Lottie JSON and dotLottie files to Framer, LottieFiles
• How to add video, Framer Help
• Framer developer documentation, Framer
• React accessibility: reduced motion, Motion
• React runtime, Rive
• Video with alpha transparency on the web, Jake Archibald