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
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.
Archivo de Rive en vivo
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.
| App | Archivo | Nota |
|---|---|---|
| Chrome, Firefox, Edge | WebM | Se reproduce con canal alfa en un elemento video |
| Safari, iOS | MOV (HEVC con alfa) | Ponlo primero en el elemento video |
| Final Cut Pro, Keynote | MOV (HEVC con alfa) | macOS 10.15 o posterior |
| Premiere Pro, DaVinci Resolve | ProRes 4444, bajo pedido | Adobe no incluye WebM entre sus formatos de importación |
| OBS | WebM | Media Source |
| PowerPoint, Google Slides, Canva | GIF o MP4 | Sin video con canal alfa documentado; usa un fondo que combine |
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
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.
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
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.
| Formato | Especificaciones | Ideal para | Starter y Todo en uno |
|---|---|---|---|
| MP4 | 1080 × 1080, 60 fps, las 17 animaciones | Apps, redes sociales, presentaciones, videos de producto | Incluido |
| Video de inicio en 9:16 | MP4 de 1080 × 1920 | Stories, Reels, splash screens | Incluido |
| GIF | Vistas previas de 480 px, fondo sólido | Documentación, correo, chat, README | Incluido |
| Rive (.riv) | Vectorial; view model de Data Binding + inputs heredados: mood para los loops, triggers para las reacciones puntuales, máquina de estados launch | Apps y sitios interactivos (web, iOS, Android, Flutter) | Incluido |
| WebM con fondo transparente | VP9 con canal alfa, 1080 × 1080 | Overlays web sobre cualquier fondo | Incluido |
| MOV con fondo transparente | HEVC con canal alfa | Final Cut, Keynote, iOS, Safari | Incluido |
| Código | Componentes web (HTML), React y SwiftUI | Pega y publica | Incluido |
| Descargar todo (.zip) | Archivo Rive, código, README y pósters en un solo archivo | Entrega a tu equipo | Incluido |
| Exportación de video | MP4, GIF, WebM y MOV transparentes, 9:16: elige formatos y animaciones en la página del set, listos en alrededor de un minuto | Solo los videos que necesitas | Incluido |
| Asistentes de IA (MCP) | Claude, Cursor, VS Code y Codex | Diseña, anima y obtén enlaces de descarga en el chat | Incluido |
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.
$0para siempre
Pruébalo con tu propio logo y personaje.
20 US$/mes
Para una app o un sitio web.
100 US$/mes
Para equipos y varias marcas.
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.
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.
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.
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.
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.
Gratis, en tu navegador. Tu imagen se queda en tu dispositivo, a menos que pidas el clip animado corto.
Otras formas de usar Charmotion