A production-grade CSS Animation Studio featuring 60 curated keyframe animations, an interactive builder, performance analytics, and custom exporting.
CSS Motion Master is a fully-featured, installable Progressive Web Application (PWA) designed for creative developers. It serves as a dependency-free playground to explore, compare, and construct 60+ unique CSS micro-interactions and keyframe animations—complete with a visual custom keyframe builder, robust local state management, and real-time performance tier analysis.
- 60+ Premium Animations: Hand-crafted CSS interactions ranging from 3D tilts and morphing blobs to complex keyframe sequences and micro-interactions.
- Visual Keyframe Builder: Create and edit CSS keyframes via a visual GUI. Adjust delays, duration, transforms, and timing functions effortlessly.
- Deep Performance Analysis: Every animation provides instant layout-shift flags, GPU-composite ratings, and CSS complexity metrics.
- Compare Mode: Diff up to 4 animations side by side to measure performance offsets and evaluate visual transitions.
- Robust Organization: Sort into custom Playlists, track Favorites, and rely on fuzzy-search.
- 100% Dependency-Free CSS: Every animation exported is pure vanilla CSS/HTML without any external UI bloat.
- Fully Installable PWA: Runs perfectly offline with caching and seamless Edge/Chrome installation via Vite PWA.
- React 18
- Vite
- Zustand (Atomic state management)
- Chart.js (Real-time dashboard modeling)
- Fuse.js (Optimized, localized fuzzy searching)
- Vanilla CSS (Zero frameworks, fully bespoke, heavily leveraging custom UI properties)
Prerequisites: Node.js v18+
- Clone the repository:
git clone https://github.com/AaqibhafeezKhan/CSSMotionMaster.git
- Navigate into the directory and install packages:
cd CSSMotionMaster npm install - Start the development server:
npm run dev
Contributions are always welcome. Feel free to branch off, add a standalone CSS animation using the strict schema located inside /src/animations, and submit a PR.