Ir al contenido
charmotion
Animación de logo con fondo transparente

Tu logo, animado sobre fondo transparente.

Sube el símbolo de tu logo. Cada animación incluye canal alfa en dos formatos: WebM VP9 con alfa para Chrome, Firefox, Edge y OBS, y MOV HEVC con alfa para Safari, iOS, Final Cut Pro y Keynote. El archivo de Rive también es transparente. Se mueven los propios píxeles de tu logo, así que nada se redibuja ni cambia de estilo, y los logos 3D conservan cada brillo.

Web, OBS
WebM VP9 con alfa
Apps de Apple
MOV HEVC con alfa
También
.riv, más MP4 y GIF sobre fondo sólido
Plan
Starter, $20/mes
Sizzle, un personaje de demostración de Charmotion Archivo de Rive en vivo
En loop
Una vez

Este es el .riv real que entrega nuestro motor, reproduciéndose en tu navegador. Es la misma máquina de estados que controlas desde tu app con un input numérico y un trigger por cada reacción puntual.

Qué archivo va en cada lugar

AppArchivoNota
Chrome, Firefox, EdgeWebMSe reproduce con canal alfa en un elemento video
Safari, iOSMOV (HEVC con alfa)Ponlo primero en el elemento video
Final Cut Pro, KeynoteMOV (HEVC con alfa)macOS 10.15 o posterior
Premiere Pro, DaVinci ResolveProRes 4444, bajo pedidoAdobe no incluye WebM entre sus formatos de importación
OBSWebMMedia Source
PowerPoint, Google Slides, CanvaGIF o MP4Sin video con canal alfa documentado; usa un fondo que combine

Qué se mantiene exacto y qué no se incluye

Tu logo sigue siendo tu logo

El rig mueve tus propios píxeles o formas trazadas. Los colores, degradados, sombreados y proporciones se mantienen tal como los subiste. Los logos 3D y con degradados se animan en modo Motion (compresión, estiramiento, inclinación, saltos y una intro de inicio); las marcas planas y los logos con personaje también pueden tener expresiones y saludos con el brazo.

No incluido

  • GIF transparente: en un GIF, la transparencia se activa o se desactiva por píxel, así que los bordes suaves quedan con un halo dentado.
  • ProRes 4444 por defecto: está disponible bajo pedido para los editores de video que lo necesiten.
  • Animaciones letra por letra en logos de texto: un logo de texto se mueve como un todo, así que para tipografía cinética conviene más un motion designer.
Resultados reales

Archivos entregados, tal como los descargarías.

MP4 Cada set

1080 × 1080 a 60 cuadros por segundo. Aquí: el saludo de Gummo, de un set entregado.

WebM y MOV transparentes Cada set

Incluye canal alfa, por eso se ve el fondo de cuadros. El MOV es HEVC con alfa para apps y editores de Apple.

Kiko pensando, resultado en GIF

GIF Cada set

Vistas previas ligeras para documentación, correo y chat. El loop “thinking” de Kiko.

Video de inicio en 9:16 Cada set

1080 × 1920 para historias y splash screens. La intro de inicio de Sizzle.

kiko.riv · 150 KB

CharacterStateMachine
input numérico mood
0 a 9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
triggers: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, se reproduce una vez

Máquina de estados (state machine) de Rive Cada set

Un solo archivo pequeño en lugar de 17 videos. Es lo que hace funcionar la demo de la parte superior de esta página.

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

export function Kiko({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

Código listo para pegar Cada set

Componentes para web, React y SwiftUI con el nombre de tu personaje.

Formatos incluidos en cada plan
FormatoEspecificacionesStarter y Todo en uno
MP41080 × 1080, 60 fps, las 17 animacionesIncluido
Video de inicio en 9:16MP4 de 1080 × 1920Incluido
GIFVistas previas de 480 px, fondo sólidoIncluido
Rive (.riv)Vectorial; view model de Data Binding + inputs heredados: mood para los loops, triggers para las reacciones puntuales, máquina de estados launchIncluido
WebM con fondo transparenteVP9 con canal alfa, 1080 × 1080Incluido
MOV con fondo transparenteHEVC con canal alfaIncluido
CódigoComponentes web (HTML), React y SwiftUIIncluido
Descargar todo (.zip)Archivo Rive, código, README y pósters en un solo archivoIncluido
Exportación de videoMP4, GIF, WebM y MOV transparentes, 9:16: elige formatos y animaciones en la página del set, listos en alrededor de un minutoIncluido
Asistentes de IA (MCP)Claude, Cursor, VS Code y CodexIncluido
Planes

Empieza gratis. Mejora tu plan cuando necesites más.

El WebM y el MOV transparentes están en todos los planes de pago, desde Starter ($20/mes). El MP4 y el GIF tienen fondo sólido. Precios en USD; Creem calcula los impuestos al pagar.

Free

$0para siempre

Pruébalo con tu propio logo y personaje.

  • Ideas de animación de logo (3 conceptos)
  • Vista previa en pantallas de app
  • Sin tarjeta
  • 2 diseños con IA (logos o personajes)
  • Funciona desde Claude, Cursor, Codex
  • Soporte por email

Todo en uno

100 US$/mes

Para equipos y varias marcas.

  • 15 animaciones de logo al mes
  • 10 sets de personaje al mes
  • Video 3D cinematográfico incluido
  • 40 diseños con IA al mes
  • 3 ajustes por animación de logo
  • Generación y soporte prioritarios
Preguntas frecuentes

Antes de empezar.

Más en las preguntas frecuentes completas.

¿Qué formato transparente debo usar en Premiere, DaVinci, Canva u OBS?

OBS: el WebM en una Media Source. Premiere Pro y DaVinci Resolve: pide ProRes 4444, el formato con canal alfa más aceptado en los editores de video. Final Cut Pro y Keynote: el MOV HEVC. Canva no documenta la carga de videos con fondo transparente, así que prueba ahí el WebM o usa el MP4 sobre un fondo que combine.

¿Por qué el MOV transparente se reproduce con fondo negro?

La app está ignorando el canal alfa. Apple indica que un reproductor que no entiende HEVC con alfa muestra solo la capa base, que es el logo sobre negro. En ese caso, usa el WebM en esa app, asegúrate de que la opción Ignore Alpha Channel de Premiere esté desactivada o pídenos ProRes 4444.

¿Puedo obtener la animación del logo como GIF transparente?

No. En un GIF, la transparencia es todo o nada por píxel, así que los bordes suaves, las sombras y el sombreado 3D quedan con un halo irregular. El GIF de cada set tiene fondo sólido; para transparencia usa el WebM, el MOV o el .riv en un plan de pago.

¿El logo transparente se reproduce en PowerPoint y Keynote?

Keynote reproduce el MOV HEVC con alfa sobre cualquier fondo de diapositiva en macOS 10.15 o posterior. Microsoft no documenta video con canal alfa en PowerPoint, así que ahí usa el GIF o el MP4 en una diapositiva con un fondo que combine. Google Slides solo inserta video desde YouTube, una URL o Google Drive, así que un GIF es la opción segura.

¿Animar mi logo cambiará su aspecto?

No. Se mueven tus propios píxeles o formas trazadas; nada se regenera, se recolorea ni cambia de estilo. Si necesitas una versión para modo oscuro o con otros colores, súbela como un set aparte.

Más información

Guías para este trabajo.

Míralo primero con tu personaje.

Gratis, en tu navegador. Tu imagen se queda en tu dispositivo, a menos que pidas el clip animado corto.

Vista previa gratis