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 & PRO templates
Transmission Interruption
Upgrade to Pro for Full Templates & AI Architect.
Icon Library
Hand-crafted monochrome vectors for professional interfaces.
No vector matches found in local index.
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
Unlock high-fidelity engineering tools, elite kinetic primitives, and full-page starters.
Standard Tier
- 20 Standard Primitives
- Community Index Access
- Standard CDN Endpoint
- Basic CSS Triggering
- Community Review Queue
Pro Operator
- Landing Page Starters
- Full UI Layout Templates
- AI Kinetic Architect
- Hardware Telemetry (FPS/GPU)
- Private Project Vaults
- Elite Master Primitives
Authorized payment gateway secured via Stripe Identity Protocol. No credentials are stored on local servers.
Submit Asset
Contribute kinetic primitives, templates, or icons to the index.
I transfer all rights for this asset to the MotionX Index for public or pro distribution.
Submission Guidelines
- No external dependencies.
- Hardware accelerated CSS.
- Monochrome vectors only.
- Explicit naming convention.
Simple 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.