Vivace CSS es un motor de animación minimalista para la web que permite componer entradas, muelles (springs) y escalonados (staggers) directamente desde el marcado HTML, sin componentes envoltorio ni fotogramas clave definidos a mano. La biblioteca separa dos responsabilidades: los atributos indican qué se anima y cuándo (al cargar, al aparecer, al pasar el ratón, al hacer clic o al recibir foco), mientras que el CSS puro define cómo se ejecuta la transición.
El flujo de uso se reduce a dos pasos. Primero, se inicializa el motor con una única llamada (Vivace.init()) en la raíz de la aplicación; internamente, un MutationObserver registra automáticamente cualquier elemento que el framework monte más tarde. Segundo, el desarrollador escribe atributos sobre los elementos: la clave precedida de @ describe el efecto (por ejemplo, @fd para fundido o @sl-y para deslizamiento vertical), los modificadores unidos con guiones bajos ajustan parámetros como el retardo o la curva de easing, y data-viv-on asocia el disparador correspondiente.
Entre sus características destacadas se incluyen 18 presets predefinidos, eventos de ciclo de vida que burbujean en el DOM (vivace:play y vivace:end), una API para definir claves y disparadores personalizados, y animaciones de salida que se resuelven como promesas. La documentación ofrece un playground donde encadenar tokens y previsualizar el resultado antes de copiar el atributo al proyecto.