New
Animation First
Design Philosophy
EaseMotion CSS puts animations at the core, not as an afterthought. Hover this card to feel the difference.
Components
Cards
Flexible card system. Combine base + modifier classes to craft any card pattern.
// ease-card + ease-card-hover
Stable
Human Readable
Class Naming
Class names read like English. ease-fade-in, ease-hover-grow — instantly obvious.
MVP
Zero Config
Drop-in Setup
Link one stylesheet. No build steps, no dependencies, no configuration. Just write HTML.
// Card Variants Showcase
Base Card
Default Variant
Minimal card using only the base ease-card class.
Shadow Card
Elevation Effect
Adds depth using the ease-card-shadow utility.
Hover Card
Interactive Motion
Interactive hover animation powered by ease-card-hover.
// Stat Cards · Accent Cards
42+
Utilities
12
Animations
0
Dependencies
Animations
Motion Library
Click any box to replay its animation. Composable delay classes let you sequence entrances.
// Entrance animations
F
ease-fade-in
ease-slide-up
ease-slide-in-left
ease-slide-in-right
Z
ease-zoom-in
⟳
ease-flip
🖼️
ease-contract-image-entrance
// Looping animations
↕
ease-bounce
⤾
ease-rotate
◉
ease-pulse
// Hover animations
↔
ease-hover-grow
✦
ease-hover-glow
▲
ease-hover-lift
⬡
ease-hover-morph-card
✦
ease-hover-shimmer
Bounce!
ease-hover-bounce-text
▢
ease-hover-squish-border
// Slide-in from off-canvas (sides & corners)
// Exit animations
ease-expand-border-exit
Layout Utilities
Flexible Layouts
One class = one intent. Compose flexbox and grid layouts in plain English.
// ease-flex · ease-center · ease-justify-between
ease-flex ease-justify-between
// ease-grid ease-grid-auto ease-gap
Alpha
Beta
Gamma
// ease-slide-up + ease-delay-*