Reproductor, editor de color y optimizador de Lottie, todo en local
Abre animaciones .lottie, .tgs y .json, recolorea cada relleno, trazo y parada de degradado, comprueba qué se va a romper en otros reproductores y exporta a JSON, SVG, PNG, secuencia de fotogramas o WebM, todo dentro de tu navegador.
Abre una animación para ver su estructura.
Cómo funciona
Suelta el archivo
Un .json normal, un archivo .lottie, un sticker .tgs de Telegram o un .json.gz comprimido. No se sube nada a ningún sitio.
Lee el informe
Antes de renderizar nada tienes el tamaño, el número de capas y la lista de lo que se va a romper en iOS, Android o reproductores antiguos.
Recolorea y recorta
Cada relleno, trazo, parada de degradado y fotograma clave de color se convierte en una muestra. Oculta capas, recorta el rango, fuerza los fps.
Exporta o sigue
JSON, .lottie, SVG, PNG, una secuencia numerada de fotogramas o un vídeo WebM; o manda el resultado directo a otra herramienta de la suite.
Nada sale de tu máquina
El reproductor, el editor de color, el optimizador y todas las exportaciones se ejecutan en tu propia CPU. Sin subidas, sin cuenta, sin cola, y sigue funcionando con la red desenchufada.
Colores que los demás visores no ven
La mayoría de visores online solo encuentran rellenos estáticos. Este también detecta trazos, paradas de degradado, capas sólidas y fotogramas clave de color animado, y te dice cuántas veces se usa cada color.
Un árbol de capas de verdad
Cada capa de primer nivel con su tipo, sus expresiones y sus máscaras de seguimiento, y un interruptor para ocultar las que no quieras. Después puedes eliminarlas del archivo exportado.
Un optimizador que enseña las cuentas
Redondear las coordenadas que el exportador escribió con quince dígitos, quitar los metadatos del autor y eliminar las capas ocultas suele reducir el archivo a la mitad. Ves los bytes antes y después, no una promesa.
Exportación a imagen y a vídeo
El fotograma actual en PNG o SVG, todo el rango como secuencia numerada de PNG dentro de un ZIP, o un vídeo WebM exacto fotograma a fotograma. Todo renderizado en un canvas de esta pestaña.
Un informe de compatibilidad
Expresiones, fusiones de trazados, efectos de capa, capas de texto, marcas 3D e imágenes referenciadas por URL: justo lo que hace que una animación se vea bien aquí y mal en un móvil.
Un reproductor que renderiza, no una vista previa que se descarga
La animación la renderiza lottie-web ejecutándose en esta página, a los fotogramas por segundo del propio documento, con desplazamiento exacto por fotograma y controles de verdad: avanzar de uno en uno, reproducir al revés, recortar el rango, forzar los fps. Como el renderizador es local, no hay espera de subida ni un techo de calidad impuesto por un servicio de vista previa.
Abre una animación Lottie, mira exactamente qué lleva dentro, cámbiale los colores, quítale el peso que le sobra y expórtala en el formato que realmente necesitas, sin subírsela a nadie.
El diseñador te pasa un Lottie que pesa 900 KB y se rompe en Android. Esta herramienta te dice por qué antes de publicarlo, te deja recolorearlo para que encaje con la marca sin volver a After Effects, quita las capas ocultas que dejó el exportador y te devuelve el archivo en JSON, .lottie, SVG, PNG, secuencia de fotogramas o WebM.
Todo ocurre en esta pestaña. La herramienta además marca las animaciones que referencian imágenes por URL, porque ese es el único caso en el que un Lottie no es autónomo, y las incrusta por ti cuando llegan dentro de un archivo .lottie.
Preguntas frecuentes
Q¿Se suben mis animaciones a algún sitio?+
No. El archivo se lee con la File API del propio navegador, se procesa en memoria y lo renderiza un reproductor empaquetado con esta página. No hay ninguna llamada a un servidor en ningún momento, y no se guarda nada entre visitas.
Q¿Qué formatos puedo abrir?+
Un .json de Lottie, un archivo .lottie (el formato que te da lottiefiles.com por defecto), un sticker .tgs de Telegram y un .json.gz comprimido. El contenedor se detecta por su contenido, así que un archivo mal nombrado también se abre.
Q¿Por qué no se reproduce nada nada más soltar el archivo?+
Es a propósito. Soltar un archivo solo lo lee e inspecciona; primero tienes su tamaño, su estructura y su informe de compatibilidad, y el reproductor arranca cuando pulsas el botón. Si prefieres saltarte todo eso, pega el JSON a mano y se abre al instante.
Q¿Qué colores se pueden editar de verdad?+
Rellenos y trazos estáticos, cada parada de un degradado de relleno o de trazo, el color de una capa sólida y cada fotograma clave de una propiedad de color animada. Los colores metidos dentro de un PNG incrustado o generados por un efecto de capa no se pueden cambiar: ningún editor puede hacerlo sin redibujar el recurso.
Q¿Cuánto reduce el optimizador un archivo?+
Depende por completo del origen, y por eso la herramienta enseña los bytes reales antes y después en vez de citar una cifra. Los archivos recién salidos de After Effects suelen quedarse un 40-60 % más pequeños con dos decimales, porque casi todo su peso son coordenadas escritas con quince dígitos significativos.
Q¿Puedo exportar un GIF?+
Directamente no, y es deliberado: un codificador de GIF en el navegador posterizaría los colores de una animación vectorial. Exporta una secuencia numerada de PNG o un WebM: los dos conservan la paleta completa, y cualquier codificador los convierte en GIF sin pérdidas.
Q¿Editar los colores estropea la animación?+
No. Cada edición se guarda como un parche sobre el documento original, que nunca se modifica. Puedes deshacer, rehacer, restablecer la paleta o mantener pulsado Comparar para ver el archivo intacto en cualquier momento.