loopwind 0.12.0 → 0.12.1

package/README.md

@@ -749,24 +749,16 @@ export const meta = {
   }
 };
 
-export default function Template({ title, subtitle, frame, progress, tw, qr, template }) {
-  const opacity = Math.min(1, progress * 2);
-  const translateY = 20 - (progress * 20);
-
+export default function Template({ title, subtitle, tw }) {
   return (
     <div style={tw('w-full h-full flex flex-col justify-center items-center bg-background p-20')}>
       <div style={tw('bg-card border rounded-xl p-16 flex flex-col')}>
-        <h1
-          style={{
-            ...tw('text-9xl font-bold text-foreground'),
-            opacity,
-            transform: `translateY(${translateY}px)`
-          }}
-        >
+        {/* Bounce in from below: starts at 0ms, lasts 600ms */}
+        <h1 style={tw('text-9xl font-bold text-foreground ease-out enter-bounce-in-up/0/600')}>
           {title}
         </h1>
         {subtitle && (
-          <p style={tw('text-5xl text-muted-foreground/75 mt-6')}>
+          <p style={tw('text-5xl text-muted-foreground/75 mt-6 ease-out enter-fade-in-up/300/600')}>
             {subtitle}
           </p>
         )}
@@ -776,6 +768,82 @@ export default function Template({ title, subtitle, frame, progress, tw, qr, tem
 }
 ```
 
+## Animation Classes (Video Only)
+
+Tailwind-style animation classes for video templates. No manual `progress` or `frame` calculations needed!
+
+### Format
+
+```
+enter-{animation}/{startMs}/{durationMs}
+exit-{animation}/{startMs}/{durationMs}
+loop-{animation}/{durationMs}
+```
+
+- **startMs** - when animation begins (milliseconds)
+- **durationMs** - how long it lasts (milliseconds)
+
+### Enter Animations
+
+```tsx
+// Fade in: starts at 0ms, lasts 500ms
+<h1 style={tw('enter-fade-in/0/500')}>Hello</h1>
+
+// Bounce in from below with easing
+<h1 style={tw('ease-out enter-bounce-in-up/0/600')}>Title</h1>
+
+// Staggered animations
+<h1 style={tw('ease-out enter-fade-in-up/0/400')}>First</h1>
+<p style={tw('ease-out enter-fade-in-up/200/400')}>Second</p>
+```
+
+**Available:** `fade-in`, `fade-in-up`, `fade-in-down`, `fade-in-left`, `fade-in-right`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `bounce-in`, `bounce-in-up`, `bounce-in-down`, `bounce-in-left`, `bounce-in-right`, `scale-in`, `zoom-in`, `rotate-in`, `flip-in-x`, `flip-in-y`
+
+### Exit Animations
+
+```tsx
+// Fade out: starts at 2500ms, lasts 500ms
+<h1 style={tw('exit-fade-out/2500/500')}>Goodbye</h1>
+
+// Combined enter and exit
+<h1 style={tw('enter-fade-in/0/500 exit-fade-out/2500/500')}>
+  Hello and Goodbye
+</h1>
+```
+
+### Loop Animations
+
+```tsx
+// Pulse opacity every 500ms
+<div style={tw('loop-fade/500')}>Pulsing</div>
+
+// Continuous rotation every 2000ms
+<div style={tw('loop-spin/2000')}>Spinning</div>
+```
+
+**Available:** `loop-fade`, `loop-bounce`, `loop-spin`, `loop-ping`, `loop-wiggle`, `loop-float`, `loop-pulse`, `loop-shake`
+
+### Easing Functions
+
+Add before animation class:
+
+```tsx
+<h1 style={tw('ease-out-cubic enter-bounce-in/0/500')}>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`
+
+### Bracket Notation
+
+For CSS-like syntax:
+
+```tsx
+<h1 style={tw('enter-slide-up/[0.6s]/[1.5s]')}>Hello</h1>
+<h1 style={tw('enter-fade-in/[300ms]/[800ms]')}>World</h1>
+```
+
+See the [Animation Documentation](https://loopwind.dev/animation) for complete reference.
+
 ## Commands
 
 ### `loopwind init`

package/dist/default-templates/AGENTS.md

@@ -178,50 +178,83 @@ export default function Template({
 
 ## Animation Classes (Video Only)
 
-Tailwind-style animation classes for video templates. Format: `animate-{type}/{start}/{end}`
+Tailwind-style animation classes for video templates. No manual `progress` calculations needed!
 
-### Transition Animations
+### Format
+
+```
+enter-{animation}/{startMs}/{durationMs}
+exit-{animation}/{startMs}/{durationMs}
+loop-{animation}/{durationMs}
+```
+
+- **startMs** - when animation begins (milliseconds)
+- **durationMs** - how long it lasts (milliseconds)
+
+### Enter Animations
 
 ```tsx
-// Fade in from 0% to 50% of video
-<h1 style={tw('animate-fade-in/0/0.5')}>Hello</h1>
+// Fade in: starts at 0ms, lasts 500ms
+<h1 style={tw('enter-fade-in/0/500')}>Hello</h1>
 
-// Bounce in from below, with easing
-<h1 style={tw('ease-out animate-bounce-in-up/0/0.4')}>Title</h1>
+// Bounce in from below with easing
+<h1 style={tw('ease-out enter-bounce-in-up/0/600')}>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>
+<h1 style={tw('ease-out enter-fade-in-up/0/400')}>First</h1>
+<p style={tw('ease-out enter-fade-in-up/200/400')}>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`
+**Available:** `fade-in`, `fade-in-up`, `fade-in-down`, `fade-in-left`, `fade-in-right`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `bounce-in`, `bounce-in-up`, `bounce-in-down`, `bounce-in-left`, `bounce-in-right`, `scale-in`, `zoom-in`, `rotate-in`, `flip-in-x`, `flip-in-y`
 
-### Loop Animations
+### Exit Animations
+
+```tsx
+// Fade out: starts at 2500ms, lasts 500ms
+<h1 style={tw('exit-fade-out/2500/500')}>Goodbye</h1>
+
+// Combined enter and exit
+<h1 style={tw('enter-fade-in/0/500 exit-fade-out/2500/500')}>
+  Hello and Goodbye
+</h1>
+```
 
-Format: `animate-{type}/{frameLength}` (at 30fps: /30 = 1s, /15 = 0.5s)
+**Available:** Same as enter animations but with "out" suffix (e.g., `fade-out`, `bounce-out-up`)
+
+### Loop Animations
 
 ```tsx
-<div style={tw('animate-pulse/15')}>Pulsing</div>
-<div style={tw('animate-spin/60')}>Spinning</div>
+// Pulse opacity every 500ms
+<div style={tw('loop-fade/500')}>Pulsing</div>
+
+// Continuous rotation every 2000ms
+<div style={tw('loop-spin/2000')}>Spinning</div>
+
+// Ping effect (radar) every 500ms
+<div style={tw('loop-ping/500')}>Ping</div>
 ```
 
-**Available:** `pulse`, `bounce`, `spin`, `ping`, `wiggle`, `float`
+**Available:** `loop-fade`, `loop-bounce`, `loop-spin`, `loop-ping`, `loop-wiggle`, `loop-float`, `loop-pulse`, `loop-shake`
 
 ### Easing Functions
 
 Add before animation class:
 
 ```tsx
-<h1 style={tw('ease-out-cubic animate-bounce-in/0/0.5')}>Dramatic</h1>
+<h1 style={tw('ease-out-cubic enter-bounce-in/0/500')}>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`
 
+### Bracket Notation
+
+For CSS-like syntax:
+
+```tsx
+<h1 style={tw('enter-slide-up/[0.6s]/[1.5s]')}>Hello</h1>
+<h1 style={tw('enter-fade-in/[300ms]/[800ms]')}>World</h1>
+```
+
 ### Example: Intro Video
 
 ```tsx
@@ -236,10 +269,12 @@ export const meta = {
 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')}>
+      {/* Bounce in: starts at 0ms, lasts 600ms */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out enter-bounce-in-up/0/600')}>
         {title}
       </h1>
-      <p style={tw('text-2xl text-white/80 mt-4 ease-out animate-fade-in-up/0.3/0.6')}>
+      {/* Fade in: starts at 400ms, lasts 600ms */}
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/400/600')}>
         {subtitle}
       </p>
     </div>

package/package.json

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