Initial release — OpenMontage: the first open-source agentic video production system

11 production pipelines, 47 tools, 124 agent skills. Supports cloud APIs (fal.ai, OpenAI, ElevenLabs, Suno, HeyGen, Runway) and free local providers (diffusers, Piper TTS, WAN 2.1, Hunyuan, CogVideo). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-29 08:25:17 -07:00
commit a3e735cc7a
1147 changed files with 240221 additions and 0 deletions
@@ -0,0 +1,163 @@
+---
+name: lottie-bodymovin
+description: Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects
+---
+
+# Lottie Animation Principles
+
+Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.
+
+## 1. Squash and Stretch
+
+In After Effects before export:
+- Animate Scale X and Y inversely
+- Use expression: `s = transform.scale[1]; [100 + (100-s), s]`
+
+```javascript
+// Control at runtime
+lottie.setSpeed(1.5); // affect squash timing
+```
+
+## 2. Anticipation
+
+Structure your AE composition:
+1. **Frames 0-10**: Wind-up pose
+2. **Frames 10-40**: Main action
+3. **Frames 40-50**: Settle
+
+```javascript
+// Play anticipation segment
+anim.playSegments([0, 10], true);
+setTimeout(() => anim.playSegments([10, 50], true), 200);
+```
+
+## 3. Staging
+
+```javascript
+// Layer multiple Lotties
+<div className="scene">
+  <Lottie animationData={background} style={{ opacity: 0.6 }} />
+  <Lottie animationData={hero} style={{ zIndex: 10 }} />
+</div>
+```
+
+## 4. Straight Ahead / Pose to Pose
+
+Pose to pose in AE:
+- Set keyframes at key poses
+- Let AE interpolate between
+- Use Easy Ease for smoothing
+
+```javascript
+// Jump to specific poses
+anim.goToAndStop(25, true); // frame 25
+```
+
+## 5. Follow Through and Overlapping Action
+
+In After Effects:
+- Offset child layer keyframes by 2-4 frames
+- Use parenting with delayed expressions
+- `thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)`
+
+## 6. Slow In and Slow Out
+
+AE Keyframe settings:
+- Select keyframes > Easy Ease (F9)
+- Use Graph Editor to adjust curves
+- Bezier handles control acceleration
+
+```javascript
+// Adjust playback speed dynamically
+anim.setSpeed(0.5); // slower
+anim.setSpeed(2); // faster
+```
+
+## 7. Arc
+
+In After Effects:
+- Use motion paths (position property)
+- Convert keyframes to Bezier
+- Pull handles to create arcs
+- Or use "Auto-Orient to Path"
+
+## 8. Secondary Action
+
+```javascript
+// Trigger secondary animation
+mainAnim.addEventListener('complete', () => {
+  secondaryAnim.play();
+});
+
+// Or sync with frame
+mainAnim.addEventListener('enterFrame', (e) => {
+  if (e.currentTime > 15) particleAnim.play();
+});
+```
+
+## 9. Timing
+
+```javascript
+anim.setSpeed(0.5);  // half speed - dramatic
+anim.setSpeed(1);    // normal
+anim.setSpeed(2);    // double speed - snappy
+
+// Or control frame rate in AE export
+// 24fps = cinematic, 30fps = smooth, 60fps = fluid
+```
+
+## 10. Exaggeration
+
+In After Effects:
+- Push scale beyond 100% (120-150%)
+- Overshoot rotation
+- Use Overshoot expression
+- `amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freq*n) / Math.exp(decay*n/100); } else { 0; }`
+
+## 11. Solid Drawing
+
+In After Effects:
+- Use 3D layers
+- Apply perspective camera
+- Animate Z position and rotation
+- Use depth of field
+
+## 12. Appeal
+
+Design principles in AE:
+- Smooth curves over sharp angles
+- Consistent timing patterns
+- Pleasing color palette
+- Clean vector shapes
+
+```javascript
+// React Lottie with hover
+<Lottie
+  animationData={data}
+  onMouseEnter={() => anim.setDirection(1)}
+  onMouseLeave={() => anim.setDirection(-1)}
+/>
+```
+
+## Lottie Implementation
+
+```javascript
+import Lottie from 'lottie-react';
+import animationData from './animation.json';
+
+<Lottie
+  animationData={animationData}
+  loop={true}
+  autoplay={true}
+  style={{ width: 200, height: 200 }}
+/>
+```
+
+## Key Lottie Features
+
+- `playSegments([start, end])` - Play frame range
+- `setSpeed(n)` - Control timing
+- `setDirection(1/-1)` - Forward/reverse
+- `goToAndStop(frame)` - Pose control
+- `addEventListener` - Frame events
+- Interactivity via `lottie-interactivity`