Switch themes to see how motion tokens transform the feel of view transition animations.
Navigate between tabs to see the slide animation. Each theme adjusts easing and duration for a different feel.
Vanilla Breeze uses design tokens for every visual property -- colors, spacing, typography, and motion. Themes override these tokens at the root level, cascading changes through every component without a single line of custom CSS. The result is a cohesive visual language that adapts instantly to any brand identity.
View transitions leverage the browser's compositor thread, keeping animations at a smooth 60fps even on lower-powered devices. Because transitions run as GPU-accelerated snapshots, the main thread stays free for JavaScript work. Combined with native HTML elements like details/summary, the framework delivers rich interactivity with near-zero JavaScript overhead.
Every component is built on native HTML semantics first, with ARIA attributes added only where browsers need extra context. Keyboard navigation follows WAI-ARIA patterns, and view transitions respect the prefers-reduced-motion media query automatically. Focus management ensures users always know where they are after a transition completes.
Cycle through slides to see the fade animation. Themes with longer durations create a dreamy dissolve; faster themes feel snappy and direct.
Click the button to toggle between faces. The scale transition zooms content in and out, with each theme adjusting the intensity and timing curve.
The original layout uses fixed pixel values, media-query breakpoints at arbitrary widths, and utility classes scattered throughout the markup. Changes require updating dozens of files and testing every breakpoint by hand.
With Vanilla Breeze, design tokens handle responsive scaling automatically. Fluid spacing adapts to the viewport, semantic HTML replaces utility class soup, and theme changes propagate everywhere through a single token override.
Expand and collapse panels to watch the fade animation. Slower themes produce a gentle reveal; faster themes pop content into view.
View transitions are a browser-native API that animates changes between DOM states. Instead of manually coordinating CSS transitions or JavaScript animation libraries, you describe the before and after states and the browser handles the in-between frames using GPU-accelerated snapshots.
Each theme defines motion tokens that control animation duration, easing curves, and scale factors. A "Modern" theme might use short durations with spring-like easing for a bouncy feel, while a "Classic" theme might use longer durations with ease-in-out for a more stately, graceful motion.
The underlying components use native HTML elements like details/summary that function fully without JavaScript. View transitions are a progressive enhancement -- when the API is unavailable or when JavaScript is disabled, content changes happen instantly with no loss of functionality.
Vanilla Breeze respects the prefers-reduced-motion media query at every level. When a user has reduced motion enabled, view transition durations drop to near-instant values and scale/slide effects are replaced with simple crossfades or instant swaps, ensuring comfort for motion-sensitive users.