Developers revived an 8-year-old dead CSS library, naming it Vivace, and gave it a modern engine. Initialize once with a single call at the app’s root; a Mutation Observer watches the DOM so any element mounted later registers automatically. Animation is declared by writing attributes: keys (@) specify the effect, modifiers (_) tune it, and data‑viv‑on states when it should run. Everything composes—list items slide up in sequence, and multiple keys or modifiers can be stacked in one attribute.

Clicking a card replays its animation, or you can open the playground to experiment. Shared Intersection Observer and a handful of delegated listeners handle load, appearing, hover, click, and focus triggers for the whole page, regardless of element count. Exit animations resolve as promises, bubbling lifecycle events (vivace:play, vivace:end), and a plugin API lets you add custom keys or triggers at runtime or as SCSS plugins. The library respects prefers‑reduced‑motion, never hides content, and works with HTML, Svelte, React, Vue, etc.

Because attributes pass through every renderer and dynamically mounted elements register themselves, no wrapper components are ever required. You can chain tokens in the playground, see the effect live on real page sections, copy the attribute, or contribute to the community gallery.