# StudioMotion.js

> Ultra-lightweight (< 2.8 kB), zero-dependency JavaScript motion engine and modern CSS UI generative toolkit. Designed for 120 FPS hardware-accelerated animations, spring physics, scroll-triggered sequences, FLIP layout morphing, SVG path transformations, and Web Audio/WebGL synchronization.

## Documentation & Resources
- [Full Documentation for LLMs](https://studiomotion.vercel.app/llms-full.txt): Complete API reference, syntax options, and code recipes for AI coding models.
- [Official Website](https://studiomotion.vercel.app/): Interactive UI toolkit, generators, and live sandboxes.
- [API Reference](https://studiomotion.vercel.app/docs): In-depth architectural modules, sandboxes, and copy-paste snippets.
- [Animation Catalog](https://studiomotion.vercel.app/catalog): 50+ production recipes (kinetic typography, 3D card tilts, SVG draw, magnetic cursors).
- [Interactive Sandboxes](https://studiomotion.vercel.app/demo): 18 feature playgrounds (Three.js WebGL, FLIP, Spring Physics).
- [GitHub Repository](https://github.com/myselfrxvi/StudioMotion-web): Source code, issues, and contributions.

## Key Features & Architecture
- **Core Engine Size**: Under 2.8 kB minified + brotli.
- **Zero Dependencies**: 100% vanilla JavaScript, works in any browser, framework (React, Vue, Svelte, Solid), or vanilla environment.
- **120 FPS Performance**: Uses Web Animations API (WAAPI) with fallback to unified RAF loop with sub-millisecond precision.
- **Spring Physics**: Mass, stiffness, damping, velocity with named presets (`default`, `gentle`, `wobbly`, `stiff`, `bouncy`).
- **ScrollTrigger**: Bi-directional scroll tracking, parallax scrub, pin, and enter/leave thresholds.
- **FLIP Layouts**: Seamless layout animations across DOM mutations and re-ordering.
- **SVG Morphing & Path Drawing**: Native `strokeDashoffset` interpolation and path morphing.
- **Draggable Physics**: Inertial drag with momentum flick, rubber-banding bounds, and axis lock.
- **Micro-toolkit**: Fluid typography clamp calculator, glassmorphism CSS generator, mesh gradient generator, and box-shadow studio.

## Quick Installation & CDN

### CDN (Browser / ES Modules)
```html
<script type="module">
  import SM from 'https://cdn.jsdelivr.net/gh/myselfrxvi/StudioMotion-web@latest/studiomotion/index.js';
</script>
```

### Direct Script Tag
```html
<script src="https://cdn.jsdelivr.net/gh/myselfrxvi/StudioMotion-web@latest/studiomotion/motion-engine.js"></script>
```

## Basic Usage & Syntax Examples

### 1. Spring Physics Animation
```javascript
SM.animate('.card', {
  y: [60, 0],
  opacity: [0, 1],
  scale: [0.95, 1],
  spring: 'bouncy',
  stagger: 0.08
});
```

### 2. Timeline Sequencing
```javascript
const tl = SM.timeline({ loop: false });
tl.add('.hero-title', { y: [30, 0], opacity: [0, 1], duration: 600, ease: 'easeOutQuart' })
  .add('.hero-subtitle', { y: [20, 0], opacity: [0, 1], duration: 500 }, '-=300')
  .add('.hero-cta', { scale: [0.9, 1], opacity: [0, 1], spring: 'gentle' }, '-=200');
```

### 3. ScrollTrigger Parallax
```javascript
SM.scrollTrigger({
  trigger: '#feature-section',
  start: 'top 80%',
  end: 'bottom 20%',
  scrub: true,
  onUpdate: (progress) => {
    SM.set('.parallax-bg', { y: progress * 150 });
  }
});
```

### 4. FLIP Layout Animation
```javascript
const flip = SM.flip('.grid-item');
// Modify DOM order / state
container.classList.toggle('reordered');
// Animate seamlessly from previous positions
flip.play({ duration: 400, ease: 'easeOutCubic' });
```