Respuestas breves a preguntas frecuentes sobre animación.
Cada respuesta es la versión corta; sigue el enlace para ver la guía completa con ejemplos y fuentes.
Convierte tu imagen en animación
¿Cómo puedo animar la mascota que ya tengo para mi app?
Riggea tu arte actual y anima los estados que usa tu app (idle, loading, success, error, estado vacío), y luego publícalos como un archivo de Rive en el que tu código cambia de un estado a otro. Hazlo tú mismo en el editor de Rive o sube la mascota a un generador como Charmotion, que entrega 17 animaciones en Rive, video, GIF y código.
Lee la guía: Cómo animar una mascota de marca sin After EffectsAnimador de mascotas con IA
¿Cuáles son las mejores herramientas para pasar de PNG a animación Rive?
Las opciones principales son el editor de Rive (importas el PNG, agregas mallas y huesos y armas tú la máquina de estados), el AI Agent integrado en el editor de Rive en los planes de pago, un generador como Charmotion que entrega un .riv con 17 animaciones a partir de una imagen, y Rive Experts contratados a través de Contra para trabajos a medida.
Lee la guía: Las mejores herramientas para pasar de PNG a animación Rive en 2026PNG a Rive
¿Existe alguna herramienta que convierta un personaje estático en animaciones?
Sí. Adobe Character Animator, Live2D y Spine animan arte con capas o piezas separadas; Animated Drawings de Meta anima dibujos de figuras humanas; generadores como Charmotion convierten una imagen de un personaje en 17 animaciones listas para apps; y los modelos de IA de imagen a video generan clips cortos. Las herramientas basadas en rigs conservan tu arte exacto, mientras que el video generado lo vuelve a dibujar.
Lee la guía: Las mejores herramientas de IA para animar un personaje 2D o una mascota de marca (2026)De imagen a animación de personaje
¿Cuáles son los mejores servicios de animación de mascotas de marca con exportación a Rive?
Los Rive Experts (freelancers y estudios verificados por el equipo de Rive y contratados a través de Contra) son ideales para trabajos a medida. Los servicios automatizados como Charmotion generan un .riv con una máquina de estados documentada y un view model con Data Binding a partir de una imagen, desde $20 al mes. Pide siempre estados con nombre y código de integración.
Lee la guía: Servicios de animación de mascotas de marca con exportación a Rive: tus opcionesServicio de animación en Rive
¿Cómo agrego una mascota animada en SwiftUI?
Agrega el paquete Swift de Rive, coloca el .riv de la mascota en tu bundle y muéstralo con RiveViewModel(fileName:stateMachineName:).view(). Asigna un input numérico como mood para cambiar de loop y dispara triggers para las reacciones puntuales, o usa el runtime de Apple de Rive con Data Binding. Los sets de Charmotion incluyen archivos SwiftUI listos para ambos runtimes.
Lee la guía: Mascota animada de onboarding en SwiftUIPara apps de iOS
¿Puede la IA animar mi logo sin cambiar su diseño?
Sí, si la herramienta riggea tu logo en lugar de regenerarlo. Las herramientas basadas en rigs mueven tus propios píxeles o formas vectorizadas, así que el diseño se mantiene idéntico; los modelos de video generativo redibujan cada fotograma y pueden alterar detalles. Charmotion usa la IA solo para identificar las partes del logo y luego anima tu arte exacto.
Lee la guía: Cómo animar un logo a partir de un PNG o una imagen hecha con IACreador de logos animados
¿Qué alternativas hay a contratar un motion designer para una mascota?
Usa plantillas prediseñadas si la mascota no tiene que ser tu propio personaje, anímala tú mismo en Rive o Lottie Creator, genera estados listos para tu app a partir de la imagen de tu mascota con una herramienta como Charmotion, usa IA de imagen a video para clips sueltos o contrata a un freelancer para un alcance pequeño y cerrado.
Lee la guía: Alternativas a contratar un motion designer para tu mascota de marcaAnimador de mascotas con IA
¿Cómo convierto un PNG en una animación de Rive?
Importa el PNG en el editor de Rive, agrega una malla para que los píxeles puedan deformarse, vincúlala a huesos, crea los keyframes de cada animación y conéctalas en una máquina de estados (state machine); luego exporta el .riv. Separar primero el personaje en imágenes por partes da un movimiento mucho más natural que deformar una sola imagen plana.
Lee la guía: De PNG a animación Rive: cómo convertir una imagen en un archivo .rivMíralo en tu app
¿Cómo puedo animar una mascota sin After Effects?
Usa el editor de Rive para personajes interactivos en apps, Lottie Creator de LottieFiles (en el navegador) para loops diseñados, CSS o SVG para un balanceo o un parpadeo sencillo, o un generador que crea un set completo de estados a partir de una imagen de tu mascota. Ninguno requiere After Effects.
Lee la guía: Cómo animar una mascota de marca sin After EffectsMíralo en tu app
¿Puedo importar un SVG en Rive?
Sí. Rive convierte un SVG importado en objetos vectoriales nativos y editables, en lugar de mantenerlo como archivo incrustado. Agrupa las formas por parte del cuerpo y nombra las capas en tu herramienta de diseño antes de exportar, porque esa estructura se convierte en tu rig.
¿Puedo animar un personaje a partir de una sola imagen?
Sí. Una herramienta de rigging separa la imagen en partes o la cubre con una malla deformable, agrega un esqueleto y crea los keyframes, conservando tu arte exacto. Un modelo de video generativo también puede animar a partir de una imagen, pero redibuja el personaje en cada fotograma, así que los detalles pueden cambiar.
Lee la guía: De imagen a animación de personaje: qué funciona y qué esperarMíralo en tu app
¿Qué tipo de imagen se anima mejor?
Un personaje plano y de frente, con colores sólidos, bordes limpios, cabeza, cuerpo y extremidades bien separados, y un fondo liso o transparente. Las fotos, el arte pictórico y las vistas de perfil o de tres cuartos son difíciles para cualquier rig; el arte 3D detallado aún puede recibir squash, stretch y parpadeos.
Lee la guía: De imagen a animación de personaje: qué funciona y qué esperar
¿Qué debo recibir cuando encargo la animación de una mascota de marca?
Un set de estados en lugar de un solo clip: como mínimo reposo, saludo, carga, éxito, error y estado vacío, entregado como archivo interactivo de Rive más WebM y MOV con fondo transparente, MP4 y GIF, con derechos comerciales que continúan después de que termine cualquier suscripción y un número acordado de revisiones.
Lee la guía: Servicio de animación de mascotas de marca: qué pedir y qué deberías recibirMíralo en tu app
¿Cuánto se tarda en animar una mascota de marca?
A mano, riggear un personaje y crear los keyframes de un set completo de estados para una app es un trabajo considerable que depende del número de estados y del estilo, así que pide a un animador un calendario por estado. Charmotion produce 17 animaciones a partir de una imagen, normalmente en minutos.
Lee la guía: Servicio de animación de mascotas de marca: qué pedir y qué deberías recibirMíralo en tu app
¿Cuánto cuesta animar una mascota de marca con Charmotion?
Free incluye dos diseños con IA (logos o personajes) y tres conceptos de animación de logo, pero no sets de personaje ni generación de animaciones de logo. Starter cuesta $20 al mes por 3 sets de personaje y 3 animaciones de logo en todos los formatos, y agrega el archivo de Rive con máquinas de estados, WebM y MOV transparentes y código React y SwiftUI. Todo en uno cuesta $100 al mes por 10 sets y 15 animaciones de logo, con generación y soporte prioritarios.
Lee la guía: Servicio de animación de mascotas de marca: qué pedir y qué deberías recibirMíralo en tu app
¿Puedo convertir mi logo en un personaje animado?
Sí, si el logo tiene una cara o forma de personaje. Los logos planos se calcan en partes vectoriales y se riggean; los logos detallados o en 3D conservan sus píxeles y reciben squash, stretch, inclinación y parpadeos. Los logos solo de texto funcionan mejor con una revelación de logo que con estados de personaje.
Lee la guía: Cómo animar un logo a partir de un PNG o una imagen hecha con IAMíralo en tu app
¿Charmotion vuelve a dibujar mi personaje con IA?
No. Tu ilustración subida nunca se vuelve a dibujar. El motor usa comprobaciones asistidas por IA para encontrar partes como la cabeza y los brazos, y luego riggea y crea keyframes con tus propios píxeles o formas trazadas en Rive. La IA generativa solo la usa el diseñador con IA opcional (Diseñar con IA), para quienes aún no tienen un personaje o un logo.
Lee la guía: De imagen a animación de personaje: qué funciona y qué esperarMíralo en tu app
¿Puedo animar mi personaje gratis?
En parte. Entre las opciones gratis están la demo Animated Drawings de Meta para dibujos de figuras humanas, el modo Starter de Adobe Character Animator y la versión FREE de Live2D. La vista previa gratis de Charmotion muestra tu imagen en pantallas reales de app con un clip animado con marca de agua, además de herramientas gratis de planificación y de archivos. Su plan gratis incluye dos diseños con IA (logos o personajes) y conceptos gratis de animación de logo; los sets de personaje completos empiezan en $20 al mes.
Lee la guía: IA para animación de personajes 2D: qué funciona para mascotas, personajes de marca y juegosDe imagen a animación de personaje
¿Puede la IA hacer que mi personaje hable a partir de un archivo de audio?
Sí, pero no con Charmotion. Adobe Character Animator aplica sincronización labial automática a una marioneta por capas, Reallusion Cartoon Animator genera la sincronización labial a partir de audio, Adobe Express anima sus propios personajes predefinidos según una grabación WAV o MP3, y SDK como Mascotbot sincronizan los labios de avatares en tiempo real para agentes de voz. El loop talking de Charmotion no está sincronizado con el audio.
¿Puede la IA crear un ciclo de caminata o un sprite sheet a partir de mi personaje?
Sí, con herramientas pensadas para videojuegos. Charios separa automáticamente en capas la imagen de un personaje, adapta (retarget) captura de movimiento humanoide como caminar, correr y saltar, y exporta para motores como Unity; Spine ofrece control esquelético total para juegos 2D. Las herramientas de estados para mascotas de marca, incluido Charmotion, no crean ciclos de caminata ni sprite sheets.
¿Puede la IA animar una imagen fija de un personaje de caricatura?
Sí. Las herramientas basadas en rig detectan las partes de una imagen de caricatura y mueven tus propios píxeles o formas trazadas, lo que da loops sin cortes que conservan el diseño exacto del personaje. Los modelos de imagen a video como Runway o Kling también animan una imagen fija, con un movimiento más libre, pero generan fotogramas nuevos, así que los detalles pueden cambiar. Lo que mejor funciona es el arte de frente con las extremidades separadas.
Lee la guía: Cómo animar tu propio personaje con IA: elige el método según tu objetivoDe imagen a animación de personaje
¿La IA cambiará el diseño de mi personaje al animarlo?
Depende del método. Los modelos de imagen a video y de transferencia de movimiento generan cada fotograma, así que las caras, la ropa, los colores y los accesorios pueden cambiar. Las herramientas basadas en rig mueven tu arte original con huesos y mallas, así que el diseño se mantiene idéntico. Charmotion nunca redibuja el personaje: el arte plano con partes separadas recibe un rig vectorial, mientras que los renders 3D, los degradados y las imágenes hechas con IA se animan tal cual con compresión, estiramiento, inclinación, saltitos y parpadeos.
Lee la guía: Por qué la animación con IA cambia a tu personaje (y cómo evitarlo)De imagen a animación de personaje
¿Puedo subir mi propio personaje a Adobe Express?
No con la función Animate characters de Adobe Express. Esta anima personajes de la biblioteca propia de Adobe con audio que grabas o subes, y un community manager de Adobe ha dicho que los personajes personalizados son una de las funciones más pedidas. Para animar tu propio personaje, usa Adobe Character Animator con una marioneta en capas, o una herramienta que parta de una sola imagen.
Lee la guía: ¿Puedes subir tu propio personaje a Animate Characters de Adobe Express?
¿Meta Animated Drawings sigue disponible?
Sí, pero ya no recibe mantenimiento. La demo en el navegador de sketch.metademolab.com seguía cargando en octubre de 2026 y el código, con licencia MIT, está en GitHub, pero el repositorio se actualizó por última vez el 3 de septiembre de 2025 y está archivado. Funciona mejor con dibujos de figuras humanoides con dos brazos y dos piernas.
Lee la guía: Alternativas a Meta Animated Drawings (¿y sigue teniendo mantenimiento?)
¿Cuál es la mejor herramienta de IA para animar un personaje 2D?
Depende del trabajo. Para actuación en vivo y sincronización labial, Adobe Character Animator o Cartoon Animator; para clips de baile o cinematográficos, Viggle, Runway o Kling; para dibujos infantiles, la demo Animated Drawings de Meta; para personajes de videojuegos, Charios o Spine; para estados de una mascota de marca en apps y sitios web a partir de una sola imagen, una herramienta de sets de estados como Charmotion.
Lee la guía: Las mejores herramientas de IA para animar un personaje 2D o una mascota de marca (2026)Animador de mascotas con IA
¿Cómo puedo animar el dibujo de mi hijo con IA?
Fotografía el dibujo de forma plana y con luz uniforme, recórtalo para que quede una sola figura sobre un fondo liso y súbelo a la demo en el navegador Animated Drawings de Meta o a la app AniMagic para iOS. Ambas están pensadas para dibujos infantiles de figuras humanoides y agregan movimientos predefinidos, como bailar. Sube solo el dibujo, no una foto del niño o la niña.
Lee la guía: Cómo animar un dibujo con IA: garabatos infantiles vs arte de personaje limpio
¿Cómo animo a mi OC con IA?
Empieza con loops cortos como reposo (idle), saludo, dormir y algunas reacciones, hechos con una herramienta basada en rig para que tu OC (personaje original) conserve su diseño exacto en emojis de Discord, stickers y perfiles. Usa herramientas de transferencia de movimiento como Viggle o Runway Act-Two para bailes y edits de peleas, aceptando algunos cambios en el diseño, y Live2D si quieres hacer streaming como tu OC.
Lee la guía: Cómo animar tu OC (personaje original): loops, reacciones, bailes y modelos de VTuberMíralo en tu app
¿Cuál es una buena alternativa a Adobe Character Animator?
Reallusion Cartoon Animator es la alternativa más cercana, con animación de marionetas y sincronización labial a partir de audio; Live2D es adecuado para modelos de VTuber. Para un set fijo de loops para apps o sitios web a partir de una sola imagen, una herramienta de sets de estados como Charmotion es más rápida. Para streaming en vivo y sincronización labial, Character Animator y Cartoon Animator siguen siendo mejores opciones.
¿La IA puede convertir a mi personaje en un modelo de VTuber?
No con un solo clic. Un modelo de VTuber suele ser un rig de Live2D construido a partir de una ilustración dibujada en capas separadas (ojos, boca, pelo, cuerpo), que luego se riggea en Live2D Cubism y se controla con seguimiento facial. Las herramientas de animación a partir de una sola imagen, incluido Charmotion, crean loops y reacciones, no un modelo de VTuber con seguimiento.
Lee la guía: Cómo animar tu OC (personaje original): loops, reacciones, bailes y modelos de VTuber
¿Cuánto cuesta una mascota interactiva de Rive?
Una mascota de marca interactiva y personalizada en Rive suele costar entre $1500 y $6000. Mascot Engine, un proveedor, sitúa una con máquinas de estados entre $2500 y más de $6000, y los paquetes en Contra de un Rive Expert van desde $1600 por 3 estados con tu arte hasta más de $4000 por 10 estados con diseño original y sincronización labial. Los sistemas completos para un producto cuestan más.
Lee la guía: ¿Cuánto cuesta animar una mascota de marca en 2026?
¿Cuánto cobra por hora un animador de Rive?
Contra indica entre $25 y $150 por hora para animadores de Rive: unos $25 a $45 en nivel inicial y $75 a $150 para especialistas con experiencia. La mediana de Upwork para animadores en general es de unos $20 a $38. Para una mascota de marca, un precio fijo por una lista de estados acordada suele ser más fácil de comparar que las cotizaciones por hora.
Lee la guía: Cómo contratar a un animador de Rive: plataformas, tarifas y evaluación
¿El lip-sync está incluido en los precios de animación de mascotas?
Normalmente no. La sincronización labial necesita un conjunto de formas de boca y una lógica para cambiarlas al ritmo del habla, así que se cotiza como complemento o en el nivel más alto. El anuncio en Contra de un Rive Expert incluye sincronización labial en tiempo real solo en su paquete de más de $4000. Duolingo explica que usa más de 20 formas de boca para sus personajes.
Lee la guía: ¿Cuánto cuesta animar una mascota de marca en 2026?
¿Cuánto cuesta diseñar una mascota antes de animarla?
Presupuesta el diseño por separado: Pixune, un estudio, indica entre $500 y $1500 para el diseño de una mascota de marca en 2D y entre $2000 y $10 000 para una en 3D. Muchos anuncios de animación no lo incluyen; un servicio de Rive/Lottie en Dribbble indica que su precio base de $300 suele cubrir solo la animación, y la ilustración se cotiza aparte.
Lee la guía: ¿Cuánto cuesta animar una mascota de marca en 2026?
¿Contrato a un animador o uso IA para mi mascota?
Usa una herramienta automatizada cuando ya tienes el arte y necesitas estados estándar de app como reposo (idle), carga, éxito y error. Contrata a un animador para sincronización labial, actuación personalizada, diseño de un personaje nuevo, ciclos de caminata o interacciones a medida. Usa video con IA de transferencia de movimiento para clips de baile y memes.
Lee la guía: ¿Cuánto cuesta animar una mascota de marca en 2026?Míralo en tu app
¿Viggle sirve para mascotas de marca?
Viggle sirve para poner a una mascota de marca en clips de baile, memes y tendencias, porque copia el movimiento de un video de referencia. Encaja peor para los estados de una marca: los fotogramas se generan, así que los detalles pueden cambiar, los clips no hacen loop limpio y no hay máquina de estados para una app. En octubre de 2026, los planes empiezan en $7.99 al mes.
Lee la guía: Alternativas a Viggle para mascotas de marca (no memes de baile)
¿Viggle puede exportar un video con fondo transparente?
A través de su API, sí, en dos archivos: el modo transparente de Viggle devuelve un video principal y una máscara alfa separada para componer en un editor. También sugiere un fondo verde puro para usar como pantalla verde. Eso no es un único archivo con canal alfa, como WebM (VP9) o MOV HEVC, que se coloque directamente en una página web.
Lee la guía: Alternativas a Viggle para mascotas de marca (no memes de baile)
¿Qué es Animation AI Pro?
"Animation AI Pro" suele referirse a AnimateAI en animateai.pro, una herramienta web que convierte una historia o un guion en videos animados generados con IA con personajes reutilizables. En octubre de 2026, su plan Standard cuesta $39.99 al mes tras una semana de prueba de $5.99, y Pro cuesta $99.99. Crea videos narrativos, no estados interactivos para apps.
¿Debo pedirle a un animador de Rive inputs o Data Binding?
Pide Data Binding en los proyectos nuevos. La documentación de Rive considera obsoletos los inputs de la máquina de estados (state machine) y recomienda Data Binding para trabajos nuevos, aunque los inputs existentes siguen funcionando. Pide al animador que documente el view model y cada propiedad que define tu código, además de los nombres de las máquinas de estados.
Lee la guía: Cómo contratar a un animador de Rive: plataformas, tarifas y evaluación
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Agrega animación a tu app o sitio web
¿Cómo agrego animación a una app de SwiftUI?
Envuelve un cambio de estado en withAnimation o agrega .animation(_:value:) a una vista, y SwiftUI interpola la diferencia. Para movimientos de varios pasos, usa PhaseAnimator o KeyframeAnimator, disponibles desde iOS 17. Para personajes creados por diseñadores, agrega el runtime de Lottie o de Rive con Swift Package Manager.
Lee la guía: Cómo agregar animación a una app iOS (SwiftUI y UIKit)
¿Cómo agrego Lottie a una app de iOS?
Agrega el paquete https://github.com/airbnb/lottie-spm.git en Xcode con File > Add Package Dependencies. Airbnb recomienda este wrapper porque pesa menos de 500 KB, mientras que el repositorio principal supera los 300 MB. Desde la versión 4.3.0, un LottieView de SwiftUI reproduce animaciones directamente y es compatible con movimiento reducido.
Lee la guía: Cómo agregar animación a una app iOS (SwiftUI y UIKit)
¿Cómo agrego una animación de Rive a una app de iOS?
Agrega https://github.com/rive-app/rive-ios con Swift Package Manager, o pod 'RiveRuntime' con CocoaPods; luego usa import RiveRuntime y renderiza RiveViewModel(fileName: "name").view() en SwiftUI. El runtime es compatible con iOS 14 y posteriores, además de tvOS 16, macOS 13.1, Mac Catalyst 14 y visionOS 1. Los runtimes de Apple nuevos y heredados vienen en el mismo paquete.
Lee la guía: Cómo agregar animación a una app iOS (SwiftUI y UIKit)
¿Cómo animo SF Symbols?
Usa el modificador .symbolEffect, disponible desde iOS 17 y macOS Sonoma. Los efectos integrados incluyen bounce, pulse, variable color, scale, appear, disappear y replace, y también funcionan con símbolos personalizados. Son una forma rápida de animar íconos sin agregar ninguna biblioteca de animación de terceros.
Lee la guía: Cómo agregar animación a una app iOS (SwiftUI y UIKit)
¿Qué API de animación debo usar en Jetpack Compose?
Elige según el caso: animate*AsState para un solo valor con un objetivo, AnimatedVisibility para mostrar y ocultar, AnimatedContent o Crossfade para intercambiar contenido, updateTransition para varias propiedades a la vez y rememberInfiniteTransition para loops. Google recomienda una biblioteca de terceros, como Lottie, para animaciones ilustradas complejas.
Lee la guía: Cómo agregar animación a una app de Android (Compose)
¿Todavía debo usar MotionLayout en Android?
Solo para pantallas basadas en Views. La página de MotionLayout de Google ahora empieza con un aviso "Try the Compose way", que recomienda Jetpack Compose y sus API de animación para nuevas interfaces. MotionLayout pertenece al sistema de Views, así que los layouts existentes basados en Views pueden conservarlo, mientras que las pantallas nuevas creadas en Compose deben usar animaciones de Compose.
Lee la guía: Cómo agregar animación a una app de Android (Compose)
¿Cómo agrego Rive a una app de Jetpack Compose?
Agrega app.rive:rive-android (consulta la documentación actual para ver la versión más reciente) junto con androidx.startup. La API de Compose de Rive, marcada como beta, usa rememberRiveWorker(), rememberRiveFile() y el composable Rive. La antigua RiveAnimationView basada en View se considera legacy, pero sigue siendo compatible con las apps existentes, y ambos enfoques cargan el mismo archivo .riv.
Lee la guía: Cómo agregar animación a una app de Android (Compose)
¿Cuál es la diferencia entre animaciones implícitas y explícitas en Flutter?
Las animaciones implícitas, como AnimatedContainer, se animan automáticamente del valor anterior al nuevo cuando reconstruyes el widget. Las animaciones explícitas las controla un AnimationController, que produce valores de 0.0 a 1.0 durante una duración determinada y necesita un ticker de vsync. Usa animaciones explícitas cuando necesites iniciar, detener, repetir o invertir la animación.
¿Cómo agrego Lottie o Rive a una app de Flutter?
Para Lottie, agrega el paquete lottie, escrito íntegramente en Dart, y llama a Lottie.asset() o Lottie.network(); los archivos dotLottie funcionan mediante un loader personalizado. Para Rive, agrega el paquete rive (0.14.x), que depende de rive_native y ofrece tanto el renderizador de Rive como el de Flutter en todas las plataformas.
¿Uso Animated o Reanimated en React Native?
El Animated integrado sirve para animaciones simples basadas en tiempo; configura useNativeDriver: true para que se ejecuten en el hilo de la UI en lugar de cruzar el bridge en cada fotograma. Elige Reanimated para movimientos complejos o controlados por gestos. Reanimated 4 solo funciona con la New Architecture y requiere react-native-worklets.
Lee la guía: Cómo agregar animación a una app de React Native
¿Framer Motion ahora se llama Motion?
Sí. La biblioteca ahora se publica como Motion. Para actualizar un proyecto de React, desinstala framer-motion, ejecuta npm install motion y cambia los imports a import { motion } from "motion/react". La guía de actualización lo trata como un cambio de nombre del paquete para quienes usan React, así que el código de componentes existente se mantiene en gran parte.
Lee la guía: Cómo agregar animación a una app de React o Next.js
¿Cómo agrego una animación de Lottie a un sitio web?
Usa los reproductores dotLottie de LottieFiles. Lo más rápido es el web component: carga @lottiefiles/dotlottie-wc y escribe <dotlottie-wc src="anim.lottie" autoplay loop>. Con un bundler, usa @lottiefiles/dotlottie-web sobre un canvas, o los paquetes para React, Vue, Svelte o Solid. Se reproducen tanto archivos .json como .lottie.
Lee la guía: Cómo agregar animación a un sitio web (HTML, CSS, JS)
¿Cómo agrego una animación de Rive a una página HTML simple?
Agrega un <canvas> y el script @rive-app/webgl2 desde unpkg o npm, y luego crea new rive.Rive({ src, canvas, autoplay: true, stateMachine }). Llama a resizeDrawingSurfaceToCanvas() en onLoad para que se renderice con nitidez, y llama a cleanup() cuando quites la animación de la página para liberar su memoria.
Lee la guía: Cómo agregar animación a un sitio web (HTML, CSS, JS)
¿Qué propiedades de CSS conviene animar para un buen rendimiento?
Anima transform y opacity siempre que puedas. web.dev explica que se quedan en la etapa de composición, mientras que propiedades como top, left, width o margin generan trabajo de layout o de pintado. Usa will-change con moderación, solo donde hayas medido un problema real.
Lee la guía: Cómo agregar animación a un sitio web (HTML, CSS, JS)
¿Webflow es compatible con Rive de forma nativa?
Sí. Desde el 18 de septiembre de 2024, Webflow trata Rive como un formato nativo: sube el archivo .riv a Assets, arrastra el elemento Rive desde Add > Media a la página y elige el artboard, la máquina de estados (state machine), el ajuste (fit) y la reproducción automática. Los elementos Rive también se pueden conectar a las interacciones de Webflow.
Lee la guía: Cómo agregar animaciones de Rive, Lottie y video a Webflow
¿Framer es compatible con Rive y Lottie?
Sí. El plugin oficial de Rive para Framer te permite soltar un archivo .riv y controlar los inputs de la máquina de estados (state machine) mediante variantes. Según LottieFiles, los componentes Lottie y dotLottie están disponibles en Insert > Media. Para clips simples, el componente Video de Framer reproduce archivos MP4 subidos o alojados externamente, pero no los comprime.
Lee la guía: Cómo agregar animaciones de Rive y Lottie a Framer
¿Cómo agrego animaciones a un sitio de WordPress?
Para video, el bloque Video nativo tiene los ajustes Autoplay, Loop, Muted, Play inline, Preload y Poster. Para Lottie, instala el plugin de bloque oficial de LottieFiles. Para Rive, usa un plugin de bloque de terceros o pega el snippet del runtime web de Rive en un bloque Custom HTML.
Lee la guía: Cómo agregar animaciones de Lottie, Rive y video a WordPress
¿Puedo agregar Lottie o Rive a una tienda de Shopify?
No de forma nativa, pero puedes pegar el código del reproductor en una sección Custom Liquid si tu tema la ofrece, o usar una app. Para video simple, Shopify acepta cargas de MP4 y MOV de hasta 1 GB y 10 minutos como contenido multimedia del producto, y muchos temas incluyen secciones de video.
¿Cómo hago que una animación de carga sea accesible?
Pon un texto breve como "Cargando…" en un elemento con role="status" para que los lectores de pantalla lo anuncien, y oculta el spinner decorativo con aria-hidden="true". Configura aria-busy en la región que se está actualizando, y ralentiza o reemplaza el movimiento cuando se cumpla prefers-reduced-motion: reduce.
Lee la guía: Cómo agregar una animación de carga a una app o un sitio web
¿Cómo hago que la animación del logo del header se reproduzca una sola vez?
Usa un <video> silenciado e inline sin el atributo loop, para que se detenga en su último fotograma, y haz que ese fotograma sea tu logo en reposo. Inícialo con play() solo cuando no se solicite movimiento reducido, y define el logo estático como poster para que, aunque se bloquee la reproducción automática, el header se vea correctamente.
Lee la guía: Cómo agregar un logo animado al header de tu página web
¿Cómo evito que un overlay de animación bloquee los clics?
Configura pointer-events: none en el canvas o video del overlay para que los clics y toques pasen al contenido de abajo; en SwiftUI, usa .allowsHitTesting(false). Para video con fondo transparente, coloca un .mov HEVC con alfa antes del WebM VP9 para que Safari también muestre la transparencia en lugar de un recuadro opaco.
Lee la guía: Cómo poner una animación transparente sobre el contenido
¿Una mascota puede estar en loop para siempre en un estado vacío?
No debería reproducirse indefinidamente sin un control. El criterio 2.2.2 de WCAG 2.2 exige una forma de pausar, detener u ocultar el movimiento automático que dure más de cinco segundos y se muestre junto a otro contenido. Reproduce el loop unas cuantas veces y luego detente en un fotograma fijo, o agrega un botón de pausa, y muestra una pose estática cuando se active el movimiento reducido.
Lee la guía: Cómo agregar una mascota de marca al onboarding y a los estados vacíos
¿Se pueden animar los íconos de apps en Android?
No desde tu app. Los íconos adaptativos son capas estáticas de primer plano y fondo de 108 dp, y Google indica que los efectos animados como el parallax los generan los launchers compatibles. El único movimiento de ícono que controlas es la splash screen de Android 12+, donde el ícono centrado puede ser un AnimatedVectorDrawable. Todo lo más elaborado va dentro de la app.
Lee la guía: ¿Se puede animar el ícono de una app? Lo que de verdad permiten iOS y Android
¿Puedo cambiar el ícono de mi app desde el código?
Sí, entre los íconos que incluyes en la app. En iOS, comprueba supportsAlternateIcons y llama a setAlternateIconName con un conjunto de íconos declarado en tiempo de compilación, o con nil para el ícono principal. Android no tiene una API dedicada a íconos; las apps suelen activar y desactivar entradas activity-alias que llevan cada una su propio ícono. No se pueden descargar íconos nuevos en tiempo de ejecución.
Lee la guía: Íconos alternativos de app en iOS, Android, Expo y Flutter
¿Cuánto puede durar la animación de un ícono de splash en Android?
Google recomienda no más de 1000 ms en teléfonos, con un retraso de inicio no mayor a 166 ms, y una animación en loop si el arranque tarda más. En apps de Android 12 con target API 31 o 32, define windowSplashScreenAnimationDuration; Android 13 toma la duración del AnimatedVectorDrawable. Ninguno cambia cuánto tiempo permanece visible la splash screen.
Lee la guía: Ícono animado del splash screen en Android: especificaciones, XML y transición
¿Qué tamaño tiene un ícono animado de splash en Android?
Un ícono animado de splash es un AnimatedVectorDrawable en un lienzo de 432 dp, cuatro veces un ícono adaptativo, y solo los dos tercios interiores, 288 dp, son visibles. Mantén tu arte dentro de esa área o quedará recortado. Los íconos de splash estáticos miden 288×288 dp dentro de un círculo de 192 dp, o 240×240 dp dentro de 160 dp si tienen fondo de ícono.
Lee la guía: Ícono animado del splash screen en Android: especificaciones, XML y transición
¿Funciona un ícono animado de splash en versiones anteriores a Android 12?
No. La biblioteca core-splashscreen de androidx recrea la splash screen de Android 12 desde la API 23, pero su referencia indica una excepción: la compatibilidad con AnimatedVectorDrawable. Los dispositivos más antiguos muestran un ícono estático. Coloca el drawable animado en res/drawable-v31 y una versión estática en res/drawable para que cada dispositivo reciba la correcta.
Lee la guía: Ícono animado del splash screen en Android: especificaciones, XML y transición
¿Las herramientas de IA para programar pueden agregar una splash screen animada?
Sí, si el prompt les da los datos que suelen adivinar mal: la pantalla de inicio del sistema operativo es estática, la intro se reproduce en la primera pantalla, el nombre exacto de la máquina de estados (state machine), un temporizador cuando el archivo no dispara ningún evento de fin, un único color de fondo compartido y una alternativa para movimiento reducido. Guarda estas reglas en CLAUDE.md, AGENTS.md o en las reglas de Cursor.
Lee la guía: Prompts de IA para agregar una mascota animada en el splash o la pantalla de carga
¿Wix es compatible con animaciones de Rive?
Sí, en Wix Studio. El Studio Editor tiene un elemento Rive en Add Elements, Media, Rive: sube un .riv al Media Manager y luego elige el artboard, la máquina de estados, el ajuste (fit) y la reproducción automática en Settings. No expone inputs al código de la página y Wix solo lo documenta para Studio, así que en el Wix Editor clásico se usa un elemento Embed HTML.
Lee la guía: Cómo agregar una animación de Rive a Wix Studio
¿Wix Velo puede cambiar el estado de una animación de Rive?
No a través del elemento Rive: la referencia $w de Velo no incluye ningún elemento Rive, así que no hay una forma documentada de configurar sus inputs ni su view model. En su lugar, ejecuta el runtime web de Rive dentro de un elemento HTML iFrame y envíale un número de mood o el nombre de un trigger desde el código de la página con postMessage, que recibe un listener de message dentro del embed.
Lee la guía: Cómo agregar una animación de Rive a Wix Studio
¿Puedo agregar JavaScript personalizado en el plan Basic de Squarespace?
No. Squarespace indica que agregar JavaScript o un iframe en un Code Block requiere el plan Core, Plus o Advanced, y Code Injection está disponible en esos planes y en algunos planes heredados. En Basic, usa un MP4 silenciado, con reproducción automática y en loop en un Video Block, o un GIF animado, en lugar de un reproductor de Rive o Lottie.
Lee la guía: Cómo agregar una mascota de marca animada a Squarespace
¿Qué plan de Carrd permite embeds?
Pro Standard o superior. Según la documentación de Carrd, el elemento Embed, que acepta tu propio código, incluidas etiquetas script, requiere Pro Standard, con un precio de $19 al año en octubre de 2026. Pro Lite ($9 al año) agrega cargas de video, pero no embeds, así que un reproductor de Rive o Lottie necesita Standard, mientras que un MP4 H.264 funciona en Pro Lite y superiores.
¿Por qué Rive dice que window is not defined en Next.js?
Porque se ejecutó código exclusivo del navegador durante el prerenderizado en el servidor. Los Client Components del App Router también se prerenderizan a HTML, así que falla si lees window o matchMedia durante el render o si creas una instancia de Rive en el ámbito del módulo. Mueve ese trabajo a useEffect, mantén useRive en un componente "use client" y usa next/dynamic con ssr: false dentro de un Client Component solo si alguna dependencia lo necesita.
Lee la guía: Rive en el App Router de Next.js: Client Components, SSR y WASM
¿Qué versión de rive.wasm debo alojar yo mismo con el paquete de Rive para React?
La versión del paquete del runtime que está dentro de node_modules, no la del paquete de React. @rive-app/react-webgl2 fija una versión exacta de @rive-app/webgl2 (por ejemplo, 4.37.1 fija 2.45.1), y Rive indica que el WASM y el runtime deben coincidir. Copia node_modules/@rive-app/webgl2/rive.wasm con esa versión en el nombre y pasa la misma URL a setWasmUrl y a preload.
Lee la guía: Rive en el App Router de Next.js: Client Components, SSR y WASM
¿Lovable puede instalar el runtime de Rive?
Sí. Lovable instala paquetes npm cuando los nombras en el chat del proyecto, sin pasar por la terminal, así que pídele que instale @rive-app/react-webgl2 y que fije la versión. Luego dale la ruta del .riv, el nombre de la máquina de estados y los nombres de las propiedades del view model, y pídele un componente de tamaño fijo que solo se renderice en el navegador.
¿Cómo agrego un archivo .riv a un proyecto de Lovable?
La forma más confiable es la sincronización con GitHub: haz commit del archivo como public/mascot.riv, súbelo con push a la rama que sincroniza Lovable y luego cárgalo desde /mascot.riv. También puedes alojar el .riv en un CDN que envíe encabezados CORS y pegar la URL en el chat. Lovable no puede guardar en un proyecto archivos de más de 10 MB.
¿Pueden v0 y Bolt usar un archivo .riv subido?
Sí, con pasos distintos. v0 incluye RIV entre los adjuntos de chat admitidos, así que adjunta el archivo y pídele a v0 que lo guarde como public/mascot.riv. En Bolt, los adjuntos del chat no se conservan, así que arrastra el archivo a la carpeta Public en la vista Code. En ambos casos, después se carga desde /mascot.riv con el runtime de Rive para React.
Lee la guía: Cómo agregar una mascota de Rive en Bolt.new, v0 y Replit
¿Se puede animar el ícono de una página de Notion?
Puedes subir un GIF animado como ícono de página: la pestaña Upload de Notion acepta tu propia imagen o la URL de una imagen, GIF es un tipo de archivo admitido y Notion recomienda 280×280 px. Notion no documenta cómo se comporta la animación en todos los lugares donde aparece un ícono, así que revisa la barra lateral, las menciones y la versión móvil. En el plan Free, los archivos deben pesar menos de 5 MB.
Lee la guía: Íconos, portadas y mascotas animadas para páginas de Notion
¿Puedo insertar una animación de Rive en Notion?
Solo como enlace alojado. La opción Embed link de Rive está pensada para plataformas como Notion, que muestra embeds mediante su bloque /embed. Para generar URL de embed necesitas un plan Voyager o Enterprise de Rive, cada enlace es una instantánea del archivo y los embeds no exponen la API del runtime, así que nada en Notion puede cambiar el estado de la animación.
Lee la guía: Íconos, portadas y mascotas animadas para páginas de Notion
¿Por qué Rive no carga en mi extensión de Chrome?
Porque el runtime web descarga rive.wasm desde unpkg de forma predeterminada, y Manifest V3 prohíbe el código alojado de forma remota, incluido WASM. La CSP predeterminada de las extensiones también desactiva WebAssembly. Copia los archivos WASM en el paquete, llama primero a RuntimeLoader.setWasmUrl(chrome.runtime.getURL("vendor/rive.wasm")) y configura script-src 'self' 'wasm-unsafe-eval'; object-src 'self';.
Lee la guía: Rive en una extensión de Chrome (Manifest V3): incluye el WASM en el paquete
¿Puedo personalizar la pantalla de carga de una Telegram Mini App?
Sí, con límites. En @BotFather (Bot Settings, Configure Mini App) puedes configurar un ícono SVG provisional y los colores del fondo y del header para los temas claro y oscuro. Telegram no documenta ninguna opción animada. El marcador de posición desaparece cuando tu app llama a Telegram.WebApp.ready(), así que una intro animada tiene que reproducirse después, dentro de la app.
Lee la guía: Mascota para Telegram Mini App: pantalla de carga, temas y respuesta háptica
¿Por qué mi animación de Rive no aparece en el editor de Bubble?
Bubble ejecuta las etiquetas script dentro de un elemento HTML solo en modo de ejecución (run mode), nunca en el editor, así que el lienzo se queda vacío mientras diseñas. Abre la página en vista previa para verla. Si ahí sigue en blanco, revisa la consola del navegador por si hay una solicitud fallida del .riv, un error de CORS o un script que se ejecutó antes de que cargara el runtime.
Lee la guía: Cómo agregar una animación de Rive a Bubble sin el plugin antiguo
¿Cómo disparo una animación de Rive desde un workflow de Bubble?
Guarda la instancia de Rive en window cuando se cargue en un elemento HTML (con Display as an iFrame desactivado) y luego agrega al workflow la acción Run javascript del plugin Toolbox. Un paso como window.mascot.viewModelInstance.number("mood").value = 5 establece un estado de ánimo, y .trigger("success").trigger() dispara una reacción puntual.
Lee la guía: Cómo agregar una animación de Rive a Bubble sin el plugin antiguo
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
iOS y Swift
¿Cómo asigno una propiedad numérica de Rive con el nuevo runtime de Apple?
Crea una instancia del view model con file.createViewModelInstance, vincúlala mediante artboard.createStateMachine(name, binding: instance) y luego llama a instance.setValue(of: NumberProperty(path: "mood"), to: Float(2)). El tipo de valor es Float. Mantén una referencia fuerte a la instancia, haz la llamada desde el main actor y renderiza con RiveUIViewRepresentable(rive:).
Lee la guía: Data Binding de Rive en SwiftUI (nuevo runtime de Apple)
¿Cómo disparo un trigger de Rive en Swift?
En el nuevo runtime de Apple, llama a instance.fire(trigger: TriggerProperty(path: "success")) en la instancia del view model que vinculaste a la máquina de estados. Los triggers no llevan ningún valor. Para reaccionar cuando el propio archivo dispara un trigger, itera sobre instance.stream(of:). En el runtime legacy, la llamada equivalente es riveViewModel.triggerInput("success").
Lee la guía: Data Binding de Rive en SwiftUI (nuevo runtime de Apple)
¿Qué es el nuevo runtime de Rive para Apple?
Es una API pensada primero para Swift, introducida en rive-ios 6.24.0 y construida sobre Swift Concurrency con un Worker en segundo plano, además de los objetos File, Artboard y Rive. Reemplaza a RiveViewModel en los proyectos nuevos. No tiene inputs de máquina de estados, event listeners ni animaciones lineales; en su lugar, los archivos se controlan mediante Data Binding. El runtime legacy se sigue distribuyendo junto a ella.
Lee la guía: Data Binding de Rive en SwiftUI (nuevo runtime de Apple)
¿Cómo muestro un archivo de Rive en UIKit con el nuevo runtime?
Agrega un RiveUIView(rive: nil) a tu view controller con Auto Layout y luego carga el archivo en una Task: crea un Worker, un File, un artboard y una máquina de estados vinculada, y asigna riveView.rive = try await Rive(file:artboard:stateMachine:). Pausa con isPaused y limita los cuadros por segundo con frameRate = .fps(30).
PhaseAnimator vs KeyframeAnimator: ¿cuál debería usar?
Usa PhaseAnimator cuando una animación pasa por unos pocos estados discretos, como reposo, elevación y aterrizaje, cada uno con su propia curva. Usa KeyframeAnimator cuando la escala, la rotación y el desplazamiento necesitan pistas temporizadas independientes. Ambos requieren iOS 17, macOS 14, tvOS 17, watchOS 10 o visionOS 1, y ambos pueden reproducirse en loop o con un trigger.
¿Cómo reproduzco un LottieView en loop o una sola vez en SwiftUI?
Encadena un modificador de reproducción: LottieView(animation: .named("idle")).looping() se reproduce en loop sin fin, y .playing(loopMode: .playOnce) se reproduce una vez y se detiene en el último fotograma. Para rangos o marcadores, usa .playbackMode(.playing(.fromProgress(0, toProgress: 1, loopMode: .loop))). Agrega .animationDidFinish para ejecutar código cuando termine una reacción puntual, y .resizable() para que se ajuste a su marco.
Lee la guía: Lottie en SwiftUI: LottieView, reproducción y loop
¿Las Live Activities o la Dynamic Island pueden reproducir una animación en loop?
No, al menos no una continua. Desde iOS 17, los widgets y las Live Activities animan los cambios de datos con transiciones y animaciones de SwiftUI, cada una limitada a dos segundos, y nada se anima en el modo Always-On. Un ingeniero de Apple DTS afirmó que las animaciones continuas no son compatibles y calificó el truco de la fuente de temporizador como un hack no admitido. En su lugar, alterna poses estáticas.
Lee la guía: Límites de animación en Live Activities, Dynamic Island y widgets
¿Cuál es el límite de tamaño de datos de una Live Activity?
4 KB. Los datos estáticos y dinámicos de una Live Activity, incluidas las actualizaciones de ActivityKit y los payloads push, no pueden superar los 4 KB en conjunto. Una Live Activity puede permanecer activa hasta ocho horas y luego seguir en la pantalla de bloqueo hasta cuatro horas más, 12 horas en total. Envía valores pequeños, no imágenes.
Lee la guía: Límites de animación en Live Activities, Dynamic Island y widgets
¿Rive o Lottie funcionan en watchOS?
Oficialmente, ninguno. El paquete rive-ios declara iOS 14, visionOS 1, tvOS 16, macOS 13.1 y Mac Catalyst 14, y lottie-spm declara iOS, macOS, tvOS y visionOS, sin watchOS en ninguno de los dos. En Apple Watch, usa PhaseAnimator o KeyframeAnimator de SwiftUI (watchOS 10+) o reproduce fotogramas prerrenderizados.
¿Cómo detecto los cambios de Reducir movimiento en UIKit?
Lee UIAccessibility.isReduceMotionEnabled para obtener el valor actual y observa UIAccessibility.reduceMotionStatusDidChangeNotification para saber cuándo el usuario lo cambia mientras tu pantalla está abierta. En el handler, pausa las vistas en loop, por ejemplo riveView.isPaused = true, y cambia a una pose estática para no perder la información del estado.
¿Cuáles son las especificaciones de video de App Preview de App Store?
Las App Previews duran de 15 a 30 segundos y pueden pesar como máximo 500 MB. Usa .mov, .m4v o .mp4 con H.264 a entre 10 y 12 Mbps y hasta 30 fps, o ProRes 422 HQ, con audio AAC estéreo a 44.1 o 48 kHz. Los iPhone con Face ID usan 886×1920 en vertical. Sube hasta tres por tamaño de dispositivo e idioma.
¿Una App Preview puede mostrar animación que no sea metraje de la app?
Solo como overlays. La directriz 2.3.4 indica que las vistas previas solo pueden usar capturas de video de la propia app, aunque la narración y los overlays de video o texto pueden explicar lo que se muestra. Apple también indica que no se deben filmar manos ni dispositivos. Una mascota animada está bien dentro de la interfaz capturada de la app o como un overlay breve.
¿Se pueden animar los íconos de apps en iPhone?
No. iOS no tiene una API pública para un ícono animado en la pantalla de inicio (Home Screen). setAlternateIconName solo cambia entre conjuntos de íconos fijos declarados en tu app, y los reflejos de Liquid Glass en los íconos los aplica el sistema. Solo Reloj y Calendario de Apple se actualizan en vivo. Para que tu ícono se mueva, reproduce una intro de inicio en tu primera pantalla después de una Launch Screen estática.
Lee la guía: ¿Se puede animar el ícono de una app? Lo que de verdad permiten iOS y Android
¿Cómo tienen íconos en vivo Clock y Calendar?
Son apps integradas de Apple. Ante la pregunta de si una app de terceros podía animar su ícono como Reloj, un ingeniero de DTS de Apple respondió que Reloj y Calendario son apps integradas y pueden usar funciones fuera del SDK de iOS. Ninguna API pública ofrece lo mismo, y un truco de 2024 para rotar íconos dependía de un método privado que, previsiblemente, App Review rechazaría.
Lee la guía: ¿Se puede animar el ícono de una app? Lo que de verdad permiten iOS y Android
Avatares para asistentes de IA
¿Cuáles son los valores de status de useChat en el Vercel AI SDK?
El status de useChat puede ser 'submitted', 'streaming', 'ready' o 'error'. Submitted significa que la solicitud se envió, streaming que la respuesta está llegando, ready que está en reposo y error que la solicitud falló. Para un avatar, asigna submitted a thinking, streaming a talking, ready a idle y error a una reacción de error.
Lee la guía: Anima un avatar de chat con eventos de streaming
¿Cómo asigno un número de un view model de Rive desde JavaScript puro?
Carga el archivo con autoBind: true y luego escribe rive.viewModelInstance.number("mood").value = 3. Dispara una propiedad trigger con rive.viewModelInstance.trigger("success").trigger(). Ambos devuelven null si el nombre de la propiedad no existe, así que protégelos con una comprobación. Esto funciona desde cualquier event listener, como un cambio de estado del chat o un evento de la Realtime API.
Lee la guía: Anima un avatar de chat con eventos de streaming
¿Qué evento de OpenAI Realtime indica que el usuario empezó a hablar?
input_audio_buffer.speech_started, que se envía en modo server VAD cuando el servidor detecta voz en el búfer de entrada. OpenAI sugiere usarlo para interrumpir la reproducción o dar feedback visual, así que es el trigger natural para un estado listening. input_audio_buffer.speech_stopped llega cuando el usuario deja de hablar, un buen momento para cambiar a thinking.
Lee la guía: Avatar de agente de voz: mapeo de eventos de OpenAI Realtime
¿Cómo sé cuándo una voz de OpenAI Realtime termina de hablar?
Con WebRTC o SIP, escucha output_audio_buffer.stopped, que se dispara cuando el búfer de salida del servidor se ha vaciado por completo después de response.done. Con WebSocket no hay evento del búfer de salida, así que detecta tú mismo cuándo termina tu cola de reproducción. Según reportes de la comunidad, el evento stopped puede llegar tarde, o no llegar hasta que se responda una llamada a herramienta pendiente.
Lee la guía: Avatar de agente de voz: mapeo de eventos de OpenAI Realtime
¿Cuál es el nombre actual del evento delta de audio de Realtime?
La referencia actual de OpenAI Realtime lo llama response.output_audio.delta. Lleva audio codificado en Base64 y le sigue response.output_audio.done. Los tutoriales de la etapa beta usaban response.audio.delta, así que actualiza los listeners copiados de ejemplos antiguos. Con WebSocket, el primer delta de una respuesta es una señal razonable para pasar un avatar a talking.
Lee la guía: Avatar de agente de voz: mapeo de eventos de OpenAI Realtime
¿Basta con la amplitud para animar un avatar que habla?
Para mascotas 2D estilizadas, normalmente sí. Mide la voz con un AnalyserNode, calcula el RMS a partir de getByteTimeDomainData() y reproduce un loop de talking mientras el nivel se mantenga por encima de un umbral, con histéresis para evitar parpadeos. Un lip-sync real necesita los tiempos de los visemas del proveedor de TTS y una forma de boca dibujada para cada visema.
¿Cuántos visemas ofrece Azure Speech?
Azure Speech ofrece 22 ID de visema, del 0 para el silencio al 21 para p, b y m. El Speech SDK los entrega mediante el evento VisemeReceived, con el desfase del audio en ticks de 100 nanosegundos, así que divide entre 10 000 para obtener milisegundos. Azure también puede devolver fotogramas de blend shapes de 55 valores a 60 fps, y animaciones de visemas 2D en SVG, que solo están disponibles para voces en-US.
¿Cómo funcionan las speech marks de visemas de Amazon Polly?
Cuando solicitas speech marks, Polly devuelve metadatos en lugar de audio: un flujo JSON delimitado por líneas en el que cada objeto tiene un time en milisegundos desde el inicio del audio, un type (sentence, word, viseme o ssml) y un value, que en los visemas es el nombre del visema. Obtén el audio por separado y programa los eventos según su reloj de reproducción.
¿Cómo detecto si habla o escucha con el SDK de React de ElevenLabs?
El hook useConversation expone mode, que vale 'speaking' o 'listening', además de los booleanos isSpeaking e isListening y un callback onModeChange. El estado de conexión pasa por disconnected, connecting y connected. Para visuales que reaccionan al audio tienes getInputVolume() y getOutputByteFrequencyData(), y los hooks granulares reducen los re-renders.
Lee la guía: Avatar de agente de ElevenLabs con onModeChange
¿Qué estados admite el componente Persona de AI Elements?
Persona admite cinco estados: idle, listening, thinking, speaking y asleep. Se renderiza con Rive sobre WebGL2 y viene en seis variantes: Obsidian (la predeterminada), Mana, Opal, Halo, Glint y Command. Sus props documentadas son state, variant, className y callbacks de ciclo de vida. La documentación no explica cómo cargar tu propio .riv, así que para un personaje de marca necesitas tu propio componente.
Lee la guía: AI Elements Persona vs un personaje de Rive a medida
¿Un avatar de Rive debería seguir renderizándose cuando está fuera de pantalla?
No. Las buenas prácticas de Rive recomiendan llamar a la API de pausa cuando un gráfico sale de la pantalla con el scroll y no necesita seguir reproduciéndose. Detecta la visibilidad con un IntersectionObserver, gestiona las pestañas en segundo plano con la Page Visibility API y llama a rive.pause() o rive.play() cuando cambie cualquiera de las dos. Pausar también ahorra CPU y batería mientras nadie está mirando un loop en reposo.
Lee la guía: Animación de avatar de IA accesible y rápida en la web
¿Por qué mi avatar de Rive se reinicia con cada mensaje del chat?
Porque React está volviendo a montar su canvas. Rive advierte que desmontar o recrear el canvas puede reiniciar la animación o hacer que desaparezca. Mantén useRive y RiveComponent en un solo componente, renderízalo una vez fuera de la lista de mensajes, evita una key ligada al id del mensaje y cambia el estado a través del view model en lugar de intercambiar componentes.
Lee la guía: Anima un avatar de chat con eventos de streaming
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Stickers y emoji
¿Cuáles son los requisitos de los stickers de video de Telegram?
Los stickers de video de Telegram deben ser archivos .WEBM codificados con VP9, con un lado de exactamente 512 px y el otro de 512 px o menos. Pueden durar como máximo 3 segundos, ir a un máximo de 30 fps, pesar como máximo 256 KB y no llevar pista de audio, y deberían estar en loop. Los emoji de video siguen las mismas reglas, pero con exactamente 100×100 px.
Lee la guía: Stickers de video para Telegram a partir de una animación de personaje
¿Qué tamaño tiene un emoji personalizado de Telegram?
Un emoji personalizado de video de Telegram debe medir exactamente 100×100 píxeles. Por lo demás, sigue las reglas de los stickers de video: WEBM con VP9, como máximo 3 segundos, hasta 30 fps, 256 KB como máximo y sin audio. Pasa sticker_type "custom_emoji" al método createNewStickerSet de la Bot API para crear un set de emoji en lugar de un set de stickers normal.
Lee la guía: Stickers de video para Telegram a partir de una animación de personaje
¿Cuáles son los límites de los stickers animados .TGS?
Los stickers animados .TGS son un subconjunto de Lottie exportado con el plugin Bodymovin-TG de Telegram para After Effects. El lienzo debe ser de 512×512 y los objetos no pueden salirse de él; las animaciones deben estar en loop, ir a 60 fps, durar como máximo 3 segundos y no superar 64 KB tras la compresión gzip. Las expresiones, máscaras, imágenes, textos y capas 3D están entre las funciones prohibidas.
Lee la guía: Stickers de video para Telegram a partir de una animación de personaje
¿Qué tamaño deben tener los stickers animados de WhatsApp?
Los stickers animados de WhatsApp deben medir exactamente 512×512 píxeles y pesar 500 KB o menos, en formato WebP. Cada fotograma debe durar al menos 8 ms y la animación completa, como máximo 10 segundos. Un paquete necesita de 3 a 30 stickers, no puede mezclar stickers estáticos y animados, y necesita un ícono de bandeja estático de 96×96 que pese 50 KB o menos.
Lee la guía: Stickers animados de WhatsApp: especificaciones y conversión
¿Por qué mi sticker de WhatsApp se congela en el primer fotograma?
Es intencional: WhatsApp termina la animación en el primer fotograma después de repetirla. El README oficial de stickers dice: "the first frame should say it all" (el primer fotograma debería decirlo todo). Empieza cada clip con una pose completa y legible, como la cara neutral en reposo del personaje, y no con un fotograma de transición, un parpadeo con los ojos cerrados o un fotograma vacío.
Lee la guía: Stickers animados de WhatsApp: especificaciones y conversión
¿Qué tamaño tienen los stickers de iMessage?
Apple especifica los tamaños de los stickers de iMessage en píxeles @3x: el pequeño es de 300×300, el normal de 408×408 y el grande de 618×618. Usa un solo tamaño para todo el paquete, porque Apple indica que no se deben mezclar tamaños, y mantén cada archivo en 500 KB o menos. Para animación, APNG conserva la transparencia de 8 bits, mientras que GIF solo admite transparencia de un único color.
Lee la guía: Paquete de stickers animados para iMessage: tamaños y APNG
¿Cuál es el límite de peso de archivo para los emoji animados de Discord?
Según su documentación de la API, Discord limita los emoji y los emoji animados a 256 KiB cada uno, subidos como JPEG, PNG, GIF, WebP o AVIF. La documentación no fija un tamaño en píxeles; 128×128 es la recomendación más citada. Los stickers tienen límites propios: PNG, APNG, GIF o Lottie, 320×320 px, 5 segundos como máximo si son animados y 512 KiB.
Lee la guía: Especificaciones de emoji y stickers animados de Discord
¿Cualquier servidor de Discord puede subir stickers Lottie?
No. Según la documentación para desarrolladores de Discord, solo los servidores con la guild feature VERIFIED o PARTNERED pueden subir stickers Lottie. Los demás servidores pueden subir stickers animados en APNG o GIF. Esos archivos deben medir 320×320 px, durar como máximo 5 segundos y pesar no más de 512 KiB, los mismos límites que se aplican a todos los stickers subidos.
Lee la guía: Especificaciones de emoji y stickers animados de Discord
¿Qué requisitos tiene Slack para los emojis personalizados?
Slack acepta emoji personalizados en archivos JPG, PNG o GIF. Su centro de ayuda indica que las imágenes cuadradas de menos de 128 KB con fondo transparente funcionan mejor, y que los GIF pueden incluir hasta 50 fotogramas. Slack no indica un tamaño obligatorio en píxeles; 128×128 es una convención habitual que también ayuda a que los GIF animados se mantengan por debajo de 128 KB.
Lee la guía: Emoji personalizados animados de Slack con tu mascota de marca
¿Por qué ffmpeg pierde la transparencia de mi WebM?
El decodificador VP9 integrado de ffmpeg ignora el canal alfa guardado en un WebM. Para conservar la transparencia, pon -c:v libvpx-vp9 antes de -i para que libvpx decodifique el archivo, y codifica las salidas con alfa usando -pix_fmt yuva420p. ffprobe suele mostrar yuv420p aunque haya alfa, así que busca en su lugar la etiqueta ALPHA_MODE=1.
Lee la guía: Convierte WebM con fondo transparente a cualquier formato de sticker
¿Cómo convierto un WebM transparente en un WebP animado para WhatsApp?
Usa el codificador libwebp_anim de ffmpeg: decodifica la entrada con -c:v libvpx-vp9 antes de -i, escala y rellena a 512×512 con un color de relleno transparente y luego codifica con -c:v libwebp_anim -quality 60 -loop 0. El ajuste -loop 0 es importante, porque el muxer WebP de ffmpeg reproduce una sola vez por defecto. Si pasa de 500 KB, baja la calidad o los fps.
Lee la guía: Convierte WebM con fondo transparente a cualquier formato de sticker
¿Cómo hago un GIF transparente con ffmpeg sin halos?
Genera una paleta y aplícala en un solo filter graph: divide el flujo, ejecuta palettegen=reserve_transparent=1 en una rama y luego paletteuse=alpha_threshold=128. Trabajar a partir de un alfa real evita halos de mate incrustados. GIF solo admite transparencia de todo o nada, así que los bordes suaves se recortan con un umbral; usa APNG o WebP donde la plataforma lo permita.
Lee la guía: Convierte WebM con fondo transparente a cualquier formato de sticker
¿Cómo agrego una mascota de marca animada a OBS?
Agrega una Media Source, elige un WebM VP9 transparente como archivo local y activa Loop para un acompañante en reposo (idle). OBS lee la etiqueta alpha_mode del WebM y lo decodifica con libvpx, así que el fondo se mantiene transparente. Para una mascota de marca que cambie de estado con eventos, carga en su lugar una página web con un archivo de Rive en una Browser Source.
Lee la guía: Agrega una mascota de marca animada como overlay en OBS
¿Qué tamaño tienen los emotes animados de Twitch?
Los emotes animados de Twitch son GIF cuadrados. En el modo de redimensionado automático subes un GIF de 112×112 a 4096×4096 px, de hasta 1 MB. En el modo manual subes tres GIF de 28×28, 56×56 y 112×112 px, de hasta 512 KB cada uno. Cada GIF está limitado a 60 fotogramas y no puede parpadear más de 3 veces por segundo.
Lee la guía: Emotes animados de Twitch a partir de la animación de una mascota de marca
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Más frameworks y herramientas no-code
¿Existe un paquete oficial de Rive para Vue?
No. Rive no ofrece un runtime para Vue, así que las apps con Vue 3 y Nuxt usan directamente el runtime web @rive-app/canvas: crea la instancia en onMounted con autoBind: true, asigna las propiedades del view model desde un watcher y llama a cleanup() en onUnmounted. En Nuxt, renderiza el componente solo en el cliente, porque canvas y WASM necesitan un navegador.
Lee la guía: Rive en Vue 3 y Nuxt: configuración, Data Binding y SSR
¿Cómo uso Rive en SvelteKit?
Instala @rive-app/canvas y crea la instancia de Rive dentro de onMount, que nunca se ejecuta durante el renderizado en el servidor, así que puedes mantener SSR activado. Mantén el callback síncrono y devuelve una función que llame a cleanup(). Coloca el .riv en static/ y cárgalo desde la ruta raíz. Svelte no tiene un runtime oficial de Rive.
¿ng-rive sigue teniendo mantenimiento?
No por parte de Rive, así que considéralo heredado (legacy). La documentación antigua de Rive para Angular sobre ng-rive se marcó como desactualizada, y la documentación actual de Rive incluye en su lugar el wrapper comunitario Grandgular, que requiere Angular 18 o posterior y tiene pocos usuarios. Rive no mantiene ninguno de los dos, por eso muchos equipos llaman a @rive-app/canvas directamente desde un componente y hacen la limpieza en ngOnDestroy.
Lee la guía: Rive en Angular: wrapper de la comunidad vs canvas directo
¿Rive funciona en Expo Go?
No. El paquete de Rive para React Native contiene código nativo personalizado, así que Expo Go no puede cargarlo. Instala expo-dev-client y @rive-app/react-native, y luego ejecuta una development build en local o con EAS. La guía de Expo de Rive indica SDK 53 o posterior e iOS 15.1 o posterior, y algunas builds de Android con SDK 53 necesitan compileSdkVersion 36.
Lee la guía: Rive en Expo: requiere un development build (no Expo Go)
¿Por qué falla mi build de Android con Expo SDK 53 después de agregar Rive?
El SDK de Rive para Android requiere compileSdkVersion 36 y Android Gradle Plugin 8.9.1 o posterior, mientras que Expo SDK 53 usa versiones más bajas por defecto. Súbelas con los config plugins expo-build-properties y expo-custom-agp en app.json, luego ejecuta npx expo prebuild --clean y vuelve a compilar la development build.
Lee la guía: Rive en Expo: requiere un development build (no Expo Go)
¿FlutterFlow es compatible con animaciones de Rive?
Sí, para reproducir. El widget RiveAnimation integrado de FlutterFlow carga un .riv desde un asset o una URL, con selectores de artboard y de animación y una acción Rive Animation. Su documentación no cubre los inputs de la máquina de estados (state machine) ni Data Binding, así que para cambiar un estado de ánimo o disparar triggers necesitas un widget personalizado basado en el paquete de Flutter rive.
Lee la guía: Rive y Lottie en FlutterFlow: widgets y límites
¿Cómo agrego Rive a un sitio de Wix?
Wix Studio tiene un elemento nativo de Rive: sube el .riv al Media Manager y luego elige el artboard y la máquina de estados. Si los eventos de la página deben cambiar la animación, usa el elemento HTML iFrame con el script @rive-app/canvas y un .riv servido por HTTPS. Para Lottie, el elemento nativo de Lottie de Wix Studio acepta URLs JSON de LottieFiles. En páginas sencillas, una exportación MP4 o WebM sin sonido funciona sin nada de código.
¿Existe un plugin de Rive para Bubble?
Existe uno, pero es antiguo. Rive anunció un plugin para Bubble en agosto de 2021 y, para 2023, los usuarios del foro preguntaban si todavía se mantenía. Una ruta más fiable es el elemento HTML de Bubble ejecutando el script @rive-app/canvas. Para Lottie, LottieFiles publica un plugin oficial para Bubble que acepta una URL JSON.
¿Cómo uso Rive en Astro?
No necesitas un framework de UI: agrega un canvas y un <script> que importe @rive-app/canvas en el archivo .astro. Si ya tienes un componente de mascota de marca en React, Vue o Svelte, renderízalo como una isla con client:visible, que lo hidrata cuando entra en el viewport y mantiene el WASM de Rive fuera de la ruta crítica.
Lee la guía: Rive en Astro: islas, client:visible y WASM con carga diferida
¿Rive es compatible con Compose Multiplatform?
Solo mediante un wrapper comunitario. La documentación de Rive incluye RiveCMP, que envuelve rive-android, rive-ios y @rive-app/canvas tras una única API de Compose, pero Rive no es su dueño ni lo mantiene, y su README lo describe como experimental. En iOS no puede renderizar fondos transparentes, así que pruébalo en dispositivos reales antes de publicar.
Lee la guía: Rive en Compose Multiplatform e Ionic/Capacitor
¿Rive funciona sin conexión en apps de Ionic o Capacitor?
Sí puede. Las apps de Capacitor ejecutan código web, así que @rive-app/canvas funciona, pero por defecto el runtime descarga rive.wasm desde un CDN. Para que arranque sin conexión, incluye rive.wasm con tus assets y llama a RuntimeLoader.setWasmUrl() antes de crear cualquier instancia. La versión del wasm debe coincidir con la versión instalada del paquete @rive-app.
Lee la guía: Rive en Compose Multiplatform e Ionic/Capacitor
¿Cómo uso Lottie en Vue 3 o Svelte?
Usa los componentes dotLottie de LottieFiles: @lottiefiles/dotlottie-vue ofrece DotLottieVue para Vue 3, y @lottiefiles/dotlottie-svelte ofrece DotLottieSvelte. Ambos reproducen archivos .lottie y .json. Ninguno ofrece Data Binding con view model al estilo de Rive, así que para cambiar el estado de ánimo de un personaje tienes que cambiar archivos o segmentos por tu cuenta. Instala cualquiera de los dos con npm.
Lee la guía: Rive en Vue 3 y Nuxt: configuración, Data Binding y SSR
Comparaciones
¿Rive es más rápido que Lottie?
A veces, pero hay poca evidencia independiente. La única comparación directa neutral que encontramos es la prueba de Callstack de 2023 en React Native con un Xperia Z3 antiguo: unos 60 FPS con Rive frente a 17 con Lottie, aunque Rive usó más memoria. La documentación de Rive añade que el perfilado en iOS da resultados engañosos si no incluyes el proceso backboardd de Apple.
¿Los archivos de Rive pesan menos que los de Lottie?
A menudo, pero las cifras grandes son afirmaciones del propio fabricante. Rive dice que los archivos .riv suelen ser de 10 a 15 veces más pequeños que el JSON de Lottie equivalente, y cita un Lottie de 240 KB recreado en 16 KB. De forma independiente, Callstack recreó un Lottie de 24.37 KB como un .riv de 2 KB. Los archivos .lottie comprimidos reducen la diferencia, así que compara archivos más runtimes.
¿Cuánto pesa el runtime de Rive?
Rive indica que sus paquetes web pesan 222 KB (canvas-lite), 567 KB (canvas) y 648 KB (webgl2) comprimidos con brotli; nosotros medimos canvas-lite 2.44.0 en unos 373 KB. En nativo añade unos 1.67 MB al tamaño de descarga en iOS y 2.40 MB en Android arm64. Como referencia, la build completa de lottie-web pesa unos 76 KB con gzip.
¿Rive puede importar archivos Lottie?
Sí, el editor de Rive puede importar JSON de Lottie, pero toma el resultado como punto de partida. Rive dice que los archivos importados no se optimizan automáticamente, y que modos de fusión como Plus, Add y Hard Mix no son compatibles. Su documentación indica que la función está en los planes Enterprise, mientras que su página de precios muestra los planes de pago, así que confírmalo antes de comprar.
Lee la guía: Convierte Lottie a Rive (y Rive a Lottie o video)
¿Puedo convertir un archivo de Rive a Lottie?
En parte. LottieFiles ofrece un conversor online gratis de Rive a Lottie para archivos .riv de hasta 20 MB, pero no convierte las máquinas de estados, así que solo conservas la animación de la línea de tiempo. Rive en sí no exporta a Lottie; su editor exporta archivos .riv y, en los planes de pago, formatos de video e imagen.
Lee la guía: Convierte Lottie a Rive (y Rive a Lottie o video)
¿El plan gratis de Rive puede exportar video?
No. La documentación de exportación de Rive dice que las exportaciones de video e imagen, incluidas H.264, GIF, WebM y secuencias PNG, solo están disponibles en los planes de pago, y que las exportaciones .riv del plan gratis muestran una splash screen de Rive. En octubre de 2026, el plan de pago más barato es Cadet, a $9 por puesto al mes; los precios cambian.
Lee la guía: Editor de Rive vs Lottie Creator vs After Effects: costo
¿Cuánto cuesta Lottie Creator?
Lottie Creator está incluido en los planes de pago de LottieFiles. En octubre de 2026, su página de precios muestra Individual a $19.99 al mes y Team a $24.99 al mes, ambos con facturación anual, y Team+ y Enterprise con precio a consultar. Revisa la página para conocer los límites actuales del plan gratis, que no pudimos verificar.
Lee la guía: Editor de Rive vs Lottie Creator vs After Effects: costo
¿Qué es un archivo .lottie?
Un archivo .lottie (dotLottie) es un archivo ZIP, comprimido con Deflate, que agrupa una o más animaciones JSON de Lottie con sus imágenes, temas y máquinas de estados. Dentro hay un manifest.json y carpetas para animaciones, imágenes, máquinas de estados y temas; su tipo MIME es application/zip+dotlottie.
¿dotLottie pesa menos que Lottie JSON?
Normalmente sí, porque está comprimido en ZIP. LottieFiles afirma que los archivos .lottie son alrededor de un 80% más pequeños que el JSON, y su página de precios dice que los formatos optimizados reducen el peso hasta un 80%; ambas son afirmaciones del fabricante. El ahorro real depende de la animación y de si tu servidor ya comprime el JSON durante la transferencia.
¿Lottie tiene máquinas de estados?
Sí, mediante dotLottie. Lottie Creator agregó máquinas de estados visuales en septiembre de 2025. La especificación admite inputs numéricos, de texto, booleanos y de evento, interacciones de puntero y de finalización, guards, transiciones interpoladas y acciones como SetTheme y OpenUrl. Funcionan en los reproductores dotLottie, no en los reproductores clásicos solo para JSON como lottie-web.
Lee la guía: Lottie vs Rive: máquinas de estados y Data Binding
¿Lottie pesa menos que un GIF?
Para animación vectorial plana, normalmente por mucho: LottieFiles cita el caso de The Washington Post, que convirtió un GIF de 2 MB en un JSON de Lottie de 385 KB, un ejemplo publicado por el fabricante. Además, los GIF solo tienen transparencia de 1 bit y 256 colores. Pero un Lottie necesita una biblioteca de reproducción, mientras que un GIF se reproduce en cualquier lugar donde se muestre una imagen.
Lee la guía: Lottie vs GIF: peso, calidad y dónde funciona cada uno
¿Se pueden usar animaciones Lottie en el correo electrónico?
No de forma fiable. Un archivo Lottie necesita un reproductor JavaScript o nativo para renderizarse, y los clientes de correo no ejecutan scripts en los mensajes. Para email, usa un GIF animado, mantenlo corto y haz que el primer fotograma tenga sentido por sí solo, porque algunos clientes solo muestran ese fotograma.
Lee la guía: Lottie vs GIF: peso, calidad y dónde funciona cada uno
¿Debo usar Lottie o animación CSS?
Usa CSS para el movimiento de la interfaz, como hovers, fundidos y spinners: no añade ninguna descarga, y web.dev recomienda animar transform y opacity para una reproducción fluida. Usa Lottie cuando un diseñador haya creado una ilustración compleja en After Effects o Lottie Creator que sería poco práctico recrear con keyframes de CSS.
Lee la guía: Lottie vs SVG y animación CSS: cuándo gana cada uno
¿lottie-react-native requiere la New Architecture?
Sí. El README actual de lottie-react-native dice que el paquete requiere React Native 0.84 o posterior y la New Architecture. Admite archivos .lottie tras un cambio en la configuración de Metro, y en la web usa @lottiefiles/dotlottie-react. En comparación, el runtime Nitro de Rive necesita React Native 0.78 o posterior.
Lee la guía: Lottie vs Rive en React Native y Flutter (2026)
¿El paquete lottie de Flutter es oficial?
No. El popular paquete lottie de pub.dev es un port en Dart puro de lottie-android, publicado por xaha.dev. LottieFiles mantiene un plugin aparte, dotlottie_flutter, con máquinas de estados y temas. El paquete oficial de Rive para Flutter es rive, del publicador verificado rive.app, y ahora está construido sobre rive_native.
Lee la guía: Lottie vs Rive en React Native y Flutter (2026)
¿Framer Motion es una alternativa a Rive?
No realmente: cumplen funciones distintas. Motion, antes Framer Motion e independiente desde noviembre de 2024, anima tu DOM y tus componentes de React con código. Rive reproduce assets vectoriales creados por diseñadores, con máquinas de estados (state machines) dentro del archivo. Muchos sitios usan Motion para el layout y las transiciones, y Rive para una mascota de marca o un personaje.
Lee la guía: Rive vs Motion (Framer Motion): funciones distintas
¿Debo usar Rive o Spline?
Usa Rive para personajes e interfaces vectoriales 2D interactivos, y Spline para escenas 3D en tiempo real. Spline exporta código para Vanilla JS, Three.js, React, Next.js y react-three-fiber, con animaciones y eventos solo en Vanilla JS y React, y sus preguntas frecuentes mencionan exportaciones nativas y de video. Rive genera archivos .riv compactos.
¿Lottie en iOS sigue consumiendo mucha CPU?
Menos que antes. Desde lottie-ios 4.0, el motor de renderizado Core Animation es el predeterminado para las animaciones compatibles, así que la reproducción ya no hace trabajo por fotograma en el hilo principal. Las animaciones con funciones no compatibles recurren al motor anterior, que se ejecuta en el hilo principal y que, según InfoQ, podía usar entre un 5% y un 20% de CPU o más.
¿Charmotion exporta Lottie o AnimatedVectorDrawable?
No. Charmotion exporta archivos .riv de Rive con máquinas de estados, MP4 a 1080×1080, un video de inicio en 9:16, GIF, WebM con fondo transparente (VP9 alfa) y MOV (HEVC alfa), además de código para web, React y SwiftUI. No exporta Lottie JSON, dotLottie ni XML de AnimatedVectorDrawable de Android, así que un ícono animado para la splash del sistema Android tiene que dibujarse aparte.
Lee la guía: Lottie vs Rive vs video para animar un splash screenMíralo en tu app
¿Cuánto más pequeño es un archivo de Rive que los GIF de las mismas animaciones?
En nuestra medición de octubre de 2026, las 17 animaciones de una mascota plana pesaban 40 KB como un solo .riv y 8.0 MB como GIF de 480 px, unas 200 veces menos. Para un logo 3D con arte incrustado, el .riv pesaba unos 1.0 MB frente a 42.9 MB de GIF. El runtime web de Rive añade unos 373 KB una sola vez por sitio.
¿Es GIF un buen formato para un logo animado en 3D o con degradados?
Normalmente no. El GIF está limitado a 256 colores por fotograma, así que los degradados y el sombreado se tramean y los archivos crecen rápido. En nuestra prueba, un loop de 4 segundos de un logo 3D pesaba 4.4 MB como GIF de 480 px y 558 KB como MP4 de 1080 px. Usa MP4, WebM transparente o MOV HEVC, o un .riv, salvo que el destino solo acepte imágenes.
Mascotas de marca por industria
¿Mi app debería tener una mascota?
Solo si el personaje cumple una función real, como guiar el onboarding, indicar el progreso o suavizar los errores. Los estudios publicitarios atribuyen mejores resultados a los personajes de marca recurrentes, pero provienen sobre todo de proveedores como System1 y se refieren a anuncios, no a apps. Empieza con unos pocos momentos clave y haz pruebas A/B de retención antes de extenderlo.
Lee la guía: ¿Tu app debería tener mascota? Evidencia y pruebas
¿Las mascotas de marca aumentan la interacción?
La evidencia es orientativa y en su mayoría autodeclarada. System1, un proveedor de pruebas publicitarias, afirma que las campañas con personajes recurrentes tenían un 73% más de probabilidades de reportar un gran aumento de ganancias. Dentro de las apps, Duolingo informó que una nueva animación de racha aumentó en un 1.7% la retención al día 7 de los nuevos estudiantes. Ninguno de los dos datos predice qué hará una mascota de marca en tu app, así que pruébalo.
Lee la guía: ¿Tu app debería tener mascota? Evidencia y pruebas
¿Una mascota resta confianza a una app bancaria?
No necesariamente, pero su tono debe ser contenido. En pruebas de NN/g, un banco con tono conversacional se calificó como ligeramente más confiable que uno formal, mientras que un sitio de seguros con humor perdió credibilidad. Mantén la mascota amigable durante el onboarding y los momentos de éxito, y neutral o ausente en pagos fallidos, alertas de fraude y avisos legales.
Lee la guía: Mascotas de marca para apps de fintech y cripto: estados que priorizan la confianza
¿Duolingo usa Rive para sus personajes?
Sí. El blog de Duolingo describe cómo usa máquinas de estados de Rive para sincronizar los labios de sus diez World Characters, con más de 20 formas de boca, en más de 40 idiomas y más de 100 cursos. El propio blog de Rive cuenta que Lily, en la Video Call de Duolingo, combina 8 animaciones de cabeza y 8 de cuerpo en más de 64 variaciones en reposo (idle) dentro de un archivo de menos de 1 MB.
Lee la guía: Mascotas de marca para apps infantiles y educativas: lecciones de Duolingo
¿Cómo debería reaccionar la mascota de una app infantil a las respuestas incorrectas?
Con brevedad y sin avergonzar. Reproduce la reacción puntual rápida "no", vuelve a un reposo (idle) neutral y nunca pongas una cara triste en loop ante errores repetidos. Celebra las respuestas correctas más de lo que reaccionas a los errores. El Children's Code del Reino Unido también advierte contra los incentivos que aprovechan la necesidad de aprobación de los niños, sobre todo en decisiones sobre datos y privacidad.
Lee la guía: Mascotas de marca para apps infantiles y educativas: lecciones de Duolingo
¿Qué cambios de COPPA afectan a las apps infantiles en 2026?
La Regla COPPA modificada de la FTC entró en vigor el 23 de junio de 2025, y la mayoría de las obligaciones debían cumplirse a más tardar el 22 de abril de 2026. Los cambios incluyen un consentimiento parental independiente para divulgar datos de menores a terceros, la incorporación de los identificadores biométricos como información personal y la obligación de tener una política de retención de datos. Una mascota de marca que recopile voz o fotos necesita una revisión de privacidad.
Lee la guía: Mascotas de marca para apps infantiles y educativas: lecciones de Duolingo
¿Un chatbot de salud debería tener un avatar?
Puede ayudar si el avatar se mantiene sereno. Un experimento de 2025 con 160 participantes encontró que los avatares de chatbot más parecidos a humanos aumentaban la empatía percibida, lo que mejoraba la confianza y la experiencia de usuario. Los usuarios encuestados también consideran que el humor no es bienvenido en contextos serios. Usa los estados listening, thinking y talking, y elimina el movimiento lúdico en consejos urgentes y malas noticias.
Lee la guía: Avatares de chatbot de salud: empatía sin exceso de ternura
¿Por qué tantas apps de VPN usan mascotas tiernas?
Los personajes tiernos hacen que una tecnología abstracta y algo intimidante resulte accesible. Un ensayo de Flow de 2017 señala que mascotas como el oso de TunnelBear y el topo de Mullvad transmiten cercanía y sugieren que el servicio es inofensivo. Combínalos con estados de texto claros, como Protegido o No protegido, para que el personaje nunca reemplace la etiqueta de estado.
Lee la guía: Mascotas para apps de VPN y seguridad: protegido vs expuesto
¿Cómo muestro "sin protección" en una app de seguridad sin asustar a los usuarios?
Usa un estado attention tranquilo y texto sencillo en lugar de destellos rojos, sacudidas o sonidos de alarma. Muestra No protegido junto a una única acción clara, como un botón Conectar, y reserva la reacción success para cuando se restablezca la protección. Además, según WCAG 2.2.2, el movimiento que se reproduce automáticamente durante más de cinco segundos junto a otro contenido necesita un control para pausarlo.
Lee la guía: Mascotas para apps de VPN y seguridad: protegido vs expuesto
¿Una mascota de app de fitness debería celebrar cada entrenamiento?
Celebra los hitos a lo grande y las tareas rutinarias con discreción. Duolingo informó que una animación de racha mejoró la retención al día 7 de los nuevos estudiantes, y la guía de hápticos de Apple advierte contra el abuso de la respuesta háptica. Un buen patrón es una pequeña reacción "yes" por serie, un trigger success con una vibración háptica de éxito al terminar el entrenamiento y una celebración mayor solo en los hitos de racha.
Lee la guía: Mascotas entrenadoras para fitness: rachas, celebraciones y hápticos
¿Una mascota triste en una pantalla de cancelación o recordatorio es un patrón oscuro?
Puede serlo. Hacer que los usuarios se sientan culpables para que se queden o vuelvan es un patrón engañoso reconocido, llamado confirmshaming. Un estado wave o idle neutral cuando alguien se da de baja o desactiva los recordatorios está bien. Una mascota llorando acompañada de un texto como "Me estás abandonando" es manipuladora y erosiona la confianza, sobre todo en apps infantiles y de fitness.
Lee la guía: Mascotas de marca para apps infantiles y educativas: lecciones de Duolingo
¿Qué tan lúdica debería ser una mascota de marca en cada industria?
Ajusta el tono lúdico a lo que los usuarios pueden perder en cada pantalla. Las apps infantiles, educativas y de fitness pueden ser muy lúdicas; las de seguridad, moderadamente; las de finanzas y salud deben ser contenidas. NN/g comprobó que el humor dañó la credibilidad de una aseguradora. En cualquier industria, evita el movimiento lúdico en malas noticias, advertencias, avisos legales y pantallas de consentimiento.
Lee la guía: Tono de la mascota de marca por sector: matriz de estados
¿Qué debería hacer la mascota de una app de hábitos cuando me salto un día?
Mantén un tono amable y ofrece un pequeño nuevo comienzo, no una cara triste. Silverman y Barasch observaron que las rachas rotas suelen reducir la participación posterior, y los investigadores dicen que los mensajes que insisten en la interrupción normalmente no funcionan. Muestra un estado idle o wave, indica la racha con claridad y sugiere una meta nueva y más corta.
Lee la guía: Mascotas virtuales para apps de hábitos: rachas sin culpa
¿Debería una app de salud mental usar una mascota de marca?
Puede funcionar, si la mascota se mantiene tranquila y no estorba. Usa loops lentos de idle, listening y sleeping, y loops suaves de happy. Nunca reproduzcas las animaciones error, no o sad junto a los sentimientos del usuario, respeta la opción Reducir movimiento (Reduce Motion) y quita el personaje de las pantallas de crisis para que la ayuda aparezca con un solo toque y sin movimiento decorativo.
Lee la guía: Mascotas para apps de salud mental: estados tranquilos y reglas para crisis
¿Un producto de IA debería tener una mascota o un orbe abstracto?
Cualquiera de las dos funciona: elige una mascota para lograr reconocimiento y un estado fácil de leer, y un orbe para transmitir neutralidad. Fast Company llama cutewashing a la carrera por crear personajes de agente tiernos, y NN/g advierte que humanizar la IA aumenta la confianza excesiva. Elijas lo que elijas, indica en texto simple lo que está haciendo el agente y mantenlo fuera de las pantallas de permisos.
Lee la guía: ¿Tu producto de IA debería tener una mascota? Personaje vs orbe
¿Cuándo debería la mascota de un SaaS hacerse a un lado para los usuarios avanzados?
Cuando una pantalla se vuelve rutinaria. Vincula los estados del onboarding a la checklist de configuración para que desaparezcan con ella. Reserva la mascota para momentos poco frecuentes, como el final de una importación, los estados vacíos y la página 404, y agrega un ajuste para ocultarla. Las HIG de Apple desaconsejan usar movimiento en interacciones que se repiten con frecuencia.
Lee la guía: Mascotas para SaaS B2B: onboarding, estados vacíos y 404
¿Cómo debe reaccionar una mascota de checkout ante un pago fallido?
No debería reaccionar. Oculta el personaje o déjalo quieto, y deja que un texto tranquilo diga que el pago no se procesó, conserva el carrito y ofrece otro método. Stripe señala que la mayoría de los rechazos del emisor son genéricos y que algunos motivos no deberían mostrarse a los clientes, así que no culpes al usuario y evita las animaciones error o sad relacionadas con dinero.
Lee la guía: Animación de mascota para el checkout: pagos, pedidos y correos
¿Qué estado de la mascota corresponde a cada estado del pedido de comida?
El pedido realizado recibe una reacción success, la preparación un loop loading, el repartidor por llegar un loop attention y la entrega otra reacción success. Los retrasos llevan un idle tranquilo con la nueva hora estimada de llegada, y las cancelaciones un idle tranquilo o un breve loop sad junto a los detalles del reembolso. En las Live Activities, usa imágenes fijas pequeñas, porque el sistema solo anima los cambios de contenido.
Lee la guía: Mascotas para apps de delivery de comida: del estado del pedido al estado de ánimo
¿Qué formato de video funciona en pantallas de señalización digital?
Un MP4 H.264 sin audio con la resolución de la pantalla, normalmente 1920×1080 en horizontal o 1080×1920 en vertical. Yodeck vuelve a codificar las cargas en H.264 hasta 1080p, y ScreenCloud transcodifica el video a MP4 H.264, pero convierte los GIF en JPG fijos. Repite los clips cortos en loop dentro de un archivo más largo y usa la misma orientación que la pantalla.
Lee la guía: Logos animados para pantallas de cafeterías, gimnasios y tiendasMíralo en tu app
¿Puedo animar la mascota de mi escuela?
Solo si tu institución es la dueña y su oficina de marca lo aprueba, o si tienes permiso por escrito. Las oficinas de marcas registradas, como la de Syracuse, prohíben modificar las marcas sin aprobación por escrito, y una mascota dibujada por un voluntario puede seguir perteneciendo al artista, salvo que los derechos se hayan cedido por escrito. Consigue ambos permisos por escrito y después súbela.
Lee la guía: Cómo animar la mascota de una escuela u ONG: derechos, escudos y pantallas
¿Cómo muestro otro GIF en el modo oscuro de GitHub?
Envuelve dos GIF en un elemento picture: un source con media="(prefers-color-scheme: dark)" que apunte al GIF con fondo oscuro, otro para el fondo claro y un img de respaldo con texto alternativo. GitHub lo admite en Markdown desde 2022. Crea cada GIF sobre su propio fondo, porque GIF no admite transparencia parcial suave.
Lee la guía: GIF de mascota para el README de proyectos open source: peso, modo oscuro y licencias
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Formatos de marketing
¿La miniatura de Product Hunt puede ser un GIF?
Sí, si pesa menos de 3 MB. Product Hunt recomienda una miniatura cuadrada de 240×240, y un GIF animado solo se reproduce mientras alguien pasa el cursor sobre la publicación. Product Hunt también desaconseja los GIF con destellos, cortes rápidos o texto ilegible, así que usa un loop tranquilo con un primer fotograma claro.
Lee la guía: Especificaciones de GIF y galería para lanzar en Product Hunt
¿Qué tamaño tienen las imágenes de la galería de Product Hunt?
Product Hunt recomienda 1270×760 para las imágenes de la galería, y la galería necesita al menos dos imágenes para poder verse. Puedes subir varias a la vez. Los videos de lanzamiento deben ser enlaces de YouTube, pegados como URL completa y no acortada, y el video no puede ser privado.
Lee la guía: Especificaciones de GIF y galería para lanzar en Product Hunt
¿Funcionan los GIF animados en las firmas de correo de Outlook?
Solo en parte. Outlook para Windows 2007 a 2019 no anima los GIF, y Outlook con Microsoft 365 en Windows reproduce la animación tres veces y luego muestra un botón de reproducción. Apple Mail, Gmail y Yahoo reproducen los GIF con normalidad. Litmus aconseja que el primer fotograma funcione como alternativa estática completa.
Lee la guía: Logo animado en firmas de email: compatibilidad con GIF
¿Qué tamaño debe tener un GIF para la firma de correo?
Mantenlo por debajo de unos 200 KB y con unos 100 a 150 px de ancho; no existe un estándar oficial. Xink, proveedor de firmas, recomienda menos de unos 200 KB con unos 10 a 15 fotogramas, e indica que Gmail limita las firmas a 10 000 caracteres, así que aloja la imagen en una URL pública en lugar de pegarla directamente. Un ancho de visualización de unos 100 a 150 px funciona para la mayoría de las firmas.
Lee la guía: Logo animado en firmas de email: compatibilidad con GIF
¿Qué tamaño tiene la marca de agua de un video de YouTube?
Al menos 150×150 píxeles, cuadrada y de menos de 1 MB. Puedes mostrarla durante los últimos 15 segundos de un video, desde un momento de inicio personalizado o durante todo el video. Las marcas de agua no aparecen en los videos configurados como creados para niños, y la foto de perfil del canal no puede ser un GIF animado.
Lee la guía: Intro de YouTube y logo animado: buenas prácticas
¿Cuánto debe durar una intro de YouTube?
Unos pocos segundos. YouTube no publica una duración oficial, pero su blog para creadores dice que los primeros segundos son críticos. Recomienda abrir con una pregunta o entrando directamente en el contenido, decirles a los espectadores qué verán en unos cinco segundos e integrar la marca en lugar de usar una larga animación de logo independiente.
Lee la guía: Intro de YouTube y logo animado: buenas prácticas
¿Cuáles son las especificaciones de video de LinkedIn?
LinkedIn acepta videos de 75 KB a 5 GB y de 3 segundos (2 en móvil) a 15 minutos. La resolución puede ir de 256×144 a 4096×2304, y la relación de aspecto de 1:2.4 a 2.4:1, con una frecuencia de 10 a 60 fps y una tasa de bits de 192 kbps a 30 Mbps. LinkedIn advierte que es posible que los archivos ProRes no se procesen.
Lee la guía: Especificaciones de video, logo y banner de LinkedIn para animación
¿Qué tamaño tiene el logo de una página de empresa en LinkedIn?
LinkedIn recomienda un logo de 400×400, con un mínimo de 268×268. Todas las imágenes de la página deben ser archivos PNG o JPEG de hasta 3 MB, así que el logo y la portada no pueden ser animados. Para mostrar un logo animado o una mascota de marca en LinkedIn, compártelo como video MP4 en una publicación.
Lee la guía: Especificaciones de video, logo y banner de LinkedIn para animación
¿Qué tamaño tiene el gráfico de funciones de Google Play?
1024×500 píxeles, en JPEG o PNG de 24 bits sin transparencia. Se muestra como portada de tu video de vista previa. Google Play no permite subir videos: agregas una URL de YouTube pública o no listada, con los anuncios desactivados. El ícono de la tienda es un PNG de 32 bits de 512×512 y hasta 1024 KB.
Lee la guía: Especificaciones del gráfico destacado y el video promocional de Google Play
¿Cuáles son las zonas seguras de Instagram Reels?
Las especificaciones de anuncios de Reels de Meta indican que mantengas el texto, los logos y los elementos clave fuera del 14% superior, del 35% inferior y del 6% de cada lado del encuadre 9:16. En un video de 1080×1920, eso deja un área de aproximadamente 950×979 píxeles en la parte media superior para todo lo que la gente deba leer.
Lee la guía: Especificaciones de video 9:16: Reels, TikTok, YouTube Shorts
¿Cuánto puede durar un YouTube Short?
Hasta tres minutos, para videos cuadrados o verticales subidos a partir del 15 de octubre de 2024. YouTube bloquea en todo el mundo cualquier Short de más de un minuto que tenga un reclamo de derechos de autor activo, así que usa música original o con la licencia adecuada si tu Short dura más de un minuto.
Lee la guía: Especificaciones de video 9:16: Reels, TikTok, YouTube Shorts
¿Cuáles son las especificaciones de video para anuncios in-feed de TikTok?
Los anuncios in-feed de TikTok que no son Spark aceptan 9:16 a 540×960 o más, 16:9 a 960×540 o más, o 1:1 a 640×640 o más. Los archivos pueden ser .mp4, .mov, .mpeg, .3gp o .avi, de hasta 500 MB, con 516 kbps o más y hasta 10 minutos de duración.
Lee la guía: Especificaciones de video 9:16: Reels, TikTok, YouTube Shorts
¿Dónde puede reproducirse realmente un ícono de app animado?
Dentro de tu app y en tu marketing, pero no en la pantalla principal (Home Screen) ni como ícono de la ficha de la tienda: una intro de inicio en la primera pantalla de tu app, el splash de Android 12+ como AnimatedVectorDrawable, estados de carga y estados vacíos dentro de la app, la sección hero de tu sitio web como WebM con fondo transparente y MOV HEVC, vistas previas de App Store grabadas desde la app, un video de vista previa de YouTube para Google Play y videos 9:16 para redes sociales. Los íconos de la ficha de la tienda siguen siendo imágenes fijas.
Lee la guía: Dónde usar un ícono de app animado: sitio web, kit de prensa y video de lanzamiento
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Rive y máquinas de estados
¿Puedo convertir un GIF a Rive?
No en una animación de Rive real. Un GIF es una pila de fotogramas de píxeles, mientras que un .riv guarda formas, huesos y keyframes, y el editor de Rive importa imágenes, no GIF ni video. Puedes colocar fotogramas exportados en una línea de tiempo como secuencia de imágenes, pero resulta pesado. La mejor vía es riggear un fotograma limpio en Rive.
Lee la guía: Convertir un GIF, video o PNG a Rive o Lottie: qué es posible
¿Puedo convertir un PNG a Lottie?
Sí, pero la conversión solo te da un punto de partida estático. Lottie Creator importa un PNG como capa de imagen o lo vectoriza, y el conversor de Recraft vectoriza PNG planos en Lottie JSON listo para animar. Ninguno agrega el movimiento. Aun así tienes que crear los keyframes en Lottie Creator o After Effects. Las fotos y el arte pintado se vectorizan mal.
Lee la guía: Convertir un GIF, video o PNG a Rive o Lottie: qué es posible
¿Cómo convierto un archivo .riv a MP4?
Abre el proyecto fuente en el editor de Rive, agrega un Render Preset en el modo Animate, elige H.264 (o GIF, WebM o una secuencia PNG), define los FPS, la duración y el tamaño, y renderízalo desde la Render Queue. Rive indica que la exportación de video e imágenes está disponible en los planes de pago. Un .riv por sí solo solo se puede grabar en pantalla.
Lee la guía: Convertir un GIF, video o PNG a Rive o Lottie: qué es posible
¿Rive funciona en Unity?
Sí. El runtime oficial de Rive para Unity es compatible con Unity 2021 LTS y versiones posteriores, incluido Unity 6, en WebGL, Metal, D3D11, D3D12, OpenGL y Vulkan; las consolas figuran como planificadas. Instálalo desde la Asset Store o con una URL de git, muestra los archivos en uGUI con un Rive Panel y un Rive Widget, y contrólalos mediante Data Binding en C#.
Lee la guía: Mascota de Rive en la UI de Unity: instalación, uGUI y Data Binding
¿Rive tiene un runtime para Unreal Engine?
Sí. Rive documenta un runtime para Unreal Engine 5.7.3 y versiones posteriores, con máquinas de estados y Data Binding de view models. Incluye Windows, macOS, PlayStation 5, Nintendo Switch y Switch 2, Xbox Series X y Steam Deck, y visionOS en fase experimental. La compatibilidad con móviles está planificada, pero aún no está disponible, y los inputs heredados de las máquinas de estados están obsoletos.
Lee la guía: Mascota de Rive en la UI de Unity: instalación, uGUI y Data Binding
¿Los prototipos de Figma pueden reproducir archivos de Rive?
No. Figma no tiene forma de ejecutar un .riv dentro de un prototipo, y una respuesta en el foro de Figma que cita al fundador de Rive dice que el código de Figma no permite el acceso necesario. Como sustitutos, usa GIF animados, que se reproducen en la vista de presentación, o rellenos de video (MP4 H.264 o MOV, WebM VP8, en planes de pago), y entrega a los desarrolladores el .riv real.
Lee la guía: Animación de mascota en prototipos de Figma y handoff a desarrollo
¿Qué es Rive?
Rive es una herramienta de animación interactiva con runtimes de código abierto para web, React, iOS, Android, Flutter y React Native. Las animaciones se exportan como un único archivo .riv que puede contener una máquina de estados (state machine), así que el mismo archivo cambia entre reposo (idle), éxito, error y otros estados cuando el código de tu app modifica sus inputs.
Lee la guía: ¿Qué es Rive? La animación interactiva explicada
¿Rive es gratis?
En parte. Los runtimes de Rive que reproducen archivos .riv tienen licencia MIT y son gratis para apps comerciales. El editor de Rive tiene un plan gratis, pero sus exportaciones muestran una splash screen de Rive; los planes de pago la eliminan, y la exportación de video desde el editor es una función de pago. Consulta rive.app/pricing para ver los precios actuales.
Lee la guía: ¿Qué es Rive? La animación interactiva explicada
¿Cuál es la diferencia entre Rive y Lottie?
Lottie reproduce animaciones de After Effects exportadas como JSON con Bodymovin o empaquetadas como .lottie; las animaciones de Rive se crean en el editor de Rive y se exportan como archivos binarios .riv. Hoy ambos admiten interactividad: Lottie Creator incorporó máquinas de estados de dotLottie en 2025, mientras que la máquina de estados (state machine) forma parte del propio formato de Rive.
¿Qué es una máquina de estados (state machine) de Rive?
Una máquina de estados (state machine) de Rive es lógica dentro del archivo .riv que conecta estados de animación mediante transiciones. Tu app define valores, ya sean inputs o propiedades de view model vinculadas con Data Binding, y la máquina de estados decide qué animación se reproduce y cómo se mezcla, así que un solo archivo puede cubrir idle, talking, success y error.
¿Qué diferencia hay entre un trigger y un input de tipo number en Rive?
Un input numérico guarda un valor que la máquina de estados lee constantemente, lo que sirve para elegir un estado de ánimo en loop como idle o loading. Un trigger no guarda ningún valor: llamas a fire() una vez para una reacción momentánea como success, error o wave. Los booleanos son el tercer tipo de input.
¿Los inputs de la máquina de estados de Rive están obsoletos?
Sí. Rive ahora recomienda Data Binding con view models para proyectos nuevos, pero los archivos e inputs existentes siguen funcionando en web, React, Android y Flutter. El editor puede convertir inputs en view models. En las plataformas de Apple, los inputs solo funcionan en el runtime heredado; el nuevo runtime de Apple solo admite Data Binding.
¿Qué paquete web de Rive debo usar?
Rive recomienda @rive-app/webgl2 para la mayoría de los proyectos web porque usa el Rive Renderer. @rive-app/canvas dibuja con Canvas2D, todavía no admite vector feathering y evita el límite de contextos WebGL del navegador. Ambos exponen la misma API, así que cambiar más adelante solo implica modificar el import.
¿Cómo cambio un estado de Rive en React?
Carga el archivo con useRive. Con inputs heredados, llama a useStateMachineInput(rive, "State Machine 1", "mood") y luego define .value o llama a .fire(). Con Data Binding, pasa autoBind: true y usa useViewModelInstanceNumber o useViewModelInstanceTrigger. Rive recomienda Data Binding para código nuevo.
¿Cómo asigno un input de Rive en SwiftUI?
En el runtime heredado de Apple, crea un RiveViewModel y llama a setInput("mood", value: 3.0) para números o booleanos, y a triggerInput("success") para triggers. El nuevo runtime de Apple no admite inputs: usa Data Binding en su lugar. Ambos runtimes vienen en el mismo paquete RiveRuntime, compatible con iOS 14 y versiones posteriores.
¿Qué paquete de Rive debo usar para React Native?
Usa el runtime basado en Nitro, que se instala con npm install @rive-app/react-native react-native-nitro-modules. El paquete anterior rive-react-native está obsoleto. En el nuevo runtime, los métodos de inputs de la máquina de estados generan advertencias en la v0.5 (la línea 0.5.x vigente en octubre de 2026) y está previsto eliminarlos en la v0.6, así que migra ese código a Data Binding antes de actualizar.
Mascotas en tu producto
¿Cómo funcionan las animaciones de respuesta correcta e incorrecta al estilo Duolingo?
Son reacciones puntuales que dispara el código de la app. El personaje mantiene en loop un estado de ánimo tranquilo durante la pregunta; cuando se comprueba la respuesta, el código dispara un trigger como yes o no, la reacción se reproduce una vez y la máquina de estados vuelve al loop. El blog de Duolingo describe cómo usa las máquinas de estados de Rive para este tipo de control.
Lee la guía: Animación de mascota estilo Duolingo: estados, reacciones y esfuerzo
¿Cuántas empresas SaaS B2B tienen una mascota?
Muy pocas. Un censo de 2026 de Louis Grenier contó 105 marcas tecnológicas B2B con una mascota recurrente, frente a una base de unas 30 000 empresas de software B2B, es decir, menos de medio por ciento. Solo 68 pertenecían a empresas comerciales; 37 eran proyectos de código abierto. El autor considera 105 un mínimo, no un recuento completo.
Lee la guía: ¿Tu app debería tener mascota? Evidencia y pruebas
¿Existe un generador de mascotas con IA gratis que anime?
En parte, a noviembre de 2026. Pixelcut y Dzine generan mascotas fijas gratis. El plan gratuito de MascotVibe da 30 créditos para una mascota y una animación, pero para descargar hay que mejorar el plan. El plan gratis de Charmotion incluye dos diseños con IA, y su vista previa gratis en el navegador muestra tu personaje en pantallas de app con un clip corto con marca de agua; los sets completos de 17 animaciones empiezan en $20 al mes.
Lee la guía: IA para animar mascotas: comparativa 2026Animador de mascotas con IA
¿Qué estados debe tener la mascota de una app?
A la mayoría de las apps les basta un loop en reposo (idle) más algunos loops de contexto, como loading o thinking durante las esperas, listening y talking para asistentes, y sleeping para pantallas vacías o inactivas. Agrega reacciones puntuales breves para success, error, yes, no, enter y exit. Mantén los loops sutiles y las reacciones cortas.
Lee la guía: Estados de animación de mascota de marca: Loading, Success, Error
¿Cuál es la diferencia entre una animación en loop y una animación puntual?
Una animación en loop se repite mientras un estado está activo, como idle, loading o listening. Una reacción puntual se reproduce una vez en respuesta a un evento, como success o error, y luego vuelve al loop actual. En Rive, los loops suelen elegirse con un input numérico y las reacciones puntuales, con triggers.
Lee la guía: Estados de animación de mascota de marca: Loading, Success, Error
¿Qué estados necesita el avatar de un asistente de IA?
Como mínimo: idle, listening mientras el usuario habla o escribe, thinking mientras el modelo trabaja y talking mientras responde, además de un estado de descanso. El componente Persona de AI SDK Elements de Vercel, creado con Rive, usa idle, listening, thinking, speaking y asleep. Agrega reacciones de success y error para las acciones que completa el asistente.
¿Cómo anima Duolingo a sus personajes?
Duolingo usa Rive. Su artículo de ingeniería de 2022 explica que la máquina de estados de Rive permitió a la app elegir estados de animación desde el código, sincronizar la forma de la boca de los personajes con el audio y reaccionar a los estudiantes en tiempo real. El equipo escribió que la máquina de estados fue lo que hizo viable el proyecto a gran escala.
Lee la guía: Cómo crear una mascota de marca animada para tu app
¿Puede una mascota de marca animada reemplazar un spinner de carga?
Sí, para esperas cortas. Una mascota de marca que indica la carga es un indicador en loop, el tipo que Nielsen Norman Group recomienda para esperas de unos 2 a 10 segundos. Para 10 segundos o más, muestra una barra de progreso con el porcentaje completado, porque un loop no puede indicar cuánto trabajo falta. Por debajo de un segundo aproximadamente, no muestres ningún indicador.
Lee la guía: Cómo crear una mascota de marca animada para tu app
¿Qué incluye un set de animaciones de Charmotion?
Un set de Charmotion tiene 17 animaciones de tu personaje: diez loops elegidos con un número mood de 0 a 9, seis triggers puntuales (success, error, yes, no, enter, exit) y una intro de inicio. Las 17 vienen en un solo .riv (40 KB para una mascota plana en nuestra prueba de octubre de 2026, alrededor de 1.0 MB para un logo 3D), además de exportaciones de video y código listo para pegar en todos los planes de pago.
Lee la guía: Estados de animación de mascota de marca: Loading, Success, Error
¿Cuánto tarda un set de animaciones de Charmotion?
Normalmente unos pocos minutos. Subes un personaje, mascota o logo, o haces que la IA diseñe uno a partir de unas pocas respuestas rápidas, y Charmotion produce las 17 animaciones: diez loops de estados de ánimo, seis reacciones puntuales y una intro de inicio, entregadas como archivo Rive y código. MP4, GIF, un video de inicio 9:16 y video transparente se exportan bajo demanda desde la página del set, en alrededor de un minuto. Los sets vienen con los planes de pago, desde $20 al mes.
Lee la guía: Cómo crear una mascota de marca animada para tu app
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Animación de logo
¿Puedo animar un logo de texto (solo con letras)?
Sí. Un logo de texto plano puede moverse como un todo (un rebote, una inclinación o una intro de inicio) o letra por letra, con letras que suben, caen o se escriben, mientras cada letra conserva su forma exacta. Motion Studio de Charmotion divide el logo de texto en sus letras por ti. Que las letras se transformen en otras formas sigue siendo trabajo para un motion designer.
Lee la guía: Cómo animar un logo: Canva, Adobe Express, After Effects, video con IA y rigging comparadosCreador de logos animados
¿Puede ChatGPT animar mi logo?
No como video. ChatGPT crea y edita imágenes fijas, OpenAI dio de baja la app y el sitio web de Sora en abril de 2026, y no encontramos ninguna página de ayuda de OpenAI que describa la generación de video en ChatGPT. Puede escribir código de animación CSS o SVG, que mantiene el logo exacto, pero requiere una versión en SVG y que alguien ponga el código en una página.
¿Por qué los generadores de video con IA cambian mi logo?
Porque redibujan cada fotograma en lugar de mover tu archivo. Los modelos de imagen a video como Kling, Runway y Veo usan tu logo como referencia, así que los contornos, los colores y las letras pueden cambiar. La propia guía de logos de Kling recomienda fijar la cámara y animar la luz, no la forma. Las herramientas que riggean tu arte original lo mantienen sin cambios.
Lee la guía: ¿Puede la IA animar mi logo sin cambiarlo?Creador de logos animados
¿Cuánto debe durar una animación de logo?
Normalmente de 3 a 8 segundos, y menos de unos 3 segundos para un sting. Envato sugiere de tres a ocho segundos para la mayoría de las animaciones de logo, Envato Tuts+ dice que un sting debería durar unos pocos segundos como máximo, y los anuncios bumper de YouTube tienen un límite de 6 segundos. Usa la duración corta para stings e inicios de app y la más larga para intros de video, y termina siempre en el logo fijo.
Lee la guía: Logo reveal vs sting vs bumper vs loop: para qué sirve cada uno
¿Un logo animado puede tener fondo transparente?
Sí, si lo exportas en un formato con canal alfa: MOV HEVC con alfa o ProRes 4444 para apps de Apple y editores de video, WebM VP9 con alfa para Chrome, Firefox y OBS, o GIF con transparencia de todo o nada y bordes duros. Un MP4 H.264 estándar no puede ser transparente, así que su fondo siempre sale sólido.
Lee la guía: Logo animado con fondo transparente: formatos, editores, presentaciones y OBSCreador de logos animados
¿Cuánto cuesta animar un logo?
Una animación de logo personalizada suele costar entre $40 y $1500, mientras que las plantillas y las herramientas de IA cuestan unos pocos dólares al mes. La guía de costos 2026 de Fiverr indica de $40 a $120 por una animación de logo básica, Upwork dice que animar un logo existente cuesta desde unos $50 hasta más de $1000, y los motion designers freelance suelen cobrar de $300 a $1500 por un sting corto. Las plantillas y las herramientas de IA empiezan en unos pocos dólares al mes.
Lee la guía: ¿Cuánto cuesta animar un logo en 2026?Creador de logos animados
¿Puedo convertir mi logo en un GIF?
Sí. Primero anima el logo, exporta un video corto y luego conviértelo a GIF con una paleta generada a partir del clip; un PNG guardado como .gif se queda quieto. El GIF admite como máximo 256 colores y solo transparencia de todo o nada, así que los degradados se ven en bandas y los bordes suaves se ven dentados. Usa GIF para correo y chat, y video en sitios web.
Lee la guía: Cómo convertir un logo en un GIF animadoCreador de logos animados
¿Canva puede exportar un logo animado con fondo transparente?
Solo como GIF, y solo con un plan de pago. El centro de ayuda de Canva indica descargas transparentes para PNG, SVG y GIF, disponibles en los planes Pro, Teams, Business, Education y Nonprofits. Las descargas en MP4 nunca son transparentes. La transparencia de un GIF es de todo o nada por píxel, así que los bordes suaves y las sombras se ven toscos.
Lee la guía: Logo animado con fondo transparente: formatos, editores, presentaciones y OBS
¿Qué necesito para tener un ícono animado en mi servidor de Discord?
Nivel 1 de Server Boost, que requiere 2 Boosts, y un GIF. Discord incluye el ícono animado del servidor como ventaja del Nivel 1, y su documentación de API describe el ícono como un PNG, JPEG o GIF de 1024×1024, animado cuando el servidor tiene esa función. Mantén el logo centrado, ya que Discord muestra los íconos de servidor en un círculo y recorta las esquinas.
Lee la guía: Ícono animado de servidor en Discord: requisitos, tamaño y consejos para GIF
¿Puedo poner un logo animado en PowerPoint?
Sí, como GIF o como video. Los GIF animados se reproducen en el modo Presentación con diapositivas de PowerPoint para Windows y Mac, pero no en PowerPoint para la web. Para video, Microsoft recomienda MP4 con H.264. Microsoft no documenta la reproducción de video con fondo transparente, así que usa un GIF o un video cuyo fondo coincida con la diapositiva.
Lee la guía: Logo animado en Keynote, PowerPoint y Google Slides
¿Por qué mi logo tiene un recuadro negro en la edición de mi video?
El archivo no tiene canal alfa, o tu editor lo está ignorando. Un MP4 H.264 no puede guardar transparencia, así que exporta o pide un MOV con ProRes 4444 o alfa HEVC. En Premiere Pro, comprueba también que la opción Ignore Alpha Channel esté desactivada en Interpret Footage; Adobe dice que esa opción hace aparecer píxeles negros.
Lee la guía: Cómo agregar un logo animado a un video (logo en la esquina o marca de agua)
¿Puedo animar un logo generado con IA?
Sí. Los logos rasterizados, incluidos los generados con IA, los 3D o los que tienen mucho texto, se pueden animar moviendo y deformando la imagen original en lugar de redibujarla como vectores. El modo Motion de Charmotion funciona así: conserva los píxeles propios del arte y agrega squash, stretch, inclinaciones y reacciones. Las cargas nunca se usan para entrenar IA.
Lee la guía: Cómo animar un logo a partir de un PNG o una imagen hecha con IA
¿Qué formato debe usar un logo animado en un sitio web?
Para un loop decorativo con fondo transparente, usa un .mov HEVC con alfa seguido de un WebM VP9 con alfa en un solo elemento de video silenciado y con reproducción automática. Para un logo que reaccione al hover o a los clics, usa un archivo de Rive. Evita GIF para logos con bordes suaves, porque la transparencia de GIF es de todo o nada.
Lee la guía: Cómo animar un logo a partir de un PNG o una imagen hecha con IA
¿Se puede animar la pantalla de inicio de iOS?
No. La pantalla de inicio (Launch Screen) de iOS es una configuración estática de Info.plist o un storyboard que no puede usar clases personalizadas, atributos de runtime ni conexiones de código. Apple indica que debe verse casi idéntica a tu primera pantalla. En su lugar, reproduce una intro animada de marca en la primera vista de tu app, cuando termine el inicio.
Lee la guía: Guía de animaciones de inicio y splash screen para apps
¿Cómo debe verse una pantalla de inicio en iOS?
Las Human Interface Guidelines de Apple indican que la pantalla de inicio debe ser casi idéntica a la primera pantalla de tu app, evitar el texto y no funcionar como splash screen ni como momento de branding. Si quieres una splash screen o una animación de logo, Apple sugiere mostrarla al comienzo del onboarding, una vez completado el inicio.
Lee la guía: Guía de animaciones de inicio y splash screen para apps
¿Cuánto debe durar la animación de la splash screen en Android?
Google recomienda no superar los 1000 ms en teléfonos para el ícono animado de la splash screen de Android 12+, y el retraso antes de que empiece no puede superar los 166 ms. Es una recomendación, no un límite estricto. Si tu app tarda más de un segundo en iniciarse, usa una animación en loop. El ícono puede ser un AnimatedVectorDrawable.
Lee la guía: Guía de animaciones de inicio y splash screen para apps
¿Qué tamaño tiene el ícono de la splash screen en Android 12?
Con fondo de ícono, el ícono de la splash screen mide 240×240 dp y debe caber dentro de un círculo de 160 dp. Sin fondo, mide 288×288 dp y debe caber dentro de un círculo de 192 dp. Mantén tu logo dentro de ese círculo, porque todo lo que quede fuera se recorta con una máscara. androidx.core:core-splashscreen lleva esta función a versiones anteriores de Android.
Lee la guía: Guía de animaciones de inicio y splash screen para apps
¿Ya tienes un personaje? Mira tu personaje en pantallas reales de una app (gratis, en tu navegador) o consulta los planes.
Formatos y video con fondo transparente
¿Puedo exportar un MP4 transparente desde After Effects o Premiere?
No. El MP4 H.264 no tiene canal alfa, así que los exportadores de Adobe no pueden hacerlo transparente. Exporta como máster un MOV ProRes 4444 o una secuencia PNG con RGB más alfa. Luego crea a partir de él los archivos para la web: un WebM VP9 con ffmpeg, y HEVC con alfa en una Mac con avconvert, Compressor o AVFoundation.
Lee la guía: MP4 transparente y HEVC con alfa: lo que realmente funciona
¿Puedo crear HEVC con canal alfa sin Mac?
Todavía no con una herramienta comprobada y probada en Safari. Los codificadores de Apple (avconvert, Compressor, AVFoundation) son la vía fiable y solo funcionan en macOS. FFmpeg 8.0 añadió la codificación de capa alfa con libx265, que funciona en Windows y Linux, pero prueba el resultado en un iPhone antes de confiar en él. Una Mac en la nube es la alternativa.
Lee la guía: MP4 transparente y HEVC con alfa: lo que realmente funciona
¿Cómo convierto un MOV con canal alfa a WebM?
Para un MOV ProRes 4444, ejecuta ffmpeg con -c:v libvpx-vp9 -pix_fmt yuva420p. Para un MOV HEVC con alfa, ffmpeg 7.1.1 descartó la capa alfa en nuestras pruebas, así que primero conviértelo en una Mac con avconvert -p PresetAppleProRes4444LPCM y luego codifica ese archivo ProRes a WebM VP9 de la misma forma.
Lee la guía: MP4 transparente y HEVC con alfa: lo que realmente funciona
¿Charmotion exporta GIF transparentes?
No. Los GIF de Charmotion son vistas previas de 480 px con fondo sólido. El GIF solo admite transparencia de 1 bit, lo que deja contornos dentados o con halo en los bordes suaves de un personaje, así que la transparencia viene del WebM (VP9 con alfa) y el MOV (HEVC con alfa) de los planes de pago. Si una plataforma exige un GIF transparente, convierte el WebM con ffmpeg.
Lee la guía: De PNG a GIF animado con fondo transparente: halos, bordes y mejores formatos
¿Safari admite WebM transparente?
No. Safari reproduce video WebM pero descarta el canal alfa de VP9, así que las áreas transparentes se ven opacas. En octubre de 2026, el parche de WebKit para el alfa de VP9 (bug 275908, pull request #64837) sigue abierto. Sirve HEVC con alfa en un .mov a Safari y WebM VP9 a Chrome, Edge y Firefox.
Lee la guía: Video con fondo transparente en sitios web (incluido Safari)
¿Cómo agrego un video con fondo transparente a un sitio web?
Usa un solo elemento <video autoplay muted loop playsinline> con dos fuentes: primero un .mov HEVC con alfa, con el tipo video/quicktime; codecs="hvc1.1.6.H120.b0", y luego un WebM VP9 con alfa. El orden importa porque Safari puede reproducir VP9 pero ignora su transparencia, así que debe encontrar primero el archivo HEVC.
Lee la guía: Video con fondo transparente en sitios web (incluido Safari)
¿Qué es HEVC con canal alfa?
HEVC con alfa es la extensión de Apple del video H.265 que almacena un canal de transparencia. La reproducción es compatible con iOS 13+, tvOS 13+ y macOS Catalina+, incluido Safari. Codifícalo en una Mac con AVFoundation, por ejemplo con avconvert de Apple y el preset de HEVC con alfa. En nuestras pruebas, los archivos del codificador hevc_videotoolbox de ffmpeg no se abrían en AVFoundation.
Lee la guía: Video con fondo transparente en sitios web (incluido Safari)
¿Un MP4 puede tener fondo transparente?
Un MP4 H.264 estándar no puede almacenar transparencia. Para video con fondo transparente en la web, usa WebM VP9 para Chrome, Edge y Firefox, y HEVC con alfa para Safari y las apps de Apple. ProRes 4444 también incluye canal alfa, pero es un formato de edición y pesa demasiado para servirlo en páginas web.
Lee la guía: Video con fondo transparente en sitios web (incluido Safari)
¿Por qué mi video no se reproduce automáticamente en iPhone?
Safari en iOS solo reproduce automáticamente videos silenciados o sin pista de audio que estén visibles en pantalla, y el iPhone necesita el atributo playsinline para reproducirlos dentro de la página en lugar de a pantalla completa. Usa <video autoplay muted loop playsinline> y gestiona la Promise que devuelve play() por si se rechaza la reproducción.
Lee la guía: Video con fondo transparente en sitios web (incluido Safari)
¿Por qué GIF es una mala opción para animaciones web?
GIF usa una paleta indexada de 256 colores como máximo y solo admite transparencia de todo o nada, así que los degradados se ven en bandas y los bordes, dentados. Además pesa mucho: en un ejemplo de web.dev, un GIF de 3.7 MB se convirtió en un MP4 de 551 KB y en un WebM de 341 KB con el mismo contenido.
¿Cómo hago que un video se comporte como un GIF?
Usa <video autoplay loop muted playsinline> con fuentes WebM y MP4. Esos atributos hacen que empiece al cargar, se repita sin fin, quede en silencio y se reproduzca dentro de la página en iPhone. Así se comporta como un GIF con una fracción del peso. La reproducción automática silenciada siempre está permitida en Chrome.
¿Qué formatos de archivo incluye un set de Charmotion?
Un set completo incluye un .riv con las 17 animaciones, un MP4 de 1080×1080 a 60 fps por animación, un MP4 de inicio 9:16, GIF de 480 px, WebM transparente (VP9 con alfa) y MOV (HEVC con alfa), y código web, React y SwiftUI. Los sets vienen con los planes de pago, que incluyen todos los formatos.
UX y accesibilidad en animación
¿Qué es prefers-reduced-motion?
prefers-reduced-motion es una media feature de CSS que indica si el usuario pidió al sistema operativo minimizar el movimiento, con los valores no-preference y reduce. Tiene amplio soporte desde enero de 2020. Úsala para reemplazar movimientos grandes y loops por una pose estática o un fundido suave.
Lee la guía: Animación accesible: movimiento reducido y WCAG
¿Cómo detecto Reducir movimiento en SwiftUI?
Lee @Environment(\.accessibilityReduceMotion) var reduceMotion. Cuando sea true, muestra una pose estática o un fundido en lugar del movimiento del personaje en loop. Refleja el ajuste Reducir movimiento del usuario en Configuración, Accesibilidad, Movimiento. En la web, Safari expone el mismo ajuste mediante prefers-reduced-motion.
Lee la guía: Animación accesible: movimiento reducido y WCAG
¿Qué es WCAG 2.3.3 Animation from Interactions?
El criterio 2.3.3 es de nivel AAA: debe poder desactivarse la animación de movimiento activada por la interacción del usuario, salvo que sea esencial. Respetar prefers-reduced-motion es la forma habitual de cumplirlo. El nivel AAA rara vez es obligatorio, pero es una buena práctica para mascotas que rebotan o se deslizan al tocarlas.
Lee la guía: Animación accesible: movimiento reducido y WCAG
¿Cuántas veces por segundo puede destellar una animación?
No más de tres veces en cualquier período de un segundo, según el criterio 2.3.1 de WCAG 2.2 (nivel A), salvo que los destellos queden por debajo de los umbrales de destello general y de destello rojo. Los destellos rápidos pueden provocar convulsiones en personas con epilepsia fotosensible, así que mantén lentos los parpadeos en las animaciones de error y de atención.
Lee la guía: Animación accesible: movimiento reducido y WCAG
¿Cuánto deben durar las animaciones de interfaz?
La mayoría de las transiciones de interfaz en móvil deberían durar entre 200 y 300 ms. Material Design sugiere unos 225 ms para los elementos que entran, 195 ms para los que salen y unos 375 ms para transiciones grandes a pantalla completa, y advierte que más de 400 ms puede sentirse lento. Un movimiento más largo, que recorre más área, merece una duración mayor.
¿Cuándo usar un spinner vs una barra de progreso?
Usa un indicador en loop, como un spinner o una mascota animada, para esperas de unos 2 a 10 segundos, y una barra de progreso con porcentaje para 10 segundos o más. Nielsen Norman Group recomienda no mostrar ningún indicador en acciones de menos de un segundo aproximadamente, donde basta con una respuesta visual inmediata.
¿Qué son los límites de tiempo de respuesta de 0.1, 1 y 10 segundos?
Son los límites de Jakob Nielsen: 0.1 segundos se percibe como instantáneo, 1 segundo mantiene sin interrupciones el hilo de pensamiento del usuario y 10 segundos es aproximadamente el límite para mantener la atención en la tarea. Pasados unos 10 segundos, muestra el progreso para que los usuarios sepan que el sistema no se ha congelado.