Every interaction flows. Every transition tells a story.
Semantic HTML styled by design tokens, not utility classes.
View Transitions bring every state change to life, automatically.
Progressive enhancement means it works everywhere, beautifully.
A growing library of web components built on native HTML elements. Each one progressively enhances from a working baseline to a polished, animated experience.
Every visual decision flows from a single set of CSS custom properties. Change one token and the entire system responds -- colors, spacing, typography, radius, and motion.
--font-size-xs to --font-size-3xl--size-3xs to --size-3xlCinematic animations powered by the browser's native View Transitions API. No animation libraries, no JavaScript timelines -- just declarative attributes.
prefers-reduced-motion respectManual keyframes, JavaScript orchestration, layout thrashing. You write the animation logic, manage timing, handle interruptions, and hope nothing jitters on low-end devices. Every component needs its own bespoke animation code.
Add a single data-transition attribute and the browser handles the rest. GPU-accelerated compositing, automatic cross-fade, directional awareness, and graceful degradation -- all from one declarative API. Zero animation code to maintain.
The View Transitions API is supported in Chrome 111+, Safari 18+, and Firefox 131+. Together these cover the vast majority of modern browser usage. In unsupported browsers, components fall back to instant state changes -- the content always works, the animation is a progressive enhancement layer.
View Transitions are a progressive enhancement. Every Vanilla Breeze component starts with semantic HTML and CSS that works without JavaScript. The JS module adds interactivity, keyboard navigation, ARIA attributes, and view transition animations on top. If JavaScript fails to load, your users still get a fully functional page.
No. View Transitions are GPU-accelerated by the browser's compositing engine. They operate on a snapshot of the DOM, not the live layout, so there is no reflow or repaint during the animation. The performance cost is negligible compared to traditional JavaScript animation libraries.
Vanilla Breeze exposes theme tokens for animation duration and easing. Override --transition-duration and --transition-easing at the component or root level to control how fast and how smoothly transitions play. You can also use prefers-reduced-motion media queries to disable animations entirely for users who prefer it -- Vanilla Breeze handles this automatically.