A modern, open-source motion system for building high-performance UI animations using pure CSS keyframes. Create smooth, production-ready animations without JavaScript runtime overhead.
Live Demo • Report Bug • Request Feature
CSSFrames is an open-source motion system that helps developers build fast, consistent UI animations using pure CSS keyframes.
Instead of creating animations from scratch for every project, CSSFrames provides a curated collection of reusable motion presets that work seamlessly with traditional CSS and Tailwind CSS.
Built with performance as the foundation, every animation avoids layout thrashing by relying on GPU-accelerated properties like transform and opacity. No JavaScript animation runtime, no heavy dependencies, and no unnecessary complexity.
Alongside its animation library, CSSFrames includes a visual preview system, export tools, a Creator Suite for custom animations, and a community platform where developers can publish and discover new motion presets.
- 40+ production-ready motion presets for buttons, cards, text, loaders, icons, entrances, and shapes.
- 100% Pure CSS animations with zero JavaScript runtime.
- GPU-optimized using compositor-friendly properties for smooth rendering.
- Tailwind CSS compatible with ready-to-use utility classes.
- Interactive live preview to test animations before exporting.
- Creator Suite for building and customizing your own keyframes.
- One-click export for CSS keyframes, Tailwind classes, and animation metadata.
- Theater Mode for distraction-free animation previews.
- Community library powered by a REST API for sharing animations.
- Completely open source under the MIT License.
Using CSSFrames takes only a few steps:
- Browse the animation library or community collection.
- Preview animations on different UI components.
- Customize timing, easing, and playback.
- Export production-ready CSS or Tailwind utilities.
- Drop the animation directly into your project.
Every preset is designed to be lightweight, reusable, and easy to integrate into modern frontend applications.
CSSFrames is built around a simple philosophy:
-
Performance First Every animation is optimized for smooth rendering by avoiding expensive layout calculations.
-
Functional Motion Motion should communicate hierarchy, feedback, and state instead of being decorative.
-
Composable System Animations are reusable building blocks that can be mixed together across projects.
-
Consistent Experience Shared timing, easing, and motion patterns create a unified design language.
The library is organized into purpose-driven categories for common UI interactions.
- Buttons - Hover effects, click feedback, press states, success and error interactions.
- Loaders - Spinners, pulse animations, shimmer effects, and progress indicators.
- Entrances - Fade, slide, zoom, blur, and staggered reveal animations.
- Text - Typewriter effects, kinetic typography, glitch animations, and text reveals.
- Cards - Floating, elevation, glow, hover transitions, and shimmer effects.
- Icons - Bounce, rotate, stroke drawing, alerts, and floating motion.
- Shapes - Morphing blobs, geometric transitions, pulse systems, and rotations.
CSSFrames is powered by a modern frontend and backend stack.
- React
- Vite
- Tailwind CSS v4
- JavaScript (ES6+)
- Lucide React
- Monaco Editor
- Prism.js
- Express.js
- JSON Server
- Vercel (Frontend)
- Railway (Community API)
Run CSSFrames locally in just a few steps.
Make sure you have the following installed:
- Node.js (Latest LTS recommended)
- npm or Yarn
- A modern web browser
git clone https://github.com/byllzz/cssframes.git
cd cssframes
npm install
npm run devThe development server will start at:
http://localhost:5173
The community animation library runs as a separate Express server located inside the server/ directory.
cd server
npm install
npm startThe API will be available at:
http://localhost:3001/animations
Create a .env file in the project root.
VITE_API_URL=http://localhost:3001For production deployments, replace the value with your Railway backend URL inside your Vercel environment variables.
The backend is intentionally lightweight and only handles community animation storage.
- Store community-submitted animations
- Fetch animation collections
- Delete existing submissions
- Persist data using
db.json - Expose a simple REST API
server/
├── db.json
├── server.js
└── package.json
GET /animationsReturns every community animation.
POST /animationsAdds a new animation to the collection.
DELETE /animations/:idRemoves an animation by its ID.
Deploying the API to Railway takes only a few minutes.
- Push the repository to GitHub.
- Create a new Railway project.
- Select Deploy from GitHub.
- Set the Root Directory to
server. - Use the start command:
node server.js- Add the following environment variable:
PORT=3001- Generate a public Railway domain.
- Copy the generated URL.
- Add it to Vercel as:
VITE_API_URL=https://your-railway-urlcssframes/
├── src/
│ ├── api/ # API utilities
│ ├── components/ # Reusable UI components
│ ├── data/ # Motion presets & categories
│ ├── App.jsx
│ └── main.jsx
│
├── server/ # Community REST API
│ ├── db.json
│ ├── server.js
│ └── package.json
│
├── package.json
└── vite.config.js
CSSFrames is built around modern animation best practices.
- Prefer
transformandopacityfor smooth GPU-accelerated motion. - Avoid animating layout-triggering properties such as
width,height,top,left, ormargin. - Keep animations reusable and composable.
- Include meaningful metadata such as duration, easing, and description.
- Provide a preview for every new animation preset.
- Ensure exported animations work with both plain CSS and Tailwind CSS.
Contributions are always welcome, whether you're fixing bugs, improving documentation, or creating new motion presets.
# Fork the repository
git checkout -b motion/your-feature-name
# Make your changes
git commit -m "feat: add new motion preset"
git push origin motion/your-feature-nameOpen a Pull Request with a clear description of your changes and include previews whenever possible.
- Follow the existing code style.
- Keep animations GPU-friendly.
- Test animations before submitting.
- Include animation metadata and preview examples.
- Write clear, descriptive commit messages.
If you enjoyed this project, consider giving it a ⭐ on GitHub. It helps others discover the project and motivates future improvements.
This project is licensed under the MIT License.
MIT License
Copyright (c) 2026 Bilal Malik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software.The above copyright notice and this permission notice shall
be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
If CSSFrames helped you, consider giving the repository a ⭐ on GitHub. Your support helps the project reach more developers and motivates future improvements.
© 2026 CSSFRAMES. Licensed under the MIT License.