v4 · timeline(), sharedTransition() and <usa-auto-animate>

Animated components for web pages and Windows apps.

Dozens of dependency-free <usa-*> custom elements by category. Plain HTML, React, Vue, Svelte — and Electron, Tauri, WebView2 or a PWA on Windows.

Browse components Run any component

Chrome · Edge · Firefox · Safari
Electron
Tauri
WebView2 (WinUI · WPF · WinForms)
PWA

<usa-scrolly> — sticky scrollytelling

1 · The web

Any modern browser: Chrome, Edge, Firefox, Safari.

2 · Electron

Desktop apps for Windows, macOS and Linux, Chromium inside.

3 · Tauri

Rust-powered apps rendering with WebView2 on Windows.

4 · WebView2

Embed in WinUI 3, WPF or WinForms — same components.

<usa-sticky-stack> — cards that stack as you scroll

01 · Spring physics

Stiffness, damping and mass, not canned curves.

02 · Card effects

Flip, holo, glass, glow, expand — combinable.

03 · Windows apps

Same elements in Electron, Tauri and WebView2.

Use them in Windows desktop software

They are standard Custom Elements + CSS + Web Animations, so they run wherever a modern web view renders your UI.

Electron

// renderer.js (bundled)
import { defineComponents } from
  'motionary/components';
defineComponents();

Tauri

// src/main.ts — Vite + WebView2
import { defineTextComponents } from
  'motionary/components/text';
defineTextComponents();

WebView2 · WinUI 3 / WPF

<!-- wwwroot/index.html, mapped via
     SetVirtualHostNameToFolderMapping -->
<script src="components.umd.js"></script>
<usa-spinner kind="fluent"></usa-spinner>

PWA / browser

<script src="https://unpkg.com/
  motionary@14/dist/components.umd.js">
</script>

Read the Windows apps guide →