# Mo.js — Motion Graphics Library for the Web

> A JavaScript motion graphics toolbelt that provides declarative shape, burst, and stagger animations with a retina-ready rendering engine for expressive UI effects.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Mo.js — Motion Graphics Library for the Web

## Quick Use
```bash
npm install @mojs/core
```
```javascript
import mojs from '@mojs/core';
new mojs.Shape({
  shape: 'circle',
  scale: { 0: 1 },
  duration: 1000,
  easing: 'elastic.out'
}).play();
```

## Introduction
Mo.js is a motion graphics toolbelt for the web that focuses on producing crisp, smooth animations for UI micro-interactions. It offers shape primitives, burst effects, stagger patterns, and a timeline system designed specifically for motion design workflows.

## What Mo.js Does
- Animates built-in shape primitives (circle, rect, polygon, cross, zigzag) with property tweening
- Creates particle burst effects with configurable child count, radius, and randomness
- Staggers animations across arrays of elements with custom delay curves
- Provides a timeline to sequence and overlap multiple animations
- Renders to SVG with device-pixel-ratio awareness for retina displays

## Architecture Overview
Mo.js uses a module-per-concern design. The Shape module renders SVG elements and interpolates their attributes. The Burst module composes multiple child shapes in a radial pattern. The Tween engine processes property deltas through customizable easing curves. A global Timeline coordinates playback across modules, supporting pause, seek, and repeat. All rendering targets SVG for resolution independence.

## Self-Hosting & Configuration
- Install via npm as @mojs/core or load from CDN
- Import individual modules (Shape, Burst, Html, Timeline) for smaller bundles
- Configure default easing, duration, and playback direction per instance
- Use the player tool (@mojs/player) for a GUI timeline scrubber during development
- No external dependencies; works in any modern browser environment

## Key Features
- Burst effects generate complex particle explosions with a single declaration
- Custom easing via path-based curves for unique motion character
- HTML module animates DOM element properties (transforms, opacity) directly
- Additive and property-map animations for layered motion effects
- Retina-ready SVG output with no blurry edges at any scale

## Comparison with Similar Tools
- **GSAP** — broader scope, timeline-first; Mo.js excels at shape-based motion graphics
- **Anime.js** — lightweight general tweening; Mo.js has richer built-in shape primitives
- **Lottie** — plays After Effects exports; Mo.js creates animations programmatically
- **Framer Motion** — React-specific declarative API; Mo.js is framework-agnostic
- **CSS Keyframes** — simple but lacks burst effects and custom easing paths

## FAQ
**Q: Is Mo.js still maintained?**
A: The community maintains it under the @mojs organization. Core functionality is stable and production-ready.

**Q: Can Mo.js animate DOM elements?**
A: Yes. The Html module tweens transforms, opacity, and other CSS properties on any DOM element.

**Q: Does it support SVG path morphing?**
A: Not natively. For path morphing, pair Mo.js with a dedicated SVG morph library or GSAP MorphSVG.

**Q: How large is the bundle?**
A: The full @mojs/core package is approximately 30KB gzipped. Individual modules can be imported separately.

## Sources
- https://github.com/mojs/mojs
- https://mojs.github.io/

---
Source: https://tokrepo.com/en/workflows/mo-js-motion-graphics-library-web-59a48f30
Author: AI Open Source