La animación de personajes para apps y sitios web, explicada.
Guías prácticas sobre máquinas de estados de Rive, mascotas animadas, animación de logos y video con fondo transparente, ilustradas con resultados reales de nuestro motor. ¿Tienes poco tiempo? Lee las respuestas rápidas o el glosario.
Convierte tu imagen en animación
Tienes un PNG, SVG, logo o mascota y quieres que se mueva: las opciones para hacerlo tú mismo en Rive y Lottie, qué esperar de las herramientas de imagen a animación y qué pedir cuando hagas un encargo.
-
De PNG a animación Rive: cómo convertir una imagen en un archivo .riv
Convierte un PNG en animación Rive: impórtalo, divídelo en partes, defórmalo con mallas y huesos, agrega una máquina de estados o pide que te armen el .riv. -
Cómo animar una mascota de marca sin After Effects
Cuatro formas de animar una mascota sin After Effects: Rive, Lottie Creator, CSS o SVG para movimientos simples, y generar un set de estados desde una imagen. -
De imagen a animación de personaje: qué funciona y qué esperar
Cómo funcionan las herramientas de imagen a animación: riggear tu arte exacto vs generar video, qué imágenes se animan bien y los formatos para apps y webs. -
De SVG a Rive: cómo importar un SVG y animarlo
Importa un SVG en Rive como vectores editables, ordena sus grupos, define pivotes, riggéalo, agrega una máquina de estados y evita los fallos de exportación. -
Servicio de animación de mascotas de marca: qué pedir y qué deberías recibir
¿Contratar un servicio de animación de mascotas o usar un generador? Los estados, formatos, derechos de archivo y revisiones que debe incluir tu brief. -
Las mejores herramientas para pasar de PNG a animación Rive en 2026
Todas las formas reales de convertir un PNG en animación Rive en 2026: el editor de Rive, su AI Agent, generadores, expertos e importar Lottie, con costos. -
Las mejores herramientas de IA para animar un personaje 2D o una mascota de marca (2026)
Herramientas de IA que animan un personaje 2D o una mascota estática en 2026, por tarea: marionetas en vivo, clips de video, bocetos, sets de estados y DIY. -
Servicios de animación de mascotas de marca con exportación a Rive: tus opciones
Dónde conseguir animación de mascota entregada como archivo Rive: Rive Experts en Contra, marketplaces freelance, estudios y servicios automáticos, y costos. -
Alternativas a contratar un motion designer para tu mascota de marca
Cinco alternativas a contratar un motion designer para tu mascota: plantillas, Rive o Lottie Creator, generadores, video con IA y freelancers, con costos. -
Cómo animar tu propio personaje con IA: elige el método según tu objetivo
Anima tu propio personaje con IA eligiendo el método adecuado: clips para redes, estados de app, lip-sync, sprites o rigs de VTuber, y la mejor imagen. -
Por qué la animación con IA cambia a tu personaje (y cómo evitarlo)
Por qué el video con IA redibuja tu personaje: cada fotograma se genera, así que la cara y la ropa cambian. Cómo reducirlo y métodos que conservan cada píxel. -
¿Puedes subir tu propio personaje a Animate Characters de Adobe Express?
Animate characters de Adobe Express solo anima los personajes de Adobe. Qué hace bien y cómo animar tu propio personaje con otras herramientas. -
IA para animación de personajes 2D: qué funciona para mascotas, personajes de marca y juegos
IA para animación de personajes 2D: herramientas con rig vs generativas, qué sirve para mascotas y personajes de marca, opciones gratis y qué usar en juegos. -
Cómo animar un dibujo con IA: garabatos infantiles vs arte de personaje limpio
Anima un dibujo con IA: qué herramienta sirve para un garabato infantil y cuál para arte limpio, cómo escanear y limpiar el dibujo y qué no puede hacer la IA. -
Alternativas a Meta Animated Drawings (¿y sigue teniendo mantenimiento?)
¿Animated Drawings de Meta sigue activo? El repo está archivado y la demo carga. Sus límites y alternativas para dibujos, juegos, mascotas y clips. -
Alternativas a Adobe Character Animator: cuándo un set de estados supera a una marioneta
Alternativas a Adobe Character Animator: Cartoon Animator, Live2D, Adobe Express y sets de estados desde una imagen, y en qué gana aún Character Animator. -
Cómo animar tu OC (personaje original): loops, reacciones, bailes y modelos de VTuber
Anima tu OC: qué loops y reacciones crear primero, dónde funcionan (Discord, stickers, perfiles), bailes y fight edits, y Live2D para VTubing. -
¿Cuánto cuesta animar una mascota de marca en 2026?
Cuánto cuesta animar una mascota en 2026, de un loop a un sistema Rive interactivo completo, con precios citados de Fiverr, Dribbble, Contra y estudios. -
Cómo contratar a un animador de Rive: plataformas, tarifas y evaluación
Dónde contratar un animador de Rive en 2026 (Contra, Upwork, Fiverr, Dribbble), cuánto cobra, qué debe incluir la entrega y cómo evaluar su nivel. -
Alternativas a Viggle para mascotas de marca (no memes de baile)
Viggle está hecho para memes de transferencia de movimiento. Para una mascota fiel a su diseño, en loop y con fondo transparente, estas alternativas sirven. -
Cómo hacer que un PNG se mueva: keyframes, PNGtubers, IA o un rig
Haz que un PNG se mueva con keyframes (CapCut, DaVinci, Premiere, After Effects), una app PNGtuber, IA de imagen a video o un loop riggeado en GIF o video.
Agrega animación a tu app o sitio web
Paso a paso: cómo integrar animación y un personaje animado en iOS, Android, Flutter, React Native, sitios web y herramientas no-code.
-
Cómo agregar animación a una app iOS (SwiftUI y UIKit)
Animación en una app iOS: withAnimation, PhaseAnimator y symbolEffect para la UI, Lottie y Rive vía Swift Package Manager para ilustraciones, y video en loop. -
Cómo agregar animación a una app de Android (Compose)
Animación en una app Android con Jetpack Compose: animate*AsState, AnimatedVisibility y transiciones infinitas, además de Lottie, Rive y video con Media3. -
Cómo agregar animación a una app de Flutter
Agrega animación a una app Flutter: widgets implícitos como AnimatedContainer, AnimationController, Hero, los paquetes lottie y rive, y video_player en loop. -
Cómo agregar animación a una app de React Native
Agrega animación a una app de React Native: Animated con useNativeDriver, Reanimated 4, lottie-react-native, el runtime Nitro de Rive y video en loop. -
Cómo agregar animación a un sitio web (HTML, CSS, JS)
Animación en cualquier web: keyframes CSS con movimiento reducido, Web Animations API, video mudo y transparente, dotLottie y máquinas de estados Rive. -
Cómo agregar animación a una app de React o Next.js
Agrega animación a React y Next.js: Motion (antes Framer Motion) desde motion/react, CSS, dotLottie React, personajes de Rive con useRive y client components. -
Cómo agregar animaciones de Rive, Lottie y video a Webflow
Agrega animación a Webflow: el elemento Rive nativo con máquinas de estados e Interactions, el elemento Lottie, video de fondo y código para estados de ánimo. -
Cómo agregar animaciones de Rive y Lottie a Framer
Agrega animación a Framer: el plugin oficial de Rive con inputs de máquina de estados, componentes Lottie y dotLottie, el componente Video y code components. -
Cómo agregar animaciones de Lottie, Rive y video a WordPress
Agrega animación a WordPress: el bloque Video con autoplay y loop, el plugin de LottieFiles, un plugin de Rive y bloques HTML para dotLottie y Rive. -
Cómo agregar animación a una tienda de Shopify
Animación en una tienda Shopify: secciones de video del tema, video de producto, Lottie o Rive en una sección Custom Liquid con file_url, y cuándo usar apps. -
Cómo agregar una animación de carga a una app o un sitio web
Elige spinner, skeleton, barra de progreso, loader con logo o personaje de marca, y constrúyelo con CSS, Rive o vistas nativas de forma accesible. -
Cómo agregar un logo animado al header de tu página web
Un logo animado en el header de tu web que se reproduce una vez y queda en reposo: formato, código de video y Rive, movimiento reducido y layout shift. -
Cómo agregar una mascota de marca al onboarding y a los estados vacíos
Asigna a cada paso del onboarding y estado vacío un ánimo o reacción de la mascota, y conéctalo desde SwiftUI, Compose, React o Flutter sin bloquear. -
Cómo poner una animación transparente sobre el contenido
Superpón un personaje o efecto transparente sobre una página, video o pantalla de app: formato, overlay en CSS y nativo, clics que atraviesan y rendimiento. -
¿Se puede animar el ícono de una app? Lo que de verdad permiten iOS y Android
Ninguna API pública anima el ícono de inicio en iPhone o Android. Por qué, cómo lo hacen Reloj y Calendario, y dónde sí puede moverse el ícono de tu app. -
Ícono animado del splash screen en Android: especificaciones, XML y transición
Ícono animado del splash en Android 12+: lienzo AVD de 432 dp, guía de 1000 ms, duración en API 32 vs 33, icon_preferred, salida animada y paso a la intro. -
Splash screen animado en Expo y React Native
Deja estático el splash de Expo, retenlo con preventAutoHideAsync, ocúltalo cuando tu intro de Rive o video esté lista e iguala colores para evitar destellos. -
Splash screen animado en Flutter (y FlutterFlow)
flutter_native_splash es estático. Reproduce una intro Rive o video en tu primera ruta, iguala el fondo, quita el splash nativo a tiempo y reduce movimiento. -
Convierte el ícono de tu app en una intro de inicio
Anima el ícono de tu app en una intro corta que parte de la launch screen estática, termina en el ícono en reposo y funciona con íconos 3D y con degradados. -
Prompts de IA para agregar una mascota animada en el splash o la pantalla de carga
Prompts para copiar y pegar en Cursor, Claude Code, Lovable, Bolt y v0 que agregan un splash o una mascota de carga animada desde un .riv o video alfa. -
Íconos alternativos de app en iOS, Android, Expo y Flutter
Cómo cambian de ícono las apps: setAlternateIconName en iOS, activity-alias en Android, plugins de Expo y Flutter. Los íconos cambian fijos, nunca animados. -
Cómo agregar una animación de Rive a Wix Studio
Agrega Rive a Wix Studio con su elemento Rive nativo: elige artboard y máquina de estados, cuándo necesitas un embed HTML y Velo, y el Editor clásico. -
Cómo agregar una mascota de marca animada a Squarespace
Squarespace no tiene bloque de Rive ni Lottie. Usa una mascota Rive en un Code Block desde el plan Core, aloja el .riv con CORS o usa un MP4 o GIF en loop. -
Cómo agregar animación a un sitio de Carrd
Agrega animación a Carrd: GIF en elementos Image, MP4 desde Pro Lite y una mascota Rive en un elemento Embed con Pro Standard mediante un CDN con CORS. -
Rive en el App Router de Next.js: Client Components, SSR y WASM
Usa Rive en el App Router de Next.js: Client vs Server Components, window is not defined, ssr: false, estado de ánimo desde el servidor y rive.wasm propio. -
Agrega una mascota Rive a una app de Lovable
Agrega una mascota Rive a una app de Lovable: instala el runtime de Rive para React, pon el .riv en public/ vía GitHub o una URL y conecta estados a eventos. -
Cómo agregar una mascota de Rive en Bolt.new, v0 y Replit
Agrega una mascota Rive en Bolt.new, v0 y Replit: instala el runtime de Rive para React, añade el .riv como archivo estático y las reglas de Next.js para v0. -
Cómo agregar una animación de Rive a Bubble sin el plugin antiguo
Un personaje Rive en una app de Bubble con el elemento HTML: aloja el .riv en Bubble, controla estados de ánimo con workflows y Toolbox, y hazlo responsive. -
Íconos, portadas y mascotas animadas para páginas de Notion
Una mascota en movimiento en Notion: tamaños de ícono y portada GIF según su ayuda, límite de 5 MB, modo claro y oscuro, embeds de Rive y código de Super.so. -
Rive en una extensión de Chrome (Manifest V3): incluye el WASM en el paquete
Arregla Rive en una extensión de Chrome con Manifest V3: incluye rive.wasm, llama a setWasmUrl con chrome.runtime.getURL, permite wasm-unsafe-eval y el .riv. -
Mascota para Telegram Mini App: pantalla de carga, temas y respuesta háptica
Anima una mascota en una Telegram Mini App: placeholder SVG estático de carga, paso a una intro de Rive con ready(), colores del tema y reacciones hápticas.
iOS y Swift
Animación de personajes en SwiftUI y UIKit a fondo: Data Binding de Rive, Lottie, PhaseAnimator, pantallas de inicio, Live Activities, widgets, watchOS, visionOS y App Previews.
-
Data Binding de Rive en SwiftUI (nuevo runtime de Apple)
Data Binding de Rive en SwiftUI (nuevo runtime de Apple): Worker, File, instancias de view model, NumberProperty, triggers, streams y RiveUIViewRepresentable. -
Rive en UIKit: RiveUIView y RiveView (legacy)
Rive en un view controller de UIKit: RiveUIView en el nuevo runtime, RiveViewModel.createRiveView() en el heredado, estados de ánimo, pausa y frame rate. -
Mascota animada de onboarding en SwiftUI
Onboarding paginado en SwiftUI con una mascota animada: TabView en estilo página, una vista Rive persistente, un ánimo por página y Reducir movimiento. -
PhaseAnimator vs KeyframeAnimator en SwiftUI
PhaseAnimator vs KeyframeAnimator en SwiftUI: qué hace cada uno, firmas, loop o trigger, versiones del sistema y cuándo conviene más un personaje de Rive. -
Lottie en SwiftUI: LottieView, reproducción y loop
Usa Lottie en SwiftUI: instala lottie-spm, muestra un LottieView, en loop o una vez, segmentos por marcadores, el evento de fin y cuándo conviene más Rive. -
Splash screen animado en SwiftUI (patrón de código)
Splash animado en SwiftUI: por qué la launch screen es estática, transición fluida a la intro, intro de Rive de una vez y Reducir movimiento. -
Límites de animación en Live Activities, Dynamic Island y widgets
Qué animación permiten las Live Activities, la Dynamic Island y los widgets: tope de 2 segundos, sin loops continuos, límite de 4 KB, Always-On y poses. -
Animación de personajes en watchOS y visionOS
¿Rive o Lottie funcionan en watchOS o visionOS? Soporte según cada Package.swift, alternativas para Apple Watch, secuencias de frames y ventanas visionOS. -
Reducir movimiento en SwiftUI y UIKit
Lee Reducir movimiento en SwiftUI y UIKit, reacciona a cambios en vivo y pausa o reemplaza animaciones de Rive, Lottie y SwiftUI con poses fijas y fundidos. -
App Preview de App Store: requisitos (2026)
Requisitos de App Preview: 15 a 30 s, 500 MB, resoluciones por dispositivo, códecs, 30 fps, audio, la directriz 2.3.4 y un comando ffmpeg para cumplirlos.
Avatares para asistentes de IA
Avatares animados para chatbots y agentes de voz: estados listening, thinking y talking, habla sincronizada con el audio y cómo conectarlos a tu stack de IA.
-
Anima un avatar de chat con eventos de streaming
Avatar de chat Rive según el status de useChat (Vercel AI SDK): thinking al enviar, talking en streaming, success al final, error y stop, sin parpadeos. -
Avatar de agente de voz: mapeo de eventos de OpenAI Realtime
Asigna eventos de OpenAI Realtime API a estados del avatar: speech_started, speech_stopped, output_audio.delta y output_audio_buffer con WebRTC vs WebSocket. -
Lip-sync vs amplitud para un avatar que habla
Anima un avatar que habla según el nivel de audio con RMS de AnalyserNode (Web Audio) e histéresis, o usa visemas de Azure y speech marks de Polly. -
Avatar de agente de ElevenLabs con onModeChange
Anima el avatar de un agente de voz de ElevenLabs en React: speaking/listening de onModeChange y la conexión a estados Rive, datos de audio y menos rerenders. -
AI Elements Persona vs un personaje de Rive a medida
Qué hace Persona de AI Elements de Vercel: cinco estados, seis variantes, Rive con WebGL2. Cuándo conviene una mascota Rive propia y cómo mapear sus estados. -
Animación de avatar de IA accesible y rápida en la web
Avatar de IA accesible y liviano: WCAG 2.2.2, prefers-reduced-motion, pausar Rive fuera de pantalla, un solo contexto WebGL y qué oyen los lectores.
Stickers y emoji
Especificaciones exactas y pasos para crear stickers y emoji animados en Telegram, WhatsApp, iMessage, Discord y Slack a partir de tu propio personaje.
-
Una mascota de marca para todas las plataformas de stickers
Requisitos de stickers de Telegram, WhatsApp, iMessage, Discord y Slack en una tabla, más tamaño maestro, duración del loop y ánimos para un pack coherente. -
Convierte WebM con fondo transparente a cualquier formato de sticker
Comandos ffmpeg probados para pasar un WebM VP9 transparente a WEBM de Telegram, WebP animado de WhatsApp, GIF transparente y APNG sin perder el canal alfa. -
Stickers de video para Telegram a partir de una animación de personaje
Stickers de video para Telegram desde una animación de personaje: requisitos de WEBM VP9 (512 px, 3 s, 30 fps, 256 KB), un comando ffmpeg probado y la subida. -
Stickers animados de WhatsApp: especificaciones y conversión
Requisitos de stickers animados de WhatsApp según el repo oficial: WebP de 512×512, máx. 500 KB, frames de 8 ms, 10 s, 3 a 30 por pack, ícono 96×96 y ffmpeg. -
Paquete de stickers animados para iMessage: tamaños y APNG
Tamaños de stickers de iMessage según las HIG de Apple: 300, 408 y 618 px a @3x, un tamaño por pack, 500 KB por archivo y por qué APNG supera a GIF. -
Especificaciones de emoji y stickers animados de Discord
Límites de Discord según su API: emoji hasta 256 KiB, stickers de 320×320 en PNG, APNG, GIF o Lottie hasta 512 KiB y 5 s, con comandos GIF y APNG probados. -
Emoji personalizados animados de Slack con tu mascota de marca
Reglas de emoji personalizados de Slack: JPG, PNG o GIF, cuadrados, menos de 128 KB, GIF de hasta 50 frames, y un comando ffmpeg para emoji GIF transparentes. -
Emotes animados de Twitch a partir de la animación de una mascota de marca
Crea emotes animados de Twitch con una mascota: requisitos de GIF (28, 56, 112 px, 1 MB, 60 frames), qué reacciones se leen a 28 px y un comando para el GIF. -
Agrega una mascota de marca animada como overlay en OBS
Pon una mascota animada transparente en tu stream con OBS: Media Source vs Browser Source, reacciones WebM como alertas, estados para follows, subs y BRB.
Más frameworks y herramientas no-code
Rive y Lottie en Vue, Nuxt, Svelte, Angular, Astro y Expo, además de FlutterFlow, Bubble y Wix Studio.
-
Rive en Vue 3 y Nuxt: configuración, Data Binding y SSR
Rive en Vue 3 y Nuxt con el runtime web oficial: móntalo en onMounted, define un ánimo con Data Binding, dispara triggers, limpia y evita errores de SSR. -
Rive en Svelte y SvelteKit (guía de Svelte 5)
Rive en Svelte 5 y SvelteKit con el runtime web oficial: móntalo en onMount, vincula una prop mood con $effect, dispara triggers y limpia sin errores SSR. -
Rive en Angular: wrapper de la comunidad vs canvas directo
Rive en Angular: por qué ng-rive está desactualizado, qué ofrece el wrapper Grandgular y cómo controlar el runtime web con signals y limpieza segura en SSR. -
Rive en Astro: islas, client:visible y WASM con carga diferida
Agrega Rive a Astro con un script o una isla de framework, hidrátalo con client:visible, saca rive.wasm de la ruta crítica y respeta el movimiento reducido. -
Rive en Expo: requiere un development build (no Expo Go)
Rive en Expo necesita un development build, no Expo Go. Configura expo-dev-client y @rive-app/react-native en SDK 53+, arregla Android e incluye el .riv. -
Rive y Lottie en FlutterFlow: widgets y límites
Rive y Lottie en FlutterFlow: qué hace el widget RiveAnimation, por qué los estados de ánimo requieren un widget personalizado y cuándo basta con Lottie. -
Rive y Lottie en Bubble, Wix Studio y Webflow
Agrega Rive y Lottie a Bubble, Wix Studio y Webflow: elementos nativos, embeds HTML para inputs desde la página, el antiguo plugin de Bubble y video. -
Rive en Compose Multiplatform e Ionic/Capacitor
Usa Rive en Compose Multiplatform con el wrapper experimental RiveCMP, y en Ionic o Capacitor con el runtime web y un rive.wasm incluido en el paquete.
Comparaciones
Rive, Lottie, dotLottie, GIF, SVG, CSS, Motion y Spline lado a lado: en qué destaca cada uno, con fuentes, para que elijas el adecuado.
-
Rive vs Lottie: rendimiento y peso del runtime
Rendimiento de Rive vs Lottie con fuentes: el único benchmark independiente, datos de fabricantes, pesos de runtime medidos, trampas en iOS y cómo probar. -
Alternativas a Lottie en 2026: 7 opciones comparadas
Alternativas a Lottie comparadas: Rive, dotLottie, CSS y Web Animations API, video transparente, SVG animado, GIF y Spline, y en qué destaca cada una. -
Alternativas a Rive: Lottie, Spline, Motion y más
Alternativas a Rive: Lottie con máquinas de estados dotLottie, Spline para 3D, Motion para UI en código, motores de juego y video simple, con planes fechados. -
Convierte Lottie a Rive (y Rive a Lottie o video)
Cómo convertir Lottie a Rive, qué conserva y qué pierde la importación, qué plan la incluye y cómo pasar de Rive a Lottie, MP4, GIF o WebM. -
dotLottie vs Lottie JSON: qué aporta .lottie
dotLottie vs Lottie JSON: qué contiene un archivo .lottie, si de verdad pesa menos, varias animaciones, temas, máquinas de estados y soporte en reproductores. -
Lottie vs Rive: máquinas de estados y Data Binding
Máquinas de estados de Lottie vs Rive: inputs, guards y actions de dotLottie frente a blend states y Data Binding de Rive, y el paso a view models. -
Lottie vs GIF: peso, calidad y dónde funciona cada uno
Lottie vs GIF: peso, transparencia, escalado, uso de CPU y por qué GIF sigue ganando en email y apps de chat donde un reproductor Lottie no puede ejecutarse. -
Lottie vs SVG y animación CSS: cuándo gana cada uno
Lottie vs CSS y SVG animado: costo en runtime, creación, complejidad y movimiento reducido, con una regla clara de cuándo gana cada uno en un sitio real. -
Rive vs Motion (Framer Motion): funciones distintas
Rive vs Motion (antes Framer Motion): qué anima cada uno, peso en el bundle, plataformas y cómo usarlos juntos, Motion para layout y Rive para una mascota. -
Rive vs Spline: 2D interactivo vs escenas 3D
Rive vs Spline: máquinas de estados 2D frente a escenas 3D en tiempo real, exportación verificada, peso en móvil, interactividad y cuándo es mejor el video. -
Lottie vs Rive en React Native y Flutter (2026)
Lottie vs Rive para React Native y Flutter en 2026: paquetes actuales, requisitos de New Architecture y Nitro, quién mantiene cada uno y cuál elegir. -
Editor de Rive vs Lottie Creator vs After Effects: costo
Cuánto cuestan el editor de Rive, Lottie Creator y After Effects con Bodymovin en octubre de 2026, qué exportan los planes gratis y el costo real. -
Lottie vs Rive vs video para animar un splash screen
Qué formato sirve para una intro de inicio: ¿Lottie, Rive, video transparente o un AnimatedVectorDrawable de Android? Una comparación con pros y contras. -
Benchmark de peso de archivos de animación: Rive vs GIF vs WebM vs MOV vs MP4 (datos reales)
Pesos reales de las mismas 17 animaciones en Rive, GIF, MP4, WebM transparente y MOV HEVC, para una mascota plana y un logo 3D, runtime incluido.
Mascotas de marca por industria
Qué debe hacer una mascota de marca animada en apps de fintech, aprendizaje infantil, salud, seguridad y fitness: estados, tono y errores comunes.
-
Tono de la mascota de marca por sector: matriz de estados
Qué tan juguetona debe ser una mascota en apps de fintech, niños, educación, salud, seguridad y fitness, qué estados evitar y cómo fijar reglas de movimiento. -
¿Tu app debería tener mascota? Evidencia y pruebas
Qué dice la investigación sobre personajes de marca, dónde la evidencia es débil, qué apps se benefician, en qué falló Clippy y cómo hacer un test A/B barato. -
Mascotas de marca para apps de fintech y cripto: estados que priorizan la confianza
Dónde encaja una mascota en una app bancaria, fintech o cripto, de qué momentos con dinero alejarla y un mapa de estados para transferencias, fallos y fraude. -
Mascotas de marca para apps infantiles y educativas: lecciones de Duolingo
Estados de mascota para apps educativas e infantiles: reacciones en lecciones, rachas sin culpa, COPPA 2025 y el UK Children's Code, y límites de movimiento. -
Avatares de chatbot de salud: empatía sin exceso de ternura
Cómo animar el avatar de una app de salud o de síntomas: estados calmados de escucha, reflexión y habla, cuándo dejar de animar y avisos legales neutrales. -
Mascotas para apps de VPN y seguridad: protegido vs expuesto
Cómo animar la mascota de una app de VPN, contraseñas o seguridad: estados conectado y desconectado, alertas sin alarmismo y movimiento junto a texto. -
Mascotas entrenadoras para fitness: rachas, celebraciones y hápticos
Cómo debe una mascota de fitness o hábitos celebrar entrenamientos y rachas, reaccionar a días perdidos y descansos, sincronizarse con hápticos y no exagerar. -
Mascotas virtuales para apps de hábitos: rachas sin culpa
Cómo debe reaccionar la mascota de una app de hábitos, foco o estudio a registros, rachas y días perdidos, qué cabe en widgets y avisos, y qué no puede hacer. -
Mascotas para apps de salud mental: estados tranquilos y reglas para crisis
Qué estados tranquilos necesita la mascota de una app de salud mental o autocuidado, qué ánimos evitar ante emociones, qué ritmo usar y pantallas de crisis. -
¿Tu producto de IA debería tener una mascota? Personaje vs orbe
Mascota u orbe abstracto para un producto de IA: el cutewashing, estudios sobre confianza, estados de un agente trabajando y por qué evitar lip-sync. -
Mascotas para SaaS B2B: onboarding, estados vacíos y 404
Dónde encaja la mascota de un SaaS B2B, cuándo retirarla para usuarios avanzados, estados vacíos y 404, modo oscuro y un presupuesto de rendimiento. -
Animación de mascota para el checkout: pagos, pedidos y correos
Estados de mascota para checkout, carga del pago, pedido confirmado y pago fallido, tono tranquilo con el dinero, seguimiento, GIF en correos y velocidad. -
Mascotas para apps de delivery de comida: del estado del pedido al estado de ánimo
Asigna cada estado de un pedido de delivery a un ánimo de la mascota: Live Activities, Android Live Updates y push, tono ante retrasos y límites de un set. -
Logos animados para pantallas de cafeterías, gimnasios y tiendas
Qué archivo de logo animado funciona en señalización digital, menús y TVs, vertical vs horizontal, duración del loop y reutilizar el clip en Instagram Reels. -
Cómo animar la mascota de una escuela u ONG: derechos, escudos y pantallas
Cómo pueden animar su mascota escuelas, universidades, bibliotecas y ONG: propiedad, permisos, escudos detallados, marcadores, pantallas de vestíbulo y GIF. -
GIF de mascota para el README de proyectos open source: peso, modo oscuro y licencias
Agrega un GIF de mascota al README de GitHub: límites de peso, versiones clara y oscura con picture, autoplay, Rive en sitios de docs y licencia.
Formatos de marketing
Tu personaje en GIF de lanzamiento, firmas de correo, intros de video y fichas de tienda, con las especificaciones que exige cada canal.
-
Especificaciones de GIF y galería para lanzar en Product Hunt
Requisitos de miniatura y galería en Product Hunt: miniatura de 240×240, GIF de menos de 3 MB que se animan con hover, galería 1270×760 y videos de YouTube. -
Logo animado en firmas de email: compatibilidad con GIF
Qué clientes de email reproducen una firma con GIF animado, por qué algunas versiones de Outlook no, cómo diseñar un primer frame seguro y aligerar el GIF. -
Intro de YouTube y logo animado: buenas prácticas
Cuánto debe durar una intro de YouTube, qué aconseja YouTube para los primeros segundos y los requisitos de marca de agua, foto de perfil y banner del canal. -
Especificaciones de video, logo y banner de LinkedIn para animación
Requisitos de video de LinkedIn (tamaño, duración, relación de aspecto, fps), logo y portada de la página de empresa, y cómo publicar un logo animado en MP4. -
Especificaciones del gráfico destacado y el video promocional de Google Play
Requisitos de Google Play: gráfico destacado de 1024×500, video de YouTube, tamaños y límites de capturas e ícono de 512×512, con consejos para mascotas. -
Especificaciones de video 9:16: Reels, TikTok, YouTube Shorts
Requisitos de video 9:16 para anuncios en Instagram Reels, TikTok in-feed y YouTube Shorts: resolución, duración, peso, zonas seguras y dónde va la mascota. -
Dónde usar un ícono de app animado: sitio web, kit de prensa y video de lanzamiento
Tu ícono no se mueve en la pantalla de inicio, pero sí en tu landing page, kit de prensa, Product Hunt y video de lanzamiento. Formatos y requisitos.
Rive y máquinas de estados
Qué es Rive, cómo las máquinas de estados cambian entre animaciones y cómo controlarlas desde React, SwiftUI y Flutter.
-
¿Qué es Rive? La animación interactiva explicada
Rive es un editor de animación interactiva con runtimes de código abierto. Qué es un archivo .riv, en qué plataformas funciona, cuánto cuesta y cuánto pesa. -
Rive vs Lottie: cuál usar en 2026
Rive vs Lottie, comparación honesta: cómo se crea cada uno, máquinas de estados e interactividad, peso de archivo, runtimes y cuándo elegir uno u otro. -
Máquina de estados de Rive: inputs y triggers
Cómo una máquina de estados de Rive cambia de animación: inputs numéricos, booleanos y triggers, loops vs reacciones puntuales, Data Binding y código de ejemplo. -
Cómo usar Rive en React y Next.js
Rive en React y Next.js: elige un paquete, renderiza con useRive, cambia estados con inputs o Data Binding, arregla window is not defined, reduce movimiento. -
Cómo usar Rive en SwiftUI (iOS)
Usa Rive en SwiftUI: instala RiveRuntime, runtime de Apple nuevo vs heredado, muestra un .riv, inputs y triggers, Data Binding y respeta Reducir movimiento. -
Rive en Android, Flutter y React Native
Agrega Rive a Android, Flutter y React Native: paquetes actuales, cómo instalarlos, asignar un número o disparar un trigger y qué cambió con Data Binding. -
Mascota animada para formularios de inicio de sesión: cómo funcionan los logins estilo Teddy
Cómo funcionan en Rive las mascotas de login estilo osito, qué eventos del formulario van a qué estados, código React para foco, escritura y envío, y límites. -
Convertir un GIF, video o PNG a Rive o Lottie: qué es posible
No hay conversor real de GIF, MP4 o PNG a Rive o Lottie. Opciones reales: secuencias de imágenes, frames incrustados, re-riggear, Lottie con IA y .riv a MP4. -
Mascota de Rive en la UI de Unity: instalación, uGUI y Data Binding
Un personaje Rive en la UI de Unity con el runtime oficial: instalación, Rive Panel y Widget en uGUI, estados de ánimo ligados al juego en C# y rendimiento. -
Animación de mascota en prototipos de Figma y handoff a desarrollo
Los archivos Rive no se reproducen en prototipos de Figma. Usa GIF o video por estado, cámbialos con variantes y entrega el .riv con un contrato de estados.
Mascotas en tu producto
Dónde es útil una mascota animada: carga, estados vacíos, éxito, errores, onboarding y asistentes de IA.
-
Cómo crear una mascota de marca animada para tu app
Diseña una mascota fácil de animar, elige los estados que necesita tu app y decide entre un animador, Rive, Lottie o un servicio automático. Guía práctica. -
Estados de animación de mascota de marca: Loading, Success, Error
Qué estados de mascota necesita una app (carga, vacío, éxito, error, saludo, notificación), loops vs reacciones puntuales, tiempos y cómo ligarlos a eventos. -
Anima un asistente de IA: listening y talking
Dale a tu chatbot o asistente de voz con IA un avatar animado: estados idle, listening, thinking y talking ligados al chat, latencia y movimiento reducido. -
Guía de animaciones de inicio y splash screen para apps
Por qué la launch screen de iOS es estática, cómo anima la SplashScreen API de Android 12, cuánto debe durar una animación de inicio y el paso a la intro. -
IA para animar mascotas: comparativa 2026
Masko, MascotVibe, Mascofast, Mascowiz y Charmotion comparados: subir vs generar, redibujar vs riggear, clips vs sets de estados, formatos y precios. -
Animación de mascota estilo Duolingo: estados, reacciones y esfuerzo
Cómo funciona la animación de mascota estilo Duolingo: su uso de Rive, los estados de una mascota educativa, reacciones a aciertos y errores, y sus límites.
Animación de logo
Cómo dar movimiento a un logo existente (incluso uno generado con IA) para tu sitio, tu app y tus videos.
-
Cómo animar un logo a partir de un PNG o una imagen hecha con IA
Anima un logo en PNG, JPG o generado con IA: vectorízalo o conserva los píxeles, quita el fondo, riggéalo con huesos y exporta formatos para web y video. -
¿Puede la IA animar mi logo sin cambiarlo?
Por qué Veo, Kling, Runway y otras IA de video deforman logos y letras, qué pueden hacer ChatGPT, Gemini y Claude, y cómo animar tu logo exacto. -
Logo animado con fondo transparente: formatos, editores, presentaciones y OBS
Qué formatos mantienen transparente un logo animado (MOV HEVC, ProRes 4444, WebM VP9, GIF), los límites de Canva y su uso en Final Cut, Premiere y OBS. -
Cómo agregar un logo animado a un video (logo en la esquina o marca de agua)
Agrega un logo animado en la esquina o marca de agua en Final Cut Pro, Premiere Pro, DaVinci Resolve, iMovie y CapCut: formato, tamaño, opacidad y loop. -
Cómo convertir un logo en un GIF animado
Convierte un logo PNG en GIF animado: anímalo primero, conviértelo con una buena paleta y ajústalo para email, Slack, Discord y la web, o usa WebM. -
Ícono animado de servidor en Discord: requisitos, tamaño y consejos para GIF
Los íconos animados de servidor en Discord requieren Server Boost nivel 1 y un GIF. Qué documenta Discord sobre tamaño y cómo proteger el logo en el recorte. -
Cómo animar un logo: Canva, Adobe Express, After Effects, video con IA y rigging comparados
Canva, Adobe Express, Renderforest, Jitter, LottieFiles, After Effects, Kling, Runway y Charmotion comparados: fidelidad al logo, transparencia y precio. -
¿Cuánto cuesta animar un logo en 2026?
Precios de animación de logos en 2026 según fuentes publicadas: plantillas, IA, Fiverr, Upwork, motion designers freelance y agencias, y qué archivos pedir. -
Logo reveal vs sting vs bumper vs loop: para qué sirve cada uno
Qué son un logo reveal, sting, bumper, intro, outro e idle loop, cuánto debe durar cada uno, si debe repetirse y cuándo una animación de logo necesita sonido. -
Logo animado en Keynote, PowerPoint y Google Slides
Cómo poner un logo animado en Keynote, PowerPoint y Google Slides: qué formatos de video y GIF funcionan, dónde sirve la transparencia y la opción segura.
Formatos y video con fondo transparente
WebM, MOV con canal alfa, MP4, GIF y Rive: qué archivo usar en cada lugar y el marcado que funciona en todas partes.
-
Video con fondo transparente en sitios web (incluido Safari)
Cómo poner un video transparente en tu web que funcione en Chrome, Firefox, Edge y Safari: WebM VP9 y MOV HEVC con alfa, marcado, codificación y autoplay. -
GIF vs WebM vs MP4 vs Lottie vs Rive
Compara GIF, WebM, MP4, Lottie y Rive por transparencia, interactividad, peso y compatibilidad, y elige el formato para web, apps y email. -
De PNG a GIF animado con fondo transparente: halos, bordes y mejores formatos
¿Un GIF puede ser transparente? Solo con 1 bit. Por qué salen halos, comandos ffmpeg de PNG y WebM a GIF transparente y cuándo conviene WebP, APNG o WebM. -
MP4 transparente y HEVC con alfa: lo que realmente funciona
¿Un MP4 puede ser transparente? Por qué H.264 no, por qué After Effects dice que no, HEVC con alfa sin Mac, MOV a WebM con ffmpeg y colores lavados en iPhone.
UX y accesibilidad en animación
Tiempos, movimiento reducido y las reglas de WCAG que hacen que la animación ayude en lugar de distraer.
-
Animación accesible: movimiento reducido y WCAG
Cómo respetar prefers-reduced-motion en CSS, JavaScript, Rive y SwiftUI, y qué exige WCAG 2.2 para animaciones en loop, interactivas y con destellos. -
Duración de animaciones y UX de carga: pautas
Cuánto deben durar las animaciones de interfaz, qué significan los límites de 0.1 s, 1 s y 10 s, y cuándo usar spinner, barra de progreso o animación.