``` 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 feature, not an add-on | | **Composable** | Stack classes freely with no specificity wars | | **Curated** | Every class is maintainer-reviewed before release | --- ## ⚙️ How EaseMotion CSS Works EaseMotion CSS uses a structured pipeline from raw idea to released class: ``` 1. Contributors submit raw HTML + CSS ↓ 2. Maintainer reviews and evaluates fit ↓ 3. Code is converted into EaseMotion CSS format (ease-* naming, CSS variables, comments) ↓ 4. Integrated into core/ or components/ ↓ 5. Released and documented ``` Every class in the framework has passed through this process. The curation is what makes EaseMotion CSS consistent. --- ## 📦 Usage Examples ### Layout ```html

Centered

Card 1

Card 2

Card 3

LeftRight

``` ### Animations ```html

Hello

Subtitle

First

Second

Third

Grows on hover

Glows on hover

Shimmer sweep

Lifts on hover

``` ### Buttons ```html Primary Success Danger Outline Animated Small Large Pill ``` ### Cards ```html

Title

Content

Action

``` --- ## ⚙️ Customization Override any CSS variable to theme the entire framework in one block: ```css :root { --ease-color-primary: #f97316; /* orange */ --ease-speed-medium: 500ms; /* slower */ --ease-radius-md: 1rem; /* rounder */ } ``` --- ## 📂 File Structure ``` easemotion-css/ ├── easemotion.css ← SINGLE IMPORT ENTRY POINT │ ├── core/ ← MAINTAINER-ONLY │ ├── variables.css ← design tokens │ ├── base.css ← reset + typography │ ├── animations.css ← animation library │ └── utilities.css ← layout utilities │ ├── components/ ← MAINTAINER-ONLY │ ├── buttons.css │ └── cards.css │ ├── submissions/ ← CONTRIBUTOR AREA │ ├── README.md ← 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 ← live showcase ├── docs/index.html ← documentation site │ ├── .github/ │ ├── CODEOWNERS │ ├── ISSUE_TEMPLATE/feature_request.md │ └── PULL_REQUEST_TEMPLATE.md │ ├── VISION.md ← project direction ├── CHANGELOG.md ← release history ├── CONTRIBUTING.md ├── LICENSE ← MIT © 2026 Saptarshi Sadhu └── README.md ``` --- ## 🏷️ Issue Labels | Label | Used for | |-------|----------| | `good first issue` | Easy submissions, ideal for first contributions | | `animation` | Hover effects, entrance animations, keyframe ideas | | `component` | New UI components (tooltips, modals, badges, etc.) | | `enhancement` | Improvements to existing classes | | `documentation` | README, docs site, submission guide updates | --- ## ⚠️ Contribution Policy EaseMotion CSS is a **curated, maintainer-reviewed framework**. It is not an open-edit project. ### 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 ``` ### How submissions become framework classes ``` 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 the changelog - **Build in public** — your submission folder stays in the repo permanently as a contribution record See [submissions/README.md](./submissions/README.md) for the full workflow. --- ## 🌐 Official Maintainer **Saptarshi Sadhu** GitHub: [@SAPTARSHI-coder](https://github.com/SAPTARSHI-coder) > Only the maintainer merges pull requests. This is enforced via [CODEOWNERS](./.github/CODEOWNERS). --- ## License MIT © 2026 Saptarshi Sadhu — see [LICENSE](./LICENSE). ---

Built with care  ·  Zero dependencies  ·  Animation-first