Getting started

Vivace is an attribute-driven CSS animation library. You describe what plays in a data-viv attribute and when it plays in data-viv-on — a tiny TypeScript engine wires up the triggers, and pure CSS does the animating.

Install

$ bun add vivace-css

Set up

import Vivace from 'vivace-css'
import 'vivace-css/vivace.css'

Vivace.init()

init() scans the page for [data-viv] elements and keeps watching — anything your framework mounts later is registered automatically via a MutationObserver. Call Vivace.destroy() if you ever need to tear the engine down.

Framework-specific wiring — SvelteKit, React/Next, Vue/Nuxt, plain HTML — lives in the Frameworks section.

Working with an AI agent? Point it at /docs/vivace.md (also served as /llms.txt) — the complete documentation as a single markdown file, with usage instructions written for LLMs.

First animation

html

<div data-viv="@fd @sl-y_ease-out-back" data-viv-on="appearing">
  Fades in while sliding up, when scrolled into view.
</div>

Live:

Fades in while sliding up

Fastest way to learn the grammar: compose visually in the playground and copy the attribute out.

Migrating from A.css

Vivace keeps A.css's key/modifier grammar and custom-property system, with three changes:

The attribute is data-viv instead of qwik-animate.
Triggers are explicit (data-viv-on) instead of relying on attribute swaps — the engine drives data-viv-state for you.
Variant naming is normalized: enter is -i, exit is -o, and ! inverts any variant (A.css mixed -in!/-out! forms).

Continue with Attributes for the full grammar.