Introduction

EaseMotion CSS

EaseMotion CSS is a human-readable, animation-first CSS library. Write UI with simple, English-like class names — no memorizing utilities, no complex configuration.

EaseMotion CSS bridges the gap between raw vanilla CSS and utility-heavy frameworks like Tailwind.

Design Philosophy

Principle	What it means
`Human-readable`	Class names read like plain English, e.g. `ease-fade-in`
`Animation-first`	Animations are first-class citizens, not accessories bolted on later
`Composable`	Stack modifier classes freely — no specificity wars
`Clean & minimal`	No dependencies, no build steps, no JavaScript required

Installation

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

Link the main stylesheet directly in your HTML <head>.

html

<!-- CDN via jsDelivr (GitHub) — recommended, works everywhere -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SAPTARSHI-coder/EaseMotion-css@main/easemotion.min.css" />

Alternative CDN providers:

html

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

Option 2 — npm

Install the package locally in your project:

bash

npm install easemotion-css

Then import or link to the stylesheet:

html

<!-- Link in HTML -->
<link rel="stylesheet" href="node_modules/easemotion-css/easemotion.min.css" />

css

/* Import in CSS / PostCSS / Sass */
@import "easemotion-css/easemotion.min.css";

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

Load individual stylesheets for core features or specific components:

html

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

Load variables and specific categories:

html

<!-- Always load variables first -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/variables.css" />

<!-- Load only categories you need -->
<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" />

<!-- Or get the 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.

v1.2 · Opt-in

Motion Engine

The Motion Engine is an opt-in JavaScript runtime that lets you describe animations directly in HTML using the em="" attribute. The engine tokenizes, compiles, and injects optimized CSS at runtime — no pre-build step required.

Pure CSS users are unaffected. The engine is fully opt-in. You can continue using ease-* classes without importing any JS.

em= Attribute Syntax

Import the engine once, then annotate any element with em="":

html

<!-- 1. Import the engine (once, in <head> or your JS entry) -->
<script type="module">
  import 'easemotion-css/engine';
</script>

<!-- 2. Annotate elements — no class names needed -->
<div em="fade-in 500ms ease-out"></div>
<div em="slide-up 800ms spring delay-200ms"></div>
<button em="bounce repeat-infinite">Click me</button>

Token Reference

Token type	Examples	Default
Animation name	`fade-in`, `slide-up`, `bounce`, `spin`	required
Duration	`300ms`, `1.5s`	`300ms`
Easing	`ease`, `ease-out`, `spring`, `bounce`, `linear`	`ease`
Delay	`delay-200ms`, `delay-1s`	`0ms`
Repeat	`repeat-2`, `repeat-infinite`	`1`
Fill mode	`forwards`, `backwards`, `both`	`both`

Using individual APIs

js

// Import individual modules via the exports map
import { parse }            from 'easemotion-css/engine/parser';
import { compile, className } from 'easemotion-css/engine/compiler';
import { optimizeHtml }     from 'easemotion-css/engine/optimizer';

const ast = parse('fade-in 500ms ease-out delay-100ms');
// { animation: 'fade-in', duration: 500, easing: '...', delay: 100, ... }

const cls = className(ast);  // '_em_a3f2c1' — stable, deterministic
const css = compile(ast, cls); // CSS rule string, ready to inject

Build-time Tree-shaking

The optimizer strips unused @keyframes and .ease-* classes from your CSS bundle at build time, reducing payload size:

js

import { readFileSync } from 'fs';
import { optimizeHtml } from 'easemotion-css/engine/optimizer';

const html    = readFileSync('index.html', 'utf8');
const fullCss = readFileSync('node_modules/easemotion-css/easemotion.min.css', 'utf8');

const { css, stats } = await optimizeHtml(html, fullCss);
console.log(`Savings: ${stats.savings}`);
// Savings: 42.3%

🎮 Try it in EaseMotion Studio →

Variables

All values are defined as CSS custom properties in :root.

css

:root {
  --ease-color-primary: #7c3aed;
  --ease-speed-medium: 400ms;
}

Dark Mode

css

@media (prefers-color-scheme: dark) {
  :root {
    --ease-color-bg:      #0f172a;
    --ease-color-surface: #111827;
    --ease-color-text:    #f8fafc;
  }
}

Utilities

EaseMotion CSS includes lightweight, composable utilities for spacing, layout, flexbox, grid, and typography.

html

<!-- Center content -->
<div class="ease-center"> ... </div>
 
<!-- Flex with gap -->
<div class="ease-flex ease-gap-4 ease-items-center"> ... </div>

Aesthetic & Visual Utilities

Expressive visual utilities to build premium glassmorphism, blended filters, text strokes, and background highlights without leaving your HTML.

