NEW v5.0 is now available

Motion for the
modern web.

A lightweight, production-ready animation library designed for developers who value performance and simplicity.

Get Started View Examples
motion.ts
const visual = new Gyroscope({
speed: 60,
glow: true,
physics: 'realistic'
});
visual.ignite();
FX
System Status Optimal

Designed for performance

Everything you need, nothing you don't.

Lightning Fast

Optimized for 60fps rendering on all devices using hardware acceleration.

Ultra Lightweight

Less than 5KB gzipped. No heavy dependencies or bloat.

Developer Friendly

Simple, declarative API that fits naturally into your workflow.

Master the Motion

Dive deep into our comprehensive documentation. Learn how to implement complex animations, customize easing curves, and integrate with your favorite frameworks.

Detailed Guides
API Reference
Component Library
Start Learning

Documentation

Simple to use, powerful to customize

Bring your interface to life with cinema-quality 3D motion

import { animate } from 'webfx';

animate('.element', {
  rotate: 360,
  scale: 1.2,
  duration: 1.5
});
Explore All Animations
style.css
.element {
animation: float 3s;
transform: scale(1.1);
}
|
Live Preview

Experiment in Real-time

Tweaking animations shouldn't be a guessing game. Use our advanced playground to prototype, test, and export your motion designs instantly.

Instant Feedback

See changes as you type

Multi-Framework

Export to React, Vue, or CSS

Launch Playground