# โก EaseMotion CSS
**A zero-dependency, animation-first CSS framework for faster, more expressive UI.**
EaseMotion CSS lets you build polished interfaces with readable class names such as `ease-fade-in`, `ease-slide-up`, and `ease-hover-grow`. No build step, no complex setup, and no need to memorize shorthand.
[](https://www.npmjs.com/package/easemotion-css)
[](https://committers.top/india_public)
[](https://committers.top/india_private)
[](https://github.com/sponsors/SAPTARSHI-coder)
[](https://discord.gg/hWSdGrccBU)
[](https://www.npmjs.com/package/easemotion-css)
[](https://www.jsdelivr.com/package/npm/easemotion-css)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/stargazers)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/network/members)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/graphs/contributors)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/pulls?q=is%3Apr+is%3Amerged)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/pulls?q=is%3Apr+is%3Aclosed)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/issues?q=is%3Aissue+is%3Aclosed)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/pulls)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/issues)
[](./LICENSE)
[](https://gssoc.girlscript.tech/)
[](https://github.com/SAPTARSHI-coder)
> [!IMPORTANT]
> **๐ข Maintainer Announcement & Contribution Guidelines (August 2026)**
>
> 1. **๐ All Contributor Accounts Unbanned:** All contributor soft-bans have been removed! Everyone is welcome to contribute.
> 2. **โฑ๏ธ Daily Contribution Rate Limit:** Maximum **100 PRs per day** per contributor to maintain stability and review quality.
> 3. **โจ 500 New Approved GSSoC Issues Available:** 500 brand new approved issues (#59099 to #59610) are open for contribution!
> 4. **๐ Submission Directory:** All PRs MUST be submitted under `submissions/examples/your-feature-name/` containing `demo.html`, `style.css`, and `README.md`.
## Table of Contents ๐
- [Support the Project](#support-the-project)
- [Project Statistics](#project-statistics)
- [Browser Compatibility](#browser-compatibility)
- [What is EaseMotion CSS?](#what-is-easemotion-css)
- [Why EaseMotion CSS?](#why-easemotion-css)
- [Quick Start](#quick-start)
- [Framework Integration](#framework-integration)
- [React + Vite](#react--vite)
- [Next.js](#nextjs)
- [Vue / Svelte / Astro](#vue--svelte--astro)
- [SCSS Integration](#scss-integration)
- [Philosophy](#philosophy)
- [Usage and Examples](#usage-and-examples)
- [Customization](#customization)
- [FAQ](#faq)
- [File Structure](#file-structure)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [Community](#community)
- [Contributors](#contributors)
- [Maintainer](#maintainer)
- [Changelog](#changelog)
- [License](#license)
---
### ๐ Quick Setup
```html
```
**[๐ Documentation](https://saptarshi-coder.github.io/EaseMotion-css/) ยท [๐ฎ Live Demo](https://saptarshi-coder.github.io/EaseMotion-css/demo.html) ยท [๐ฆ npm](https://www.npmjs.com/package/easemotion-css) ยท [๐ค Contributing](./CONTRIBUTING.md)**
### Controlling looping animations
Looping animations such as `.ease-bounce`, `.ease-pulse`, `.ease-rotate`, `.ease-ping`, and `.ease-typewriter-loop` use the CSS variable `--ease-animation-iterations`.
The default value is `infinite`, which keeps existing behavior unchanged. If you want a looping animation to run only a few times, set the variable once in your project:
```css
: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**](https://github.com/sponsors/SAPTARSHI-coder) | Directly support the creator to keep the project active and stable |
| [โญ **Star the repo**](https://github.com/SAPTARSHI-coder/EaseMotion-css/stargazers) | Helps more developers discover the project |
| [๐ด **Fork and contribute**](./CONTRIBUTING.md) | Your idea could become a real framework class |
| [๐ **Report an issue**](https://github.com/SAPTARSHI-coder/EaseMotion-css/issues/new?template=bug_report.md) | Bugs you catch make it better for everyone |
| [๐ก **Suggest a feature**](https://github.com/SAPTARSHI-coder/EaseMotion-css/issues/new?template=feature_request.md) | 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
---
## 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.
> 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. It is designed for developers who want expressive motion and clean HTML without a build tool or complex configuration.
```html
Build faster.
Animation-first CSS for humans.
```
### Why it is easy to use
- Readable utility names such as `ease-center` and `ease-hover-grow`
- Zero dependency setup with CDN or npm
- Ready-to-use motion, layout, and component helpers
- Easy customization through CSS variables
---
## 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)_
```html
Hello, EaseMotion!
```
> 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)
```html
```
### unpkg
```html
```
### GitHub Raw CDN
```html
```
> jsDelivr is recommended for production usage because it provides global caching and better reliability.
### Option 2 โ npm
```bash
npm install easemotion-css
```
Then in your HTML:
```html
```
Or in CSS / PostCSS / Sass:
```css
@import "easemotion-css/easemotion.min.css";
```
### Option 3 โ Granular imports _(pick only what you need)_
```html
```
### Option 4 โ Modular animation imports _(load only what you need)_
```html
```
### Full bundle
```html
```
> โ ๏ธ **`easemotion/variables.css` must always load before modular animation files.** It provides the shared custom properties used by all animation categories.
---
## Framework Integration
EaseMotion CSS is a pure CSS library โ it works out of the box with every JavaScript framework by simply importing the stylesheet and applying class names to elements. Additionally, we ship a dedicated **React integration layer** to make animations even more declarative in JSX.
---
### React + Vite
#### 1. Install EaseMotion CSS
```bash
npm install easemotion-css
```
#### 2. Import in your entry file
```jsx
// main.jsx or App.jsx
import 'easemotion-css/easemotion.min.css';
```
#### 3. Use classes directly in JSX
```jsx
export default function HeroSection() {
return (
Build faster.
Animation-first CSS for humans.
);
}
```
#### 4. Use the `` wrapper component _(optional โ in `examples/react-vite/`)_
We ship a React wrapper component that turns animation settings into declarative props:
```jsx
// Copy Animate.jsx from examples/react-vite/src/components/Animate.jsx
import Animate from './components/Animate';
export default function App() {
return (
<>
{/* Fade in with a 200ms delay */}
```
### Navigation
```html
```
```html
```
```html
```
### Build a Hero Section in 5 Lines
```html
Build faster.
Animation-first CSS for humans.
```
---
## Customization
Override any CSS custom property to theme the entire framework โ no Sass, no PostCSS, just CSS:
```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:
```css
/* 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 any framework that renders standard HTML `class` attributes โ React, Vue, Svelte, Angular, Astro, Next.js, and more. Install from npm, import the stylesheet, and use the class names directly in your components. We also ship a dedicated React `` wrapper component in `examples/react-vite/` โ see the [Framework Integration](#framework-integration) section for details.
### How do I submit a new component or utility?
Open or claim an issue first, then submit your work under the appropriate track directory in `submissions/` (e.g., `submissions/examples/` for HTML/CSS, `submissions/react/` for React components, `submissions/scss/` for SCSS mixins/tokens, or `submissions/docs/` for core bug fixes & docs showcases). The maintainer reviews your submission, standardizes names/tokens, and integrates it into the core framework.
### 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
โ
โโโ scss/ โ SCSS INTEGRATION LAYER
โ โโโ _index.scss โ entry point (@forward variables + mixins)
โ โโโ _variables.scss โ SCSS animation tokens ($speed-*, $ease-*)
โ โโโ _mixins.scss โ reusable SCSS mixins (animate, hover-effect...)
โ
โโโ examples/ โ INTEGRATION SHOWCASES
โ โโโ demo.html โ source interactive showcase
โ โโโ react-vite/ โ โ๏ธ React + Vite integration showcase
โ โ โโโ src/
โ โ โ โโโ App.jsx โ interactive animation playground
โ โ โ โโโ App.css โ dark-mode dashboard styles
โ โ โ โโโ components/
โ โ โ โโโ Animate.jsx โ React wrapper component
โ โ โโโ package.json
โ โโโ ...
โ
โโโ docs/demo.html โ deployed live demo page
โโโ docs/index.html โ full documentation site
โ
โโโ 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
โ
โโโ .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](https://github.com/SAPTARSHI-coder/EaseMotion-css/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** |
| โ React + Vite integration showcase | **Shipped โ v1.1** |
| โ SCSS token layer (variables + mixins) | **Shipped โ v1.1** |
| ๐ง React component library (hooks + wrappers) | **In Progress โ v1.1** |
| ๐ง SCSS modular partials (per-animation modules) | **In Progress โ v1.1** |
| ๐ง Next.js App Router template | **In Progress โ v1.1** |
| ๐ Form components (inputs, checkboxes, toggles) | **Planned โ v1.2** |
| ๐ Dark mode token layer | **Planned โ v1.2** |
| ๐ 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
```
โ Place submissions inside the correct track folder (submissions/examples/, submissions/react/, submissions/scss/, or submissions/docs/)
โ Include all required files (e.g. JSX + README for React, SCSS + README for SCSS, or HTML + CSS + README for Standard)
โ Follow the suffix naming rule (e.g. ease-component-yourid) to avoid name collisions
โ Squash commits to keep the repository history clean
โ One feature/component 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](./CONTRIBUTING.md)
### ๐ข Contribution Rate Limit Update
To maintain repository stability, review quality, and fair contribution distribution, EaseMotion CSS is introducing a soft contribution limit:
- Contributors may submit up to **25 PRs per day**
- Focus on quality, originality, accessibility, and proper testing
- Low-effort, repetitive, or mass-generated PRs may be closed without review
#### Why This Change?
EaseMotion CSS has grown rapidly with hundreds of contributors and thousands of merged PRs. This update helps:
- Reduce merge conflicts
- Improve review quality
- Maintain framework consistency
- Encourage meaningful contributions over quantity
### ๐งน Clean Commit History & Squashing
To keep the repository's git history clean and readable, contributors must follow these rules:
- **Squash your commits:** Ensure all commits in your Pull Request are squashed into a single meaningful commit (or a few logical commits) before submitting for review. Do not push dozens of micro-commits (e.g., "fix", "typo", "update style.css", etc.) for a single change.
- **Keep history clean:** PRs containing noisy, repetitive, or excessive commit histories (e.g., dozens of micro-commits) may be closed without review or blocked from merging.
- **Write clear commit messages:** Use descriptive commit messages following the Conventional Commits format (e.g., `feat: add card component` or `fix: resolve hover animation issue`).
---
### ๐ข Contribution Policy Update
All contributions are welcome and eligible for merge when submitted inside the correct track folder under the `submissions/` directory following the repository guidelines.
To avoid naming conflicts and overlapping implementations, contributors must append a short unique identifier or abbreviation to their feature/component/mixin 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 24 hours (1 day) are unassigned and reopened.
---
## Community
> โญ **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.
*Auto-updated daily ยท [View all โ](https://github.com/SAPTARSHI-coder/EaseMotion-css/graphs/contributors)*
---
## Maintainer
**Saptarshi Sadhu**
[](https://github.com/SAPTARSHI-coder)
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](./.github/CODEOWNERS).
---
## Changelog
See [CHANGELOG.md](./CHANGELOG.md) for the full release history.
**Latest: [v1.1.0](./CHANGELOG.md)** โ New text motion & ambient utilities, v1.1 release, minified bundle optimization, 12,000+ merged PRs.
---
## License
**MIT ยฉ 2026 Saptarshi Sadhu** โ see [LICENSE](./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](https://github.com/SAPTARSHI-coder)_
[](https://www.npmjs.com/package/easemotion-css)
[](https://github.com/SAPTARSHI-coder/EaseMotion-css/stargazers)
[](./LICENSE)
[](https://github.com/sponsors/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.
