loopwind 0.10.2 → 0.10.3

package/dist/default-templates/AGENTS.md

@@ -176,6 +176,77 @@ export default function Template({
 {template('banner-hero', { title: 'Nested', subtitle: 'Template' })}
 ```
 
+## Animation Classes (Video Only)
+
+Tailwind-style animation classes for video templates. Format: `animate-{type}/{start}/{end}`
+
+### Transition Animations
+
+```tsx
+// Fade in from 0% to 50% of video
+<h1 style={tw('animate-fade-in/0/0.5')}>Hello</h1>
+
+// Bounce in from below, with easing
+<h1 style={tw('ease-out animate-bounce-in-up/0/0.4')}>Title</h1>
+
+// Staggered animations
+<h1 style={tw('ease-out animate-fade-in-up/0/0.3')}>First</h1>
+<p style={tw('ease-out animate-fade-in-up/0.2/0.5')}>Second</p>
+```
+
+**Available animations:**
+- **Fade:** `fade-in`, `fade-out`, `fade-in-up`, `fade-in-down`, `fade-in-left`, `fade-in-right`
+- **Slide:** `slide-left`, `slide-right`, `slide-up`, `slide-down`
+- **Bounce:** `bounce-in`, `bounce-in-up`, `bounce-in-down`, `bounce-in-left`, `bounce-in-right`
+- **Scale:** `scale-in`, `scale-out`, `zoom-in`, `zoom-out`
+- **Rotate:** `rotate-in`, `rotate-out`, `flip-in-x`, `flip-in-y`
+
+### Loop Animations
+
+Format: `animate-{type}/{frameLength}` (at 30fps: /30 = 1s, /15 = 0.5s)
+
+```tsx
+<div style={tw('animate-pulse/15')}>Pulsing</div>
+<div style={tw('animate-spin/60')}>Spinning</div>
+```
+
+**Available:** `pulse`, `bounce`, `spin`, `ping`, `wiggle`, `float`
+
+### Easing Functions
+
+Add before animation class:
+
+```tsx
+<h1 style={tw('ease-out-cubic animate-bounce-in/0/0.5')}>Dramatic</h1>
+```
+
+**Available:** `linear`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`
+
+### Example: Intro Video
+
+```tsx
+export const meta = {
+  name: "intro",
+  type: "video",
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 },
+  props: { title: "string", subtitle: "string" }
+};
+
+export default function Intro({ tw, title, subtitle }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-black')}>
+      <h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in-up/0/0.4')}>
+        {title}
+      </h1>
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out animate-fade-in-up/0.3/0.6')}>
+        {subtitle}
+      </p>
+    </div>
+  );
+}
+```
+
 ## Common Workflows
 
 ### Generate Image

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopwind",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {