Motion Lab ✦

A curated collection of production-ready micro-animations. Hover to preview, click to copy. No dependencies, no frameworks — pure CSS & vanilla JS.

Live Demo →  |  Portfolio →

---

What is this?

Motion Lab is an open-source micro-animation playground built for frontend developers who care about the details. Every animation is:

• Copy-paste ready — grab the CSS/JS snippet in one click
• Dependency-free — zero npm installs, zero frameworks
• Production-grade — used in real client projects
• Explained — each card describes when and why to use it

---

Animations included

#	Name	Category	Technique
1	Magnetic button	Buttons	cubic-bezier scale
2	Liquid underline	Text	Pseudo-element scaleX
3	Elastic checkbox	Forms	Spring easing
4	Shimmer skeleton	Loading	background-position animation
5	Ripple effect	Feedback	Dynamic DOM + keyframes
6	Stagger reveal	Text	transition-delay cascade
7	Count-up number	Feedback	requestAnimationFrame
8	Floating label	Forms	CSS transform on focus
9	Pulse presence badge	Feedback	Infinite scale keyframe
10	Content reveal	Cards	Layered opacity + translateY
11	Elastic toggle	Forms	Spring easing on left
12	Fill slide button	Buttons	scaleX pseudo-element fill

---

Getting started

No build step. No package manager. Just open the file.

git clone https://github.com/krusha06/motion-lab.git
cd motion-lab
open index.html

Or drag index.html into your browser directly.

---

Project structure

motion-lab/
├── index.html        # Markup
├── css/
│   └── styles.css    # All styles & animation keyframes
├── js/
│   └── main.js       # Filter logic, interactions & copy snippets
├── .gitignore
└── README.md

---

Contributing

Want to add an animation? Open a PR.

Guidelines:

• Pure CSS preferred, vanilla JS if interaction is required
• No external libraries or CDN dependencies
• Each animation must work on its own (no shared state)
• Add a category tag: buttons / text / forms / feedback / loading / cards

Adding a new card:

1. Copy an existing .anim-card block in index.html
2. Add your animation CSS in css/styles.css
3. Add your snippet to the snippets object in js/main.js
4. Update the data-cat attribute to match a category
5. Open a PR with a short description of the animation

---

Roadmap

• Scroll-triggered animations
• 3D / perspective transforms
• SVG path animations
• Dark/light theme toggle
• Search bar
• Framer Motion variants (React version)
• More animations every week

---

Built with

• HTML5
• CSS3 (custom properties, keyframes, transitions)
• Vanilla JavaScript
• Instrument Serif + DM Mono + DM Sans via Google Fonts

---

License

MIT — use it in personal projects, client work, side projects, anything. Credit appreciated but not required.

---

Author

Built by Krusha

If this helped you, consider:

• ⭐ Starring the repo
• 🔁 Sharing it on Twitter/X
• 👀 Checking out my portfolio

---