⚡ EaseMotion CSS

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.

Important

Temporary Contribution Guidelines & Freeze Notice

Due to the high volume of contributions and multiple merge conflicts affecting framework stability, PRs modifying core files, workflows, configs, or shared framework code are temporarily restricted.

For now, only self-contained submissions inside submissions/examples/* will be reviewed and merged.

This is being done to stabilize the repository, reduce breaking changes, and ensure contributor work is preserved without conflicts or accidental overwrites.

Core contribution access may reopen once the framework structure and validation systems are fully stabilized.

Table of Contents 📑

• Support the Project
• Project Statistics
• Browser Compatibility
• What is EaseMotion CSS?
• Why EaseMotion CSS?
• Quick Start
• Philosophy
• Usage & Examples
• Customization
• FAQ
• File Structure
• Roadmap
• Contributing
• Community
• Contributors
• Maintainer
• Changelog
• License

---

🚀 Quick Start

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" />

📖 Documentation · 🎮 Live Demo · 📦 npm · 🤝 Contributing

Animation Iterations

Looping animations in EaseMotion CSS (for example: .ease-bounce, .ease-pulse, .ease-rotate, .ease-ping, and the .ease-typewriter-loop) now respect a global CSS custom property: --ease-animation-iterations.

The default remains infinite so existing behavior is unchanged. To run looping animations a fixed number of times, override the variable in your project:

:root {
  --ease-animation-iterations: 3;
}

This will apply the iteration count to all looping animation utilities by default.

---

Support the Project ⭐

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
💖 Sponsor on GitHub	Directly support the creator to keep the project active and stable
⭐ 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.

---

Project Statistics 📊

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 (13 variants)
🔑 Design Tokens	60+ CSS custom properties
⚖️ Bundle Size	~15 kB (unpacked: ~62 kB)
📜 License	MIT
🔧 Build Step	❌ None required
🏗️ Dependencies	❌ Zero

---

Browser Compatibility 🌐

EaseMotion CSS is built for modern evergreen browsers and relies on CSS3 custom properties, CSS animations, Flexbox, CSS Grid, transforms, transitions, and keyframe animations.

Browser	Minimum Version	backdrop-filter	aspect-ratio	CSS variables	Animations	Notes
Chrome	49+	Supported	Supported	Supported	Supported
Firefox	31+	Supported	Supported	Supported	Supported
Safari	9.1+	Supported with -webkit-backdrop-filter fallback	Supported	Supported	Supported	Supported
Edge	15+	Supported	Supported	Supported	Supported
Opera	36+	Supported	Supported	Supported	Supported

Internet Explorer (IE 11 and earlier) is not supported.

---

What is EaseMotion CSS? ✨

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.

---

Why EaseMotion CSS? 🆚

	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

---

Quick Start ⚡

Option 1 — CDN (fastest, zero setup, recommended)

<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  <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.

Alternative CDN Providers

EaseMotion CSS can also be loaded using alternative CDN providers.

jsDelivr (recommended)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" />

unpkg

<link rel="stylesheet" href="https://unpkg.com/easemotion-css/easemotion.min.css" />

GitHub Raw CDN

<link rel="stylesheet" href="https://raw.githubusercontent.com/SAPTARSHI-coder/EaseMotion-css/main/easemotion.min.css" />

jsDelivr is recommended for production usage because it provides global caching and better reliability.

Option 2 — npm

npm install easemotion-css

Then 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";

Option 3 — Granular imports (pick only what you need)

<!-- Font (optional — for Inter typography) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

<!-- 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" />

Option 4 — Modular animation imports (load only what you need)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/variables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/fade.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/slide.css" />
<!-- Add only the animation categories you need -->

Full bundle

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/all.css" />

⚠️ easemotion/variables.css must always load before modular animation files. It provides the shared custom properties used by all animation categories.

Philosophy 🧠

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.

Four principles that never get broken

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

How the curation pipeline works

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.

---

Usage & Examples 💡

Animations

<!-- 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 left</h3>
<h4 class="ease-slide-in-right">Slide right</h4>
<h5 class="ease-slide-in-left">Slide from left</h5>
<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>

You can customize the iteration count of looping animations:

```css
:root {
  --ease-animation-iterations: 3;
}

By default, the value is infinite, preserving existing behavior.

Scroll-Triggered Animations (Ease Reveal)

To use .ease-reveal and have elements animate when scrolled into view, you must also include the reveal.js script in your HTML:

<!-- Add this before closing </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/easemotion-css/core/reveal.js"></script>

Then simply add .ease-reveal along with an animation class:

<div class="ease-reveal ease-slide-up">
  This animates when scrolled into view!
</div>

Hover Effects

<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.

Layout Utilities

<!-- 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 class="ease-self-end">Right</span>
</div>

<!-- Flex wrap utilities -->
<div class="ease-flex ease-flex-wrap ease-gap-3">Wrap</div>
<div class="ease-flex ease-flex-nowrap ease-gap-3">No wrap</div>
<div class="ease-flex ease-flex-wrap-reverse ease-gap-3">Reverse wrap</div>

<!-- Align self utilities -->
<div class="ease-flex ease-items-stretch ease-gap-3">
  <span class="ease-self-start">Start</span>
  <span class="ease-self-center">Center</span>
  <span class="ease-self-end">End</span>
  <span class="ease-self-stretch">Stretch</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>

<!-- Grid placement utilities -->
<div class="ease-grid ease-grid-cols-4 ease-place-center ease-gap-4">
  <div class="ease-col-span-2">Centered span 2</div>
  <div class="ease-col-span-1">Span 1</div>
  <div class="ease-col-span-1">Span 1</div>
</div>
<div class="ease-grid ease-grid-cols-3 ease-place-start ease-gap-4">Start</div>
<div class="ease-grid ease-grid-cols-3 ease-place-end ease-gap-4">End</div>

Align Self Utilities

<div class="ease-flex">
  <div class="ease-self-start">Start</div>
  <div class="ease-self-center">Center</div>
  <div class="ease-self-end">End</div>
  <div class="ease-self-stretch">Stretch</div>
</div>

Available Classes

• .ease-self-start → align-self: flex-start
• .ease-self-center → align-self: center
• .ease-self-end → align-self: flex-end
• .ease-self-stretch → align-self: stretch

Hover Animation Examples

Common hover-triggered animation examples are available for:

• Buttons
• Cards
• Images

Example showcase:

• hover-animation-showcase
• hover-sweep

Buttons

<!-- 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>

Cards

<!-- 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>

<!-- Neumorphic -->
<div class="ease-card ease-card-neumorphic">Soft UI card</div>

<!-- Accent border -->
<div class="ease-card ease-card-accent">Highlighted card</div>

Navigation

<nav class="ease-navbar-glass" aria-label="Primary navigation">
  <div class="ease-navbar-brand">EaseMotion</div>
  <div class="ease-navbar-menu">
    <a class="ease-navbar-item" href="#">Home</a>
    <a class="ease-navbar-item" href="#">Features</a>
    <a class="ease-navbar-item" href="#">Contact</a>
  </div>
</nav>

<nav class="ease-navbar-glass ease-navbar-glass-sticky" aria-label="Sticky navigation">
  <div class="ease-navbar-brand">Sticky Nav</div>
  <div class="ease-navbar-menu">
    <a class="ease-navbar-item" href="#">Overview</a>
    <a class="ease-navbar-item" href="#">Docs</a>
  </div>
</nav>

<nav class="ease-navbar-glass ease-navbar-glass-blur" aria-label="Blurred navbar">
  <div class="ease-navbar-brand">Deep Blur</div>
  <div class="ease-navbar-menu">
    <a class="ease-navbar-item" href="#">Product</a>
    <a class="ease-navbar-item" href="#">Support</a>
  </div>
</nav>

Build a Hero Section in 5 Lines

<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>

---

Customization ⚙️

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);
}

Override framework styles with @layer

EaseMotion wraps all its CSS behind @layer cascade layers. Your own styles always win — even if the framework loads after your stylesheet:

/* Your custom overrides — always takes priority */
@layer easemotion.components {
  .ease-btn-primary {
    background: var(--ease-color-orange);
    border-radius: 2rem;
  }
}

