Plain HTML

No build step required — load the stylesheet and the ESM module from a CDN and call init(). Module scripts are deferred, so the DOM is ready when it runs.

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://esm.sh/vivace-css/dist/vivace.min.css" />
  </head>
  <body>
    <h1 data-viv="@fd @sl-y_ease-out-expo">Hello</h1>

    <section data-viv="@fd_child-ascend" data-viv-on="appearing">
      <p>Staggered</p>
      <p>one after</p>
      <p>another.</p>
    </section>

    <script type="module">
      import Vivace from 'https://esm.sh/vivace-css'
      Vivace.init()
    </script>
  </body>
</html>

With a bundler (no framework)

$ bun add vivace-css

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

Vivace.init()

Dynamic content

Anything you add later — innerHTML, appendChild, HTMX swaps, Turbo frames — is registered automatically by the engine's MutationObserver. There is nothing to re-run after a partial page update.

Scoping

Vivace.init() watches document.body. Pass an element to restrict scanning and observation to a subtree:

Vivace.init(document.querySelector('#app'))