A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern
AnimXYZ
Compose animations by stacking words - fade, up, slide - no keyframes, 3KB core
Content updated · 2026-10-01
What is it · 它是什么
What is AnimXYZ?
AnimXYZ calls itself the first composable CSS animation toolkit: stack words like fade, scale, up and slide to get enter/exit animations without writing keyframes. Fine-tune with CSS variables; nested elements and list stagger are supported. The core is about 3KB (12KB with utilities), with official Vue and React integrations. Open source and free.
How to use · 怎么用
How to use AnimXYZ
- Stack words in the homepage playground and watch it live.
- Paste the composed class names into your project.
- Use stagger for lists; one combination for enter, one for exit.
Key features · 核心特点
Key features of AnimXYZ
- Word-stacking animations, zero keyframes
- About 3KB core, negligible weight
- CSS-variable control, nesting and stagger
- Official Vue/React integrations, open source
Related sites
A front-end playground — a dense hub of motion snippets and experiments
A long-standing source of creative web interaction tutorials with high-quality demos