diary-axel-rakotoarivao/vivace

Vivace is a small library for adding CSS animations to a webpage by writing them directly as attributes on your HTML elements, instead of writing separate animation code or CSS classes. For example, adding a data-viv attribute to a div can make it fade in while sliding upward as soon as it scrolls into view, with the animation described entirely in that one attribute. According to the project description, it supports 18 different animation keys and 5 different triggers, has no external dependencies, and is under 7 kilobytes once compressed. The project is organized as a monorepo using Bun workspaces, meaning multiple related packages live in one repository and share tooling. The main package is the library itself, written in TypeScript with CSS generated from SCSS, and published to npm. A second package is a documentation website built with SvelteKit that includes a visual, node-based playground for building up animations interactively. To work on the project, you install dependencies and can build the library, run its unit tests, start the documentation site locally, or run a linter called biome, all through Bun commands. The documentation site includes a community gallery of shared animations backed by Cloudflare's D1 database, deployed through Cloudflare Workers, with submissions protected by validation, a rate limit of 5 per hour per visitor, and a check to avoid duplicates, but no CAPTCHA. Releasing new versions of the library goes through a tool called Changesets, which records changes and bumps version numbers and the changelog before publishing. The README credits another project, A.css, as the inspiration for its animation preset system, which this project rebuilt with a new trigger engine and animation keys of its own.