Motion
Engineering.
The world's most comprehensive monochrome motion library. 25 elite hardware-accelerated primitives for high-throughput interfaces.
Master Index
High-precision kinetic nodes
Engineering
Specification.
Built for builders who value precision over decoration.
Bare Metal Perf
Hardware-level acceleration using transform and opacity properties for consistent 120fps output.
Zero Logic
A declarative, pure CSS approach. No heavy JavaScript runtimes, no reconciliation lag.
Sub-10kb Footprint
Highly optimized core architecture designed for minimal latency on high-throughput systems.
Atomic Composability
Build complex animation sequences by stacking atomic utility classes with ease.
Kinetic Easing
Physically-accurate easing curves that reflect mass, tension, and real-world inertia.
Infinite Scale
Battle-tested for complex design systems where consistency and performance are paramount.
MotionX Pro Protocol
Access the most complex kinetic primitives in the master index.
Standard Tier
- 20 Basic Primitives
- Community Access
- Standard CDN
- Class-based triggers
Pro Operator
- Everything in Standard
- Elite Master Primitives
- Advanced 3D Spatial Nodes
- High-Fidelity Source Code
- Private Support Protocol
Secure Stripe Protocol Encryption v2.4
Submit Primitive
Contribute to the master index. Your logic, our engine.
Note: Previews are isolated. Styles targeting global elements will be scoped.
I acknowledge that upon submission, all intellectual property rights for this kinetic primitive are transferred to MotionX. I relinquish all claims to the code and assets provided.
Personal Node Log
SYNC_COUNT: 0Simple API,
powerful results.
Integrate MotionX into your existing stack in seconds. Whether it's React, Vue, or vanilla HTML, it just works.
- Class-based triggering
- CSS Variable overrides
- Tailwind CSS compatible
<!-- Simple implementation -->
<div class="mx-fade-up">
<h1>MotionX is ready.</h1>
</div>
<!-- Variable-driven customization -->
<style>
.custom-hero {
--mx-duration: 1.2s;
--mx-easing: cubic-bezier(0.8, 0, 0.2, 1);
}
</style>
<section class="custom-hero mx-blur-in">
<p>Physics-based motion in one class.</p>
</section>Temporal Physics
Fine-tuned velocity curves for professional-grade interaction design.
Inertia
High initial velocity with smooth decay
cubic-bezier(0.33, 1, 0.68, 1)Tension
Snap-like precision for critical UI
cubic-bezier(0.8, 0, 0.2, 1)Kinetic
Balanced physical response
cubic-bezier(0.16, 1, 0.3, 1)Deployment
Integrate the core engine into your production environment.
01Node Package
Recommended for high-performance React, Next.js, or Vue stacks.
npm install motionx-core02Static CDN
Direct injection for legacy systems or rapid prototyping.
<link rel="stylesheet" href="https://cdn.motionx.io/v2/core.css">Framework Agnostic Core
MotionX operates as a pure CSS primitive layer. It is compatible with all modern rendering engines, including Tailwind CSS, Styled Components, and native CSS Modules.