Las animaciones de una inteligencia artificial «pensando» se han convertido en un elemento habitual en asistentes, agentes y aplicaciones generativas, pero no siempre hace falta recurrir a un GIF o a un vídeo prerenderizado. Liquid Orb Editor propone otra vía: generar el efecto en tiempo real mediante WebGPU y shaders WGSL, modificarlo visualmente y exportar después tanto una página web independiente como código SwiftUI/Metal para integrarlo en aplicaciones de Apple.
Las claves de Liquid Orb Editor en 30 segundos
- Liquid Orb Editor ofrece 11 presets animados que pueden modificarse desde el navegador.
- Utiliza React, WebGPU y shaders WGSL para renderizar los efectos en tiempo real.
- Permite ajustar color, velocidad, forma, refracción del cristal y resplandor.
- Puede exportar una página web independiente y código SwiftUI con shader Metal.
- El proyecto es open source con licencia MIT y necesita un navegador compatible con WebGPU.
El proyecto está desarrollado por LerSent001 y puede utilizarse directamente desde una demostración alojada en GitHub Pages, sin necesidad de instalar una aplicación. Para desarrollo local requiere Node.js 22, pnpm 11 y un navegador con soporte WebGPU.
La idea parece sencilla, pero aborda un problema bastante común. Muchas interfaces relacionadas con IA necesitan representar estados en los que el modelo está procesando información, esperando una respuesta, utilizando herramientas o ejecutando una tarea. Las soluciones más básicas recurren a GIF, vídeos o animaciones CSS. Liquid Orb Editor genera el efecto mediante la GPU, lo que permite modificarlo dinámicamente y reutilizarlo como parte de la propia interfaz.
De un orbe animado a un shader que puede integrarse en una aplicación
Liquid Orb Editor está construido alrededor de WebGPU, la API gráfica moderna para navegadores diseñada como sucesora de tecnologías anteriores como WebGL en determinados escenarios.
Los efectos se escriben utilizando WGSL (WebGPU Shading Language), el lenguaje de shaders asociado a WebGPU. En lugar de reproducir una secuencia de imágenes previamente generadas, la GPU calcula el aspecto del orbe continuamente.
El editor proporciona actualmente 11 presets de esferas dinámicas, según la versión disponible en su repositorio. Cada uno puede utilizarse como punto de partida y posteriormente modificarse mediante diferentes parámetros.
Entre las opciones disponibles se encuentran el color, la velocidad de movimiento, la forma, la refracción que produce el efecto de cristal y el resplandor exterior.
El resultado puede observarse tanto de forma aislada como dentro de una escena de ejemplo. Esto último resulta útil porque un efecto que funciona bien sobre un fondo oscuro puede comportarse de forma muy distinta dentro de una interfaz real.
La aplicación también adapta automáticamente su interfaz al chino o al inglés según el idioma configurado en el navegador, aunque permite cambiarlo manualmente.
Pero la característica que diferencia el proyecto de muchos generadores de animaciones similares aparece en la exportación.
Liquid Orb Editor puede generar una página web independiente, pero también exportar el efecto como SwiftUI y Metal.
Metal es la API gráfica y de computación de bajo nivel utilizada por Apple en macOS, iOS, iPadOS y el resto de sus plataformas. Esto significa que el efecto no tiene por qué quedarse dentro de una web ni reproducirse mediante un componente web integrado en una aplicación nativa.
El proyecto incluye directamente un archivo effect.metal para la versión que se exporta a SwiftUI, mientras que effect.wgsl contiene el shader utilizado en navegador.
Para desarrolladores de aplicaciones Apple, esta posibilidad puede ser más interesante que el propio editor visual: diseñar el efecto en el navegador y obtener después una versión que utiliza Metal de manera nativa.
El mismo conjunto de parámetros sirve para Web y SwiftUI
Uno de los problemas habituales cuando se intenta trasladar una animación gráfica entre plataformas es conseguir que ambas versiones tengan un aspecto similar.
El proyecto intenta reducir ese problema utilizando una misma instantánea de parámetros para las exportaciones Web y SwiftUI.
En su estructura interna, orb-uniforms.ts centraliza la correspondencia entre los parámetros configurados en el editor y los uniforms enviados a la GPU. orb-renderer.ts contiene el renderizador WebGPU y code-export.ts se ocupa de generar las versiones exportadas.
El autor explica además que mantiene el proyecto de forma continua para mejorar la correspondencia visual entre WebGPU/WGSL y SwiftUI/Metal.
Eso permite utilizar el navegador como una pequeña herramienta de diseño. El desarrollador puede modificar visualmente el efecto hasta conseguir el resultado que busca y posteriormente generar el código que necesita para incorporarlo al producto final.
También existe una característica sencilla pero especialmente práctica: los parámetros de la animación se guardan en el hash de la URL.
En lugar de exportar un archivo solo para enseñar una configuración a otra persona, puede compartirse directamente el enlace. Quien lo abra verá el efecto con los mismos parámetros.
Esto puede facilitar el trabajo entre diseño y desarrollo. Un diseñador puede modificar color, forma o movimiento y enviar simplemente la URL al desarrollador encargado de integrarlo.
WebGPU permite evitar GIF y vídeos para este tipo de interfaces
Utilizar shaders para una animación de interfaz tiene ventajas y también inconvenientes.
El primer beneficio es la flexibilidad. Un GIF contiene una animación fija. Si se quiere cambiar el color, la velocidad o el comportamiento hay que generar nuevamente el recurso.
Un shader puede reaccionar en tiempo real.
Una aplicación podría, por ejemplo, modificar el movimiento del orbe dependiendo de si el agente está escuchando, procesando información o generando una respuesta. También podría adaptar automáticamente colores o intensidad al estado de la aplicación.
Al tratarse de gráficos generados por GPU, la animación puede mantenerse nítida independientemente de la resolución sin almacenar decenas o cientos de fotogramas.
La contrapartida está en la compatibilidad.
Liquid Orb Editor requiere un navegador compatible con WebGPU. Aunque la API ha avanzado considerablemente en los navegadores modernos, no puede darse por hecho que cualquier dispositivo antiguo o navegador corporativo vaya a ejecutarla.
Para un producto comercial sería recomendable disponer de algún mecanismo alternativo cuando WebGPU no esté disponible.
La exportación a Metal reduce ese problema dentro de aplicaciones nativas de Apple, ya que en ese entorno el desarrollador no depende del soporte WebGPU del navegador.
Un proyecto pequeño que está creciendo rápidamente en GitHub
Liquid Orb Editor se distribuye como software de código abierto bajo licencia MIT, incluida la posibilidad de estudiar, modificar e integrar el código respetando las condiciones de la licencia.
El repositorio indica además que parte de la interfaz utiliza Toolcraft UI, cuyo código conserva también sus correspondientes avisos de licencia MIT.
El autor señala que está utilizando OpenAI Codex como ayuda para implementar código, realizar validaciones de regresión y preparar versiones, aunque eso no implica que la animación dependa de un modelo de IA para funcionar. El renderizado se realiza mediante WebGPU y los shaders incluidos en el proyecto.
La atención que está recibiendo también está creciendo rápidamente. Aunque las primeras referencias al proyecto hablaban de unas 359 estrellas después de aproximadamente diez días, el repositorio ya acumula 483 estrellas y 48 forks en el momento de consultar GitHub para este artículo.
Es una buena muestra de cómo algunas herramientas pequeñas pueden resultar útiles precisamente porque resuelven una necesidad muy concreta.
Liquid Orb Editor no pretende ser un motor gráfico ni una herramienta completa de motion design. Sirve para crear y ajustar un tipo específico de animación que está apareciendo cada vez con mayor frecuencia en interfaces de IA.
Y probablemente su característica más útil tampoco sea la posibilidad de conseguir rápidamente un orbe bonito para indicar que un modelo está pensando. Para los desarrolladores, el detalle que cambia bastante la utilidad del proyecto es poder pasar del editor WebGPU a código SwiftUI/Metal reutilizable, sin quedarse atrapados en un GIF o en un efecto que solo funciona dentro del navegador.
Preguntas frecuentes
¿Qué es Liquid Orb Editor?
Es un editor open source para crear animaciones de esferas o efectos de cristal líquido en tiempo real utilizando WebGPU y WGSL. Puede utilizarse directamente desde el navegador.
¿Se pueden exportar las animaciones?
Sí. El proyecto permite generar una página web independiente y también código preparado para SwiftUI y shaders Metal en plataformas de Apple.
¿Necesita una GPU NVIDIA o AMD?
No existe ese requisito específico. Necesita un entorno con WebGPU compatible para utilizar el editor en navegador. La ejecución dependerá del soporte proporcionado por el navegador, sistema operativo y hardware.
¿Liquid Orb Editor es gratuito?
Sí. El código del proyecto se publica bajo licencia MIT, que permite su utilización y modificación respetando las condiciones de dicha licencia.