Category	Classes	Effect / Example
Backdrop Blur	`ease-backdrop-blur` `ease-backdrop-blur-sm` `ease-backdrop-blur-md` `ease-backdrop-blur-lg`	Glassmorphic backdrop blur (4px, 8px, 12px, 20px)
Mix Blend Modes	`ease-blend-{normal\|multiply\|screen\|overlay\|difference\|exclusion}` `ease-isolate`	Blends element with its backdrop container
Mask Image	`ease-mask-from-top` `ease-mask-from-bottom` `ease-mask-radial`	Fades element edges using linear or radial alpha gradients
Text Stroke	`ease-text-stroke` `ease-text-stroke-0` `ease-text-stroke-1` `ease-text-stroke-2` `ease-text-fill-none`	Outlines text with currentColor. Combine with fill-none for hollow text.
Gradient Text	`ease-gradient-text` `ease-gradient-text-animated`	Applies a fluid linear gradient fill (primary to secondary)
Text Highlight	`ease-highlight-text`	A sleek, translucent background sweep highlight behind text

Animations

Class	Effect
`ease-fade-in`	Fades element from 0 → 1 opacity
`ease-slide-up`	Slides element up while fading in
`ease-bounce`	Infinite vertical bounce
`ease-hover-grow`	Scales up on hover (elastic)
`ease-flip-3d`	3D card flip wrapper. Use with `ease-flip-3d-inner`, `ease-flip-3d-face`, and `ease-flip-3d-back`.
`ease-shimmer-text`	Premium animated text gradient shimmer sweep
`ease-mask-reveal{-y\|-circle}`	Reveals element using sliding or circular clip-path masks

Components

Buttons

html

<button class="ease-btn ease-btn-primary">Primary</button>

Cards

html

<div class="ease-card">...</div>

Scroll Progress

html

<div class="ease-scroll-progress ease-scroll-progress-success"></div>

Forms

A premium, validation-ready forms component that includes beautiful styling, focus glows, validation states, size variations, and supports dark mode natively.

html

<!-- Basic Field with Label and Input -->
<div class="ease-field">
  <label class="ease-field-label" for="username">Username</label>
  <input class="ease-input" type="text" id="username" placeholder="Enter username">
</div>

<!-- Validation States -->
<div class="ease-field ease-field-success">
  <label class="ease-field-label">Email (Valid)</label>
  <input class="ease-input ease-input-success" type="email" value="user@domain.com">
</div>

<div class="ease-field ease-field-danger">
  <label class="ease-field-label">Password (Error)</label>
  <input class="ease-input ease-input-danger" type="password" value="123">
</div>

<!-- Textarea and Select -->
<textarea class="ease-textarea" placeholder="Your message..."></textarea>
<select class="ease-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

How to Contribute

EaseMotion CSS is a curated framework. Contributors do not directly modify core styles. Instead, you submit self-contained demos, which are then standard-adjusted, optimized, and integrated into the core by the maintainer.

Submission Folder Rules

All additions must be placed inside the submissions/examples/ directory. Each submission must follow the three-file rule and utilize a unique naming convention:

structure

submissions/examples/your-feature-name-xx/
├── demo.html
├── style.css
└── README.md

Naming Convention & Suffixes

To prevent naming conflicts between different contributors submitting similar features, all submission folders must follow kebab-case and append a short unique identifier or abbreviation suffix.

Examples

✅ submissions/examples/ease-hover-sap/
✅ submissions/examples/ease-tabs-ak/
✅ submissions/examples/glass-navbar-fix/

The Three-File Rule

File Name	Requirement	Details
`demo.html`	Required	A self-contained HTML demo. Must work directly by opening in any browser without a web server. No CDN links, no external frameworks.
`style.css`	Required	Your raw CSS. Do not worry about pre-standardizing with the `ease-` prefix — the maintainer handles naming standardization and optimization during integration.
`README.md`	Required	Must answer: (1) What does this do? (2) How is it used? (3) Why is it useful?

Strict Repository Rules

⚠️

Strictly Forbidden: Never edit files in core/, components/, docs/, or examples/ directly. Doing so will result in your PR being closed automatically. Only submit changes inside submissions/examples/.

Rule / Limit	Value	Description
Issue Assignments	Max 2 active	Contributors may have at most 2 active assigned issues at any time. Resolve or unassign one before taking a new one.
Inactivity Period	24 Hours (1 Day)	Assigned issues with no progress for 24 hours will be automatically unassigned and opened to other contributors.
PR Rate Limit	Max 25 PRs/day	To maintain review quality and repository stability, contributors are limited to a daily maximum of 25 PR submissions.
Clean Git History	Squash commits	Ensure all commits in your Pull Request are squashed into a single meaningful commit before submission. Do not submit micro-commits.

Community & Issues

All official bug tracking, feature proposals, and assignment requests must be handled via GitHub Issues.

🎮

Discord Server (Optional): Join our official Discord Server for general discussions, seeking support, or showing off your designs. Joining is completely optional; official project issues are handled on GitHub.

Naming Rules

All integrated class names must follow the ease- prefix convention (e.g. ease-fade-in). However, during your initial sandbox submission in submissions/examples/, you may use any class names that make sense to you.