Human-readable. Animation-first. Zero dependencies.
Write UI like you describe it in English. No build steps. No memorizing shorthand. Just link a file and ship.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" />If EaseMotion CSS saves you time or helps your learning journey, please consider supporting it.
Most people simply forget. This is your reminder. 😊
| Action | Why it matters |
|---|---|
| ⭐ Star the repo | Helps more developers discover the project |
| 🍴 Fork and contribute | Your idea could become a real framework class |
| 🐞 Report an issue | Bugs you catch make it better for everyone |
| 💡 Suggest a feature | Good ideas ship faster than you think |
Stars cost nothing and mean everything to an independent open-source project. If this saved you even 10 minutes, it's worth a click.
| Metric | Value |
|---|---|
| 📦 npm Package | easemotion-css |
| 🌐 CDN | cdn.jsdelivr.net/npm/easemotion-css |
| ⚡ Classes | 80+ utility classes, 20+ animation classes |
| 🎨 Components | Buttons (6 variants), Cards (12 variants) |
| 🔑 Design Tokens | 60+ CSS custom properties |
| ⚖️ Bundle Size | ~15 kB (unpacked: ~62 kB) |
| 📜 License | MIT |
| 🔧 Build Step | ❌ None required |
| 🏗️ Dependencies | ❌ Zero |
EaseMotion CSS is a curated, animation-first CSS framework where class names read like plain English. No memorizing shorthand. No build steps. No configuration. Just write HTML and it works.
<!-- This is all it takes -->
<div class="ease-center ease-fade-in">
<h1 class="ease-slide-up ease-delay-100">Build faster.</h1>
<p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
<button class="ease-btn ease-btn-primary ease-btn-pill ease-hover-grow ease-delay-300">
Get Started →
</button>
</div>⚡ Build beautiful animated interfaces using readable CSS classes. No build step. No configuration. Just link a file and start building.
| Vanilla CSS | Tailwind CSS | EaseMotion CSS | |
|---|---|---|---|
| Setup | Write from scratch | Build step + config | Link one file |
| Readability | ✅ High | ❌ Low (px-4 flex gap-x-2) |
✅ High (ease-center) |
| Animations | ⚙️ Manual | 🔸 Minimal | ✅ First-class |
| Zero config | ✅ | ❌ | ✅ |
| Quality control | You | You | ✅ Curated by maintainer |
| CDN ready | N/A | ❌ | ✅ Yes |
| Learning curve | High | Medium | ✅ Near zero |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" />
</head>
<body>
<div class="ease-center ease-fade-in">
<h1>Hello, EaseMotion!</h1>
</div>
</body>
</html>Powered by jsDelivr — globally cached, always fast, no account needed. The CDN link is live the moment you paste it.
npm install easemotion-cssThen in your HTML:
<link rel="stylesheet" href="node_modules/easemotion-css/easemotion.min.css" />Or in CSS / PostCSS / Sass:
@import "easemotion-css/easemotion.min.css";<!-- Core (always required — load in this exact order) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/variables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/base.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/animations.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/utilities.css" />
<!-- Components — add only what you use -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/components/buttons.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/components/cards.css" />
⚠️ variables.cssmust always load first. Every other module depends on the CSS custom properties it defines.
EaseMotion CSS is not just a CSS library — it is a design language.
"If you can say it in English, you should be able to write it as a class."
<!-- Center this --> <div class="ease-center">
<!-- Fade this in --> <h1 class="ease-fade-in">
<!-- Make it grow on hover --><button class="ease-hover-grow">
<!-- Slide up with delay --> <p class="ease-slide-up ease-delay-200">No documentation lookup required. The class name is the documentation.
| Principle | What it means |
|---|---|
| Human-readable | Class names describe behavior in plain English |
| Animation-first | Motion is a first-class citizen, not an afterthought |
| Composable | Stack any classes freely — no specificity wars, ever |
| Curated | Every single class is maintainer-reviewed before release |
1. Contributors submit raw HTML + CSS
↓
2. Maintainer reviews and evaluates fit
↓
3. Code is converted into EaseMotion CSS format
(ease-* naming · CSS variables · accessibility)
↓
4. Integrated into core/ or components/
↓
5. Released, documented, and credited
Every class in the framework has passed through this process. The curation is what makes EaseMotion CSS consistent.
<!-- Entrance animations (fire on page load) -->
<h1 class="ease-fade-in">Fade in</h1>
<h2 class="ease-slide-up">Slide up</h2>
<h3 class="ease-slide-in-left">Slide from left</h3>
<h4 class="ease-zoom-in">Zoom in</h4>
<h5 class="ease-flip">3D flip</h5>
<h5>class="ease-contract-image-entrance">Contract image entrance</h5>
<!-- Staggered sequence — each item 100ms after previous -->
<div class="ease-slide-up ease-delay-100">First</div>
<div class="ease-slide-up ease-delay-200">Second</div>
<div class="ease-slide-up ease-delay-300">Third</div>
<!-- Looping animations -->
<div class="ease-bounce">Bouncing</div>
<div class="ease-pulse">Pulsing</div>
<div class="ease-rotate">Rotating</div>
<div class="ease-ping">Ping</div>
<!-- Exit animation -->
<div class="ease-expand-border-exit"></div><button class="ease-hover-grow">Scales up on hover</button>
<div class="ease-hover-morph-card">Morph</div>
<div class="ease-hover-glow">Primary color glow</div>
<div class="ease-hover-lift">Lifts with shadow</div>
<div class="ease-hover-shimmer">Shimmer sweep effect</div>
<a class="ease-hover-underline">Animated underline</a>
<span class="ease-hover-bounce-text">Bounce!</span>Applies a quick squish animation during hover, focus, and active interactions.
<!-- Centering (the most-used utility) -->
<div class="ease-center">Perfectly centered</div>
<!-- Flexbox -->
<div class="ease-flex ease-justify-between ease-items-center ease-gap-4">
<span>Left</span>
<span>Right</span>
</div>
<!-- Responsive auto-fit grid (no media queries needed) -->
<div class="ease-grid ease-grid-auto ease-gap-6">
<div class="ease-card">Card 1</div>
<div class="ease-card">Card 2</div>
<div class="ease-card">Card 3</div>
</div><!-- Variants -->
<button class="ease-btn ease-btn-primary">Primary</button>
<button class="ease-btn ease-btn-success">Success</button>
<button class="ease-btn ease-btn-danger">Danger</button>
<button class="ease-btn ease-btn-outline">Outline</button>
<button class="ease-btn ease-btn-ghost">Ghost</button>
<!-- With hover animation -->
<button class="ease-btn ease-btn-primary ease-btn-hover">Animated</button>
<!-- With squish button -->
<button class="ease-btn ease-btn-primary ease-squish-button">Squish Me</button>
<!-- Sizes + shapes -->
<button class="ease-btn ease-btn-primary ease-btn-sm">Small</button>
<button class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill">Large Pill</button><!-- Hover card with shadow -->
<div class="ease-card ease-card-shadow ease-card-hover">
<div class="ease-card-header">
<h3 class="ease-card-title">Title</h3>
</div>
<div class="ease-card-body"><p>Content goes here.</p></div>
<div class="ease-card-footer">
<button class="ease-btn ease-btn-primary ease-btn-sm">Action</button>
</div>
</div>
<!-- Glassmorphism -->
<div class="ease-card ease-card-glass">Glass card</div>
<!-- Accent border -->
<div class="ease-card ease-card-accent">Highlighted card</div><section class="ease-center ease-padding-16">
<h1 class="ease-fade-in">Build faster.</h1>
<p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
<button class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill ease-hover-grow ease-delay-300">
Get Started →
</button>
</section>Override any CSS custom property to theme the entire framework — no Sass, no PostCSS, just CSS:
:root {
/* Colors */
--ease-color-primary: #f97316; /* swap to orange */
--ease-color-success: #10b981; /* teal green */
/* Motion */
--ease-speed-fast: 100ms; /* snappier */
--ease-speed-medium: 400ms; /* slightly slower */
--ease-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Shape */
--ease-radius-md: 1rem; /* rounder corners */
--ease-radius-full: 9999px;
/* Shadows */
--ease-shadow-md: 0 4px 20px rgba(0,0,0,0.15);
}Tailwind is a utility-first framework built around short atomic class names and usually fits best in a build-driven workflow. EaseMotion CSS focuses on human-readable class names like ease-center and ease-fade-in, treats animation as a first-class feature, and is designed to work immediately by linking a stylesheet.
Yes. EaseMotion CSS works with React, Vue, plain HTML, or any framework that renders standard class attributes. You can install it from npm, import the stylesheet, and use the classes directly in your components.
Open or claim an issue first for non-trivial ideas, then add your raw demo inside submissions/examples/your-feature-name/ with demo.html, style.css, and README.md. The maintainer reviews it, standardizes naming, and integrates it into the framework if it fits the project.
Yes. That is one of the core goals of EaseMotion CSS. You can use the CDN link or local CSS files directly without configuring a bundler, compiler, or build pipeline.
easemotion-css/
├── easemotion.css ← readable source entry point
├── easemotion.min.css ← bundled production build
│
├── core/ ← MAINTAINER-ONLY
│ ├── variables.css ← 60+ design tokens
│ ├── base.css ← reset + typography (Inter font)
│ ├── animations.css ← 20+ animation classes
│ └── utilities.css ← 80+ layout utilities
│
├── components/ ← MAINTAINER-ONLY
│ ├── buttons.css ← 6 variants, 4 sizes, pill, icon
│ └── cards.css ← 12 card variants
│
├── submissions/ ← CONTRIBUTOR AREA
│ ├── README.md ← full submission workflow
│ └── examples/
│ ├── hover-grow/ ← [INTEGRATED] → ease-hover-grow
│ ├── hover-shimmer/ ← [INTEGRATED] → ease-hover-shimmer
│ ├── card-lift/ ← [INTEGRATED] → ease-card-lift
│ └── button-glow/ ← pending review
│
├── examples/demo.html ← interactive live showcase
├── docs/index.html ← full documentation site
│
├── .github/
│ ├── CODEOWNERS
│ ├── ISSUE_TEMPLATE/
│ │ ├── feature_request.md
│ │ └── bug_report.md
│ └── PULL_REQUEST_TEMPLATE.md
│
├── VISION.md ← long-term project direction
├── CHANGELOG.md ← full release history
├── CONTRIBUTING.md ← contribution guide
├── LICENSE ← MIT © 2026 Saptarshi Sadhu
└── README.md
Track progress and vote on features via GitHub Issues.
| Feature | Status |
|---|---|
| ✅ Human-readable core utilities (80+) | Shipped — v1.0 |
| ✅ Animation-first motion library (20+) | Shipped — v1.0 |
| ✅ Curated contribution pipeline | Shipped — v1.0 |
| ✅ Component library (buttons, cards) | Shipped — v1.0 |
| ✅ npm package + jsDelivr CDN | Shipped — v1.0 |
| ✅ Full documentation site | Shipped — v1.0 |
| 🔜 Form components (inputs, checkboxes, toggles) | Planned — v1.1 |
| 🔜 Dark mode token layer | Planned — v1.1 |
| 🔜 Modal & tooltip components | Planned — v1.2 |
| 🔜 Scroll-triggered animations (IntersectionObserver) | Planned — v1.2 |
| 🔜 Navigation components (navbar, sidebar) | Planned — v1.3 |
| 🔜 CSS-only accordion & tabs | Planned — v1.3 |
| 🔜 Badge, tag, avatar, progress bar | Planned — v1.3 |
| 🔜 Theming CLI (generate custom token file) | Exploring |
EaseMotion CSS is a curated, maintainer-reviewed framework. Contributors submit raw ideas — the maintainer handles standardization, naming, and integration.
✅ Add a folder to submissions/examples/your-feature/
✅ Include: demo.html + style.css + README.md
✅ Use any class naming — no ease- prefix required
✅ One feature per PR
❌ Edit core/ → PR closed without review
❌ Edit components/ → PR closed without review
❌ Merge their own PRs → Maintainer-only
❌ Claim more than 2 active issues at once
Your raw CSS → Maintainer standardizes → ease-* class ships
.hover-grow ease-hover-grow core/animations.css
- Beginner-friendly — write raw CSS, no conventions to memorize
- Learn real system design — see how raw ideas become a coherent API
- Your idea ships — accepted submissions become real framework classes
- Credited in CHANGELOG — your contribution is documented permanently
- Your name in the README — see the contributor wall below
📖 Read the full guide → CONTRIBUTING.md
| Label | Used for |
|---|---|
good first issue |
Easy entry points, perfect for first-time contributors |
animation |
Hover effects, entrance animations, keyframe ideas |
component |
New UI components (modals, tooltips, badges, etc.) |
enhancement |
Improvements to existing classes |
documentation |
README, docs site, submission guide |
curated |
Accepted into the framework |
maintainer-approved |
Reviewed, pending integration |
featured |
Exceptional submission — will be showcased |
Issue Cooldown Rule: Maximum 2 active assigned issues per contributor. Issues with no progress for 5 days are unassigned and reopened.
| Platform | Link |
|---|---|
| 🐛 Bug Reports | Open an issue |
| 💡 Feature Requests | Request a feature |
| 🔀 Pull Requests | Submit a contribution |
| 📖 Documentation | Full docs site |
| 📦 npm Package | easemotion-css on npm |
| 🌐 CDN | jsDelivr |
| 🏆 GSSoC 2026 | GirlScript Summer of Code |
⭐ If EaseMotion CSS saves you time, consider starring the repo. It helps more developers discover the project and motivates continued development.
Everyone who has submitted a PR, opened an issue, or contributed an idea. This wall regenerates automatically on every push to main.
Auto-updated daily · View all →
Saptarshi Sadhu
EaseMotion CSS is designed, curated, and actively maintained by Saptarshi Sadhu. All contributions are reviewed and standardized before integration. The framework does not accept unreviewed direct edits.
Only the maintainer merges pull requests. This is enforced via CODEOWNERS.
See CHANGELOG.md for the full release history.
Latest: v1.0.0 — Initial public release. 80+ utilities, 20+ animations, buttons, cards, full docs site, npm + CDN.
MIT © 2026 Saptarshi Sadhu — see LICENSE for details.
You are free to use EaseMotion CSS in personal and commercial projects. Attribution appreciated but not required.
Thank you for building EaseMotion CSS with me. 💜
Every star, every PR, every issue — it all adds up.
— Saptarshi Sadhu · @SAPTARSHI-coder
Built with care · Zero dependencies · Animation-first · Community-driven