Vivace

Vivace is a lightweight engine for attribute-driven CSS animations designed to let developers compose and trigger animations directly within markup. It enables the creation of entrances, springs, and staggers by specifying animation keys as attributes in HTML elements. The tool offers eighteen composable animation keys, such as fade, slide, rotate, scale, spiral, vibrate, perspective, bounce, shake, flick, blur, swing, pop, drop, squash, heartbeat, wave, and glow. These keys can be stacked and modified within a single attribute to achieve complex animation sequences.

Vivace handles animation triggers based on five types of user interactions or events, including scroll, hover, click, and focus. The engine itself is responsible for determining when animations play, while the visual effects are managed purely through CSS. Developers initialize Vivace with a single call at the application's root, and a MutationObserver ensures that any elements mounted later by frameworks are automatically registered for animation. This eliminates the need for wrappers or explicit keyframes, streamlining the process of adding animations to web applications.

The tool is delivered as a package that can be installed via bun, npm, pnpm, or yarn, and it is under 7 kB gzipped. Vivace has no dependencies and is composed of CSS and JavaScript. There is a playground and documentation available for users to explore and implement its features.