No !important needed.

---

FAQ

How does EaseMotion CSS differ from Tailwind?

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.

Can I use it with React/Vue?

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.

How do I submit a new component?

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.

Does it work without a build step?

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.

---

File Structure 📂

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               ← 13 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          ← source interactive showcase
├── docs/demo.html              ← deployed live demo page
├── 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

---

Roadmap 🗺️

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

---

Contributing 🤝

EaseMotion CSS is a curated, maintainer-reviewed framework. Contributors submit raw ideas — the maintainer handles standardization, naming, and integration.

✅ What contributors do

✅ 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

❌ What contributors do NOT do

❌ 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

The submission pipeline

Your raw CSS  →  Maintainer standardizes  →  ease-* class ships
.hover-grow       ease-hover-grow              core/animations.css

🌟 Why contribute?

• 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

📢 Contribution Policy Update

All contributions are welcome and eligible for merge when submitted inside the submissions/examples/ folder following the repository structure and guidelines.

To avoid naming conflicts and overlapping components, contributors must append a short unique identifier or abbreviation to their feature/component name.

Example:

• ease-hover-sap
• ease-tabs-ak
• ease-card-pr

This ensures:

• Unambiguous component naming,
• Preservation of every contributor’s work,
• Conflict-free merges,
• Easier maintenance and review workflow,
• Support for parallel implementations of similar ideas.

