Article URL: https://usevivace.dev Comments URL: https://news.ycombinator.com/item?id=48932889 Points: 4 # Comments: 0

Compose entrances, springs and staggers directly in your markup. A tiny engine handles when — scroll, hover, click, focus — and pure CSS handles how. One call at your app's root. A MutationObserver keeps watching, so anything your framework mounts later registers itself. Keys (@) say what plays, modifiers (_) tune it, data-viv-on says when. Everything composes. Keys stack in one attribute; modifiers concatenate onto the key they tune. Click a card to replay it, or open it in the playground. load, appearing, hover, click and focus — one shared IntersectionObserver and a handful of delegated listeners for the whole page, no matter how many elements animate. Exit animations that resolve as promises, bubbling lifecycle events (vivace:play, vivace:end), and a plugin API for your own keys and triggers — at runtime or as SCSS plugins. Attributes pass through every renderer, and dynamically mounted elements register themselves. No wrapper components to import, ever. Chain tokens in the playground, watch it live on real page sections, copy the attribute out — or ship it to the community gallery.