The project encourages creative variations and parallel implementations rather than overwriting existing contributor work.

---

Issue Labels 🏷️

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.

---

Community 💬

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.

---

Contributors 🏆

Everyone who has submitted a PR, opened an issue, or contributed an idea. This wall regenerates automatically on every push to main.

190 Contributors

SAPTARSHI-coder 285 commits	shresthbhargava 34 commits	Muditapandey26 19 commits	Nicks-19 16 commits	bhavyabhardwaj001 12 commits	kunal-9090 9 commits	AnanyaTiwari850 8 commits	saurabhhhcodes 7 commits	ishita526 6 commits	Dhruva5vora 6 commits	nyxsky404 6 commits	Rakshita006 6 commits
AyushPrad2907 6 commits	Pr241singh 5 commits	Premshaw23 5 commits	hiitarun1 5 commits	JoyceHanan 4 commits	AgnusSerena 4 commits	rishikareddy771 3 commits	pari-dubey1 3 commits	lokeshkumar69 3 commits	boss477 3 commits	Muskan-S123 3 commits	sdeepika-2606 3 commits
bh462007 3 commits	Xploit-Ghost 3 commits	Anshu2607-iiitr 3 commits	Abhay-1704 2 commits	kshah123919 2 commits	shivanisreejith1 2 commits	adittya-code 2 commits	SaiRishithaK 2 commits	Paawangarg1084 2 commits	mohamedfahim18 2 commits	Aditisingh0102 2 commits	Akshu121796 2 commits
alishaalmeida10 2 commits	Ankitkr16 2 commits	AnushKamble 2 commits	dishamaurya081-create 2 commits	Jeet-Srivastava 2 commits	kas2804 2 commits	Krish-Mishra 2 commits	sinchana-aiml 1 commits	siri-004 1 commits	SRSoham 1 commits	Vishvadharman 1 commits	zairahussain27 1 commits
aditip01-cloud 1 commits	kejriwalkaushal04 1 commits	khushboo-khatoon 1 commits	kunalSingh026 1 commits	rachika08 1 commits	riddhimagupta2 1 commits	saibhumi146 1 commits	surajbharsakle07 1 commits	tejasch2006-ux 1 commits	unnatipandey19 1 commits	panditshubham766-dotcom 1 commits	saksham0777 1 commits
ritikamahato924 1 commits	RaviCoderWallah 1 commits	Rashi1404 1 commits	NirmalSingh-09 1 commits	EchoOfCode 1 commits	Man1ac-1773 1 commits	maheshbhojane1 1 commits	Lehana02 1 commits	hematejaswi-30 1 commits	bhavyajain0810 1 commits	aasheeshhh 1 commits	alisha-khan6 1 commits

Auto-updated daily · View all →

---

Maintainer 👤

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.

---

Changelog 📜

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.

---

License ⚖️

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

Accessibility

EaseMotion CSS supports the prefers-reduced-motion media query to respect users who prefer reduced motion and reduce animation-related discomfort. When enabled at the operating system level, animations and transitions are minimized to provide a more accessible experience.