loopwind 0.17.0 → 0.18.1

package/website/dist/llm.txt

@@ -1,7 +1,7 @@
 # loopwind - Complete Documentation for LLMs
 
 This is a comprehensive, single-file documentation for loopwind, optimized for LLM consumption.
-Generated: 2025-11-18T13:58:54.278Z
+Generated: 2025-11-20T10:57:21.487Z
 
 ---
 
@@ -13,224 +13,213 @@ FILE: index.mdx
 
 import CodeVideoDemo from '../components/CodeVideoDemo.astro';
 
-export const videoCode = `export default function VideoIntro({ tw, title, subtitle }) {
+export const videoCode = `// _loopwind/templates/video-intro.tsx
+export const meta = {
+  name: 'video-intro',
+  type: 'video',
+  size: { width: 1200, height: 676 },
+  video: { fps: 30, duration: 3 },
+  props: {
+    title: 'string',
+    subtitle: 'string'
+  }
+};
+
+export default function VideoIntro({ tw, title, subtitle }) {
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 gap-4')}>
-      <h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in/0/0.4')}>
+      <div style={tw('relative flex flex-row items-center gap-2 ease-out')}>
+        {/* loop-ping/500: scale up + fade out every 500ms (radar effect) */}
+        <div style={tw('w-3 h-3 bg-white rounded-full loop-ping/500')} />
+        <div style={tw('text-white')}>Label</div>
+      </div>
+      {/* enter-fade-in/0/1200: fade in starting at 0ms, lasting 1200ms */}
+      <h1 style={tw('text-7xl font-bold text-white enter-fade-in/0/1200')}>
         {title}
       </h1>
-      <p style={tw('text-2xl text-white/80 ease-out animate-fade-in-up/0.3/0.7')}>
+      {/* enter-fade-in/300/1200: fade in starting at 300ms, lasting 1200ms */}
+      <p style={tw('text-2xl text-white/80 ease-out enter-fade-in/300/1200')}>
         {subtitle}
       </p>
     </div>
   );
-}`;
-
-## Video Templates
-
-<CodeVideoDemo 
-  code={videoCode}
-  videoSrc="/demo-intro.mp4"
-  title="Animated Intro Example"
-/>
-
-**Render it:**
-```bash
-loopwind render video-intro '{"title":"Welcome!","subtitle":"Built with loopwind"}' --out intro.mp4
-```
-
-**Output:** `_loopwind/outputs/intro.mp4` (1920×1080px, 3 seconds @ 30fps)
-
-**Perfect for:** Social media intros, animated logos, tutorial overlays, and product showcases.
+}
+`;
 
-## Image Templates
+export const imageCode = `// _loopwind/templates/og-image.tsx
+export const meta = {
+  name: 'og-image',
+  type: 'image',
+  size: { width: 1200, height: 630 },
+  props: { 
+    title: 'string',
+    description: 'string'
+  }
+};
 
-```tsx
-// Social media card template
-export default function OGImage({ tw, image, title, description, logo }) {
+export default function OGImage({ tw, title, description }) {
   return (
-    <div style={tw('flex w-full h-full bg-white')}>
-      <div style={tw('flex-1 flex flex-col justify-between p-12')}>
-        <img src={image(logo)} style={tw('h-12 w-auto')} />
-
+    <div style={tw('flex w-full h-full bg-card p-16')}>
+      <div style={tw('flex flex-col justify-between flex-1')}>
+        <div style={tw('text-sm text-muted-foreground')}>
+          loopwind.dev
+        </div>
+        
         <div>
-          <h1 style={tw('text-5xl font-bold text-gray-900 mb-4')}>
+          <h1 style={tw('text-6xl font-bold text-foreground mb-6')}>
             {title}
           </h1>
-          <p style={tw('text-xl text-gray-600')}>
+          <p style={tw('text-2xl text-muted-foreground')}>
             {description}
           </p>
         </div>
 
-        <p style={tw('text-gray-400')}>yoursite.com</p>
-      </div>
-
-      <div style={tw('flex-1')}>
-        <img
-          src={image(featuredImage)}
-          style={tw('w-full h-full object-cover')}
-        />
+        <div style={tw('flex items-center gap-3')}>
+          <span style={tw('text-5xl')}>↫</span>
+          <span style={tw('text-3xl font-semibold bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent')}>
+            loopwind
+          </span>
+        </div>
       </div>
     </div>
   );
 }
-```
-
-**Render it:**
-```bash
-loopwind render og-image '{"title":"Hello World","description":"My awesome blog post"}'
-```
-
-**Output:** `_loopwind/outputs/og-image.png` (1200×630px)
-
-**Perfect for:** Open Graph images, Twitter cards, blog headers, product cards, and quote graphics.
+`;
 
-## Features
+## Generate Images and Videos with Code
 
-- 🎨 **shadcn/ui Design System**: Beautiful, semantic colors out of the box (`text-primary`, `bg-card`, etc.)
-- ✨ **Template-based**: Install design templates like you install UI components
-- 🖼️ **Serverless Image Rendering**: Pure JavaScript rendering with Satori - works on Vercel, Netlify, Cloudflare Workers
-- 🎬 **Serverless Video Rendering**: WASM-based MP4 encoding - 12x faster than traditional approaches
-- 🎨 **Tailwind CSS Support**: Style templates with Tailwind utility classes + opacity modifiers (`bg-primary/50`)
-- 📱 **Built-in Helpers**: QR codes, image embedding, video backgrounds, template composition
-- ✅ **Smart Validation**: Automatic prop and template validation with helpful error messages
-- 🚀 **Framework-agnostic**: Works with Node, Bun, Deno, Laravel, Python, and more
-- 🤖 **Agent-friendly**: Machine-readable metadata for LLMs
-- 📦 **Easy installation**: `npx loopwind add template-name`
-- 🌐 **Pure JavaScript/WASM**: No native dependencies, works everywhere
+Write React components, render them as images or videos. No design tools needed.
 
-## Quick Start
+<CodeVideoDemo 
+  code={videoCode}
+  videoSrc="/demo-intro.mp4"
+  title="Video Templates"
+/>
 
-### Installation
+**Render it in one command:**
 
 ```bash
-npm install -g loopwind
+loopwind render video-intro '{"title":"Welcome!","subtitle":"Built with loopwind"}'
 ```
 
-Or use with npx:
+**Perfect for:** Social media intros, animated logos, product demos, tutorial overlays.
 
-```bash
-npx loopwind --help
-```
+---
 
-### Initialize in Your Project
+## Image Templates
 
-Navigate to any project folder and run:
+Generate Open Graph images, Twitter cards, and more:
 
-```bash
-loopwind init
+```tsx
+{imageCode}
 ```
 
-This creates a `_loopwind/` folder where templates and outputs will be located.
-
-### Install a Template
-
-#### 1. Official Templates
+**Render it:**
 
 ```bash
-loopwind add image-template
-loopwind add video-template
+loopwind render og-image '{"title":"Hello World","description":"My awesome post"}'
 ```
 
-Templates are installed to: `_loopwind/templates/<template>/` (customizable in `loopwind.json`)
-
-**Benefits:**
-- Templates are local to your project
-- Version controlled with your project
-- Easy to share within your team
+**Output:** `_loopwind/outputs/og-image.png` (1200×630px)
 
-### Output a Template
+---
 
-```bash
-loopwind render template-name '{"title":"Hello World","subtitle":"Built with loopwind"}'
-```
+## Why loopwind?
 
-## Commands
+### 🎨 Beautiful by Default
 
-### `loopwind add <source>`
+Built on shadcn/ui design system with semantic colors (`text-primary`, `bg-card`) and Tailwind CSS utilities. Your templates look professional out of the box.
 
-Install a template from various sources:
+### ⚡ Blazing Fast Rendering
 
-```bash
-# From registry
-loopwind add banner-hero
+- **Serverless-ready**: Pure JavaScript rendering with Satori - works on Vercel, Netlify, Cloudflare Workers
+- **WASM-powered video**: MP4 encoding that's 12x faster than traditional approaches
+- **No dependencies**: No FFmpeg, no Chrome, no Docker. Just JavaScript.
 
-# From GitHub
-loopwind add github:username/repo/path/to/template
+### 📦 Template Marketplace (coming soon)
 
-# From URL
-loopwind add https://example.com/my-template.json
+Install templates like UI components. Browse, add, and customize in seconds:
 
-# From local path
-loopwind add ./my-templates/custom-banner
+```bash
+loopwind add banner-hero
+loopwind add video-intro
+loopwind add product-card
 ```
 
-### `loopwind list`
+### 🤖 Built for AI Agents
 
-List all installed templates:
+Machine-readable metadata and simple CLI make it perfect for automation:
 
 ```bash
-loopwind list
+# Generate social media content programmatically
+loopwind render og-image '{"title":"'$TITLE'","description":"'$DESC'"}'
 ```
 
-### `loopwind render <template> <props> [options]`
+### 🚀 Framework Agnostic
 
-Render an image or video:
+Works everywhere: Node.js, Bun, Deno, Python, PHP, Go. If it can run a CLI command, it can use loopwind.
 
-```bash
-# Image with inline props
-loopwind render banner-hero '{"title":"Hello World"}'
+---
 
-# Video with inline props
-loopwind render video-intro '{"title":"Welcome"}' --out intro.mp4
+## Key Features
 
-# Using a props file
-loopwind render banner-hero props.json
+- ✨ **Template-based workflow** - Install and customize design templates
+- 🎬 **Animation classes** - `enter-fade-in/0/500`, `loop-spin/1000` - no manual calculations
+- 📱 **Built-in helpers** - QR codes, image embedding, video backgrounds, template composition
+- ✅ **Smart validation** - Automatic prop and template validation with helpful errors
+- 🎨 **Full Tailwind support** - Including opacity modifiers (`bg-primary/50`)
+- 🔧 **Zero config** - Works out of the box, customize when you need to
+- 📝 **Type-safe** - Full TypeScript support with prop validation
+- 🌐 **Edge-ready** - Runs anywhere JavaScript runs
 
-# Custom output
-loopwind render banner-hero '{"title":"Hello"}' --out custom-name.png
+---
 
-# Different format
-loopwind render banner-hero '{"title":"Hello"}' --format jpeg
-```
+## Use Cases
 
-Options:
-- `--out, -o` - Output filename (default: `_loopwind/outputs/<template>.<ext>`)
-- `--format` - Output format: `png`, `jpeg`, `svg` (images only)
-- `--quality` - JPEG quality 1-100 (default: 92)
+**Marketing Automation**
+- Generate personalized email headers
+- Create dynamic social media posts
+- Automate Open Graph images
 
-### `loopwind validate <template>`
+**Content Creation**
+- Produce video intros and outros
+- Generate thumbnail variations
+- Create branded graphics at scale
 
-Validate a template:
+**Developer Tools**
+- Build dynamic README badges
+- Generate documentation images
+- Create automated reports
 
-```bash
-loopwind validate banner-hero
-```
-
-Checks:
-- Template file exists and is valid React
-- `export const meta` exists and is valid
-- Required props are defined
-- Fonts exist (if specified)
+**E-commerce**
+- Product card generation
+- Sale announcement videos
+- Dynamic pricing graphics
 
-### `loopwind init`
+---
 
-Initialize loopwind in a project:
+## Get Started
 
 ```bash
+npm install -g loopwind
 loopwind init
+loopwind add video-intro
+loopwind render video-intro '{"title":"Hello World"}'
 ```
 
-Creates `loopwind.json` configuration file.
+[View Full Documentation](/getting-started) · [Browse Templates](/templates) · [See Examples](/images)
 
-## Next Steps
+---
 
-- [Learn about Templates](/templates)
-- [Image Rendering](/images)
-- [Video Rendering](/video)
-- [Helpers (QR, Template Composition)](/helpers)
-- [Styling with Tailwind & shadcn/ui](/styling)
-- [Custom Fonts](/fonts)
+## Learn More
+
+- [Getting Started Guide](/getting-started) - Installation and first steps
+- [Templates](/templates) - Create and customize templates
+- [Images](/images) - Static image generation
+- [Video](/video) - Animated video rendering
+- [Styling](/styling) - Tailwind & shadcn/ui integration
+- [SDK](/sdk) - Programmatic usage
+- [AI Agents](/agents) - Integration guide for LLMs
 
 
 
@@ -240,42 +229,22 @@ Creates `loopwind.json` configuration file.
 FILE: templates.mdx
 ================================================================================
 
-# Installing Templates from Different Sources
+# Installing Templates
 
 ## Overview
-
 loopwind supports installing templates from multiple sources:
 
-1. **Official Registry** (default)
+1. **Official templates**
 2. **Direct URLs**
-3. **GitHub Repositories**
-4. **Local Filesystem**
-
-## 1. Official Registry (Default)
-
-Install templates from the official loopwind registry at `https://loopwind.dev/r`
-
-```bash
-loopwind add banner-hero
-loopwind add product-card
-loopwind add social-og-image
-```
-
-**How it works:**
-- Fetches from: `https://loopwind.dev/r/banner-hero`
-- Returns JSON with template files
-- Installs to: `_loopwind/templates/banner-hero/`
 
-### Custom Registry
-
-Use a different registry:
+## 1. Default templates
 
 ```bash
-loopwind add banner-hero --registry https://my-registry.com/templates
+loopwind add image-template
+loopwind add video-template
 ```
 
 ## 2. Direct URLs
-
 Install a template from any publicly accessible URL:
 
 ```bash
@@ -296,57 +265,14 @@ loopwind add https://cdn.example.com/templates/awesome-banner.json
   "description": "My custom template",
   "files": [
     {
-      "path": "my-template.tsx",
-      "content": "import React from 'react';\n\nexport default function..."
-    },
-    {
-      "path": "meta.json",
-      "content": "{\"name\":\"my-template\"...}"
+      "path": "template.tsx",
+      "content": "export const meta = {...};\n\nexport default function..."
     }
   ]
 }
 ```
 
-## 3. GitHub Repositories
-
-Install templates directly from GitHub repos:
-
-```bash
-# From a GitHub repo (looks for template.json in repo root)
-loopwind add github:username/repo
-
-# From a specific path in the repo
-loopwind add github:username/repo/templates/banner-hero
-
-# From an organization
-loopwind add github:myorg/design-templates/social-media/og-image
-```
-
-**How it works:**
-1. Detects `github:` prefix
-2. Converts to raw GitHub URL
-3. Fetches `template.json` (or `meta.json` + template file)
-4. Downloads all referenced files
-5. Installs locally
-
-**Template structure on GitHub:**
-
-Option A: Single template.json (self-contained)
-```
-username/repo/
-└── template.json  # Contains all files inline
-```
-
-Option B: Separate files
-```
-username/repo/
-├── meta.json
-├── banner-hero.tsx
-└── fonts/
-    └── Inter-Bold.woff
-```
-
-## 4. Local Filesystem
+## 3. Local Filesystem
 
 Install templates from your local filesystem:
 
@@ -369,9 +295,9 @@ loopwind add /Users/you/templates/social-card
 
 Templates are installed to `_loopwind/templates/<template-name>/` by default.
 
-Customize this in `loopwind.json`:
+Customize this in `_loopwind/loopwind.json`:
 
-```json
+```json title="_loopwind/loopwind.json"
 {
   "templatesDir": "my-custom-templates"
 }
@@ -502,20 +428,25 @@ loopwind render my-template '{"title":"Hello"}' --format svg
 
 ## Embedding Images
 
-Use the `image()` helper to embed external images in your templates.
+Use the `image()` helper to embed images in your templates. It supports two modes:
 
-### Basic Usage
+1. **Prop-based** - Load from a prop value: `image('logo')`
+2. **Direct file** - Load from template directory: `image('icon.svg')`
+
+### Prop-based Images
+
+Pass the prop name to load an image path from props:
 
 ```tsx
 export default function ProductCard({ tw, image, title, background }) {
   return (
     <div style={tw('relative w-full h-full')}>
-      {/* Background image */}
-      <img 
-        src={image(background)} 
+      {/* Load image from 'background' prop */}
+      <img
+        src={image('background')}
         style={tw('absolute inset-0 w-full h-full object-cover')}
       />
-      
+
       {/* Content overlay */}
       <div style={tw('relative z-10 p-12')}>
         <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
@@ -533,6 +464,55 @@ export default function ProductCard({ tw, image, title, background }) {
 }
 ```
 
+### Direct File Images
+
+Load images directly from your template directory by including the file extension:
+
+```tsx
+export default function ChangelogItem({ tw, image, text }) {
+  return (
+    <div style={tw('flex items-center gap-4')}>
+      {/* Load check.svg from template directory */}
+      <img
+        src={image('check.svg')}
+        style={tw('w-6 h-6')}
+      />
+      <span style={tw('text-lg')}>{text}</span>
+    </div>
+  );
+}
+```
+
+This loads `check.svg` from the same directory as your template file. You can also use subdirectories:
+
+```tsx
+// Load from assets subdirectory
+<img src={image('assets/icons/star.svg')} />
+
+// Load from shared folder
+<img src={image('shared/logo.png')} />
+```
+
+**Template directory structure:**
+```
+_loopwind/templates/my-template/
+├── template.tsx
+├── check.svg           ← image('check.svg')
+└── assets/
+    └── icons/
+        └── star.svg    ← image('assets/icons/star.svg')
+```
+
+### URLs
+
+The `image()` helper also supports loading images from URLs:
+
+```json
+{
+  "background": "https://example.com/image.jpg"
+}
+```
+
 ### Supported Image Formats
 
 - ✅ **JPEG** (`.jpg`, `.jpeg`)
@@ -730,25 +710,6 @@ Templates are cached after first load for faster subsequent renders.
 
 ## Troubleshooting
 
-### Fonts Not Rendering
-
-Make sure fonts are properly defined in your template's meta:
-
-```tsx
-export const meta = {
-  name: "my-template",
-  // ...
-  fonts: [
-    {
-      name: "Inter",
-      path: "fonts/Inter-Bold.woff",
-      weight: 700,
-      style: "normal"
-    }
-  ]
-};
-```
-
 ### Images Not Loading
 
 Check file paths are relative to the props file:
@@ -805,31 +766,19 @@ loopwind render video-intro props.json --out intro.mp4
 export const meta = {
   name: "video-intro",
   type: "video",
-  description: "Animated intro with fade-in title",
+  description: "Animated intro with bounce-in title",
   size: { width: 1920, height: 1080 },
   video: { fps: 30, duration: 3 },
   props: { title: "string" }
 };
 
-export default function VideoIntro({ tw, title, frame, progress }) {
-  // Animate opacity based on progress
-  const titleOpacity = progress < 0.3 ? progress / 0.3 : 1;
-
+export default function VideoIntro({ tw, title }) {
   return (
     <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700')}>
-      <h1
-        style={{
-          ...tw('text-8xl font-bold text-white'),
-          opacity: titleOpacity
-        }}
-      >
+      {/* Bounce in from below at start */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out enter-bounce-in-up/0/600')}>
         {title}
       </h1>
-
-      {/* Show frame counter */}
-      <div style={tw('absolute bottom-10 right-10 text-white text-sm')}>
-        Frame: {frame}
-      </div>
     </div>
   );
 }
@@ -843,572 +792,90 @@ export default function VideoIntro({ tw, title, frame, progress }) {
 }
 ```
 
-## Video-Specific Props
-
-Every video template receives these additional props:
-
-### `frame`
-Current frame number (0 to totalFrames - 1)
-
-```tsx
-export default function MyVideo({ frame }) {
-  // Frame 0, 1, 2, 3, ... 89 (for 3s @ 30fps)
-  return <div>Frame: {frame}</div>;
-}
-```
-
-### `progress`
-Animation progress from 0 to 1
-
-```tsx
-export default function MyVideo({ progress }) {
-  // 0.0 at start, 0.5 at middle, 1.0 at end
-  const x = progress * 100; // Move from 0 to 100
-  
-  return (
-    <div style={{ transform: `translateX(${x}px)` }}>
-      Moving element
-    </div>
-  );
-}
-```
-
-## Animation Patterns
+## Animation
 
-### Pulse Animation
-
-```tsx
-export default function PulseVideo({ tw, title }) {
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
-      <h1 style={tw('text-8xl font-bold text-white animate-pulse')}>
-        {title}
-      </h1>
-    </div>
-  );
-}
-```
-
-### Spin Animation
-
-```tsx
-export default function SpinVideo({ tw, title }) {
-  return (
-    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-purple-600 to-pink-600 gap-8')}>
-      <div style={tw('w-32 h-32 border-8 border-white border-t-transparent rounded-full animate-spin')} />
-      <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
-    </div>
-  );
-}
-```
+loopwind provides **Tailwind-style animation classes** for creating smooth video animations without writing custom code.
 
-### Bounce Animation
+Use declarative animation classes with millisecond-based timing:
 
 ```tsx
-export default function BounceVideo({ tw, title }) {
+export default function AnimatedIntro({ tw, title, subtitle }) {
   return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-blue-600')}>
-      <h1 style={tw('text-8xl font-bold text-white animate-bounce')}>
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700')}>
+      {/* Bounce in from below: starts at 0ms, lasts 400ms */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out enter-bounce-in-up/0/400')}>
         {title}
       </h1>
-    </div>
-  );
-}
-```
 
-### Fade with Progress
-
-```tsx
-export default function FadeVideo({ progress, title, tw }) {
-  // Fade in first 20%, stay visible, fade out last 20%
-  let opacity = 1;
-  if (progress < 0.2) {
-    opacity = progress / 0.2;
-  } else if (progress > 0.8) {
-    opacity = (1 - progress) / 0.2;
-  }
-  
-  return (
-    <h1 style={{ ...tw('text-6xl font-bold'), opacity }}>
-      {title}
-    </h1>
-  );
-}
-```
-
-### Slide In
-
-```tsx
-export default function SlideVideo({ progress, tw }) {
-  // Slide in from left
-  const x = -100 + (progress * 100); // -100 to 0
-  
-  return (
-    <div style={{ 
-      ...tw('text-4xl font-bold'),
-      transform: `translateX(${x}%)`
-    }}>
-      Sliding Text
-    </div>
-  );
-}
-```
-
-### Scale Animation
-
-```tsx
-export default function ScaleVideo({ progress, tw }) {
-  // Scale from 0 to 1
-  const scale = progress;
-  
-  return (
-    <div style={{ 
-      ...tw('text-6xl font-bold'),
-      transform: `scale(${scale})`
-    }}>
-      Growing Text
-    </div>
-  );
-}
-```
-
-### Progress-Based Rotation
-
-```tsx
-export default function RotateVideo({ progress, tw }) {
-  // Rotate 360 degrees based on progress
-  const rotation = progress * 360;
-  
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
-      <div style={{ 
-        ...tw('w-32 h-32 bg-blue-500 rounded-lg'),
-        transform: `rotate(${rotation}deg)`
-      }}>
-      </div>
-    </div>
-  );
-}
-```
-
-### Using Tailwind Animations
-
-Combine Tailwind's built-in animations with progress-based animations:
-
-```tsx
-export default function PulsingLogo({ tw, progress, image, logo }) {
-  // Fade in based on progress
-  const opacity = Math.min(progress / 0.3, 1);
-  
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
-      {/* Tailwind's animate-pulse + custom opacity */}
-      <div style={{ ...tw('animate-pulse'), opacity }}>
-        <img src={image(logo)} style={tw('w-64 h-64')} />
-      </div>
-    </div>
-  );
-}
-```
-
-**Available Tailwind animations:**
-- `animate-spin` - Continuous rotation
-- `animate-pulse` - Subtle fade in/out
-- `animate-bounce` - Bouncing motion
-- `animate-ping` - Ripple effect (great for badges)
-
-**Example with multiple animations:**
-
-```tsx
-export default function NotificationVideo({ tw, progress, title }) {
-  const slideX = -100 + (progress * 100); // Slide in from left
-  
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-purple-600 to-blue-600')}>
-      <div 
-        style={{
-          ...tw('flex items-center gap-4 bg-white rounded-2xl p-6 shadow-2xl'),
-          transform: `translateX(${slideX}%)`
-        }}
-      >
-        {/* Pinging indicator */}
-        <div style={tw('relative')}>
-          <div style={tw('w-3 h-3 bg-green-500 rounded-full animate-ping absolute')} />
-          <div style={tw('w-3 h-3 bg-green-500 rounded-full')} />
-        </div>
-        
-        <div>
-          <h2 style={tw('text-2xl font-bold text-gray-900')}>{title}</h2>
-          <p style={tw('text-gray-600')}>New notification</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-### Easing Functions
-
-Create smooth animations with easing:
-
-```tsx
-function easeOutCubic(t) {
-  return 1 - Math.pow(1 - t, 3);
-}
-
-export default function EasedVideo({ progress, tw }) {
-  const easedProgress = easeOutCubic(progress);
-  const x = easedProgress * 100;
-  
-  return (
-    <div style={{ transform: `translateX(${x}px)` }}>
-      Smooth animation
+      {/* Fade in with upward motion: starts at 300ms, lasts 400ms */}
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/300/400')}>
+        {subtitle}
+      </p>
     </div>
   );
 }
 ```
 
-## Embedding Videos
-
-Use the `video()` helper to embed video backgrounds that auto-sync with your animation.
-
-### Basic Usage
+### Common Animation Patterns
 
 ```tsx
-export default function VideoOverlay({ tw, video, title, background }) {
-  return (
-    <div style={tw('relative w-full h-full')}>
-      {/* Background video - automatically synced to current frame */}
-      <img 
-        src={video(background)} 
-        style={tw('absolute inset-0 w-full h-full object-cover')}
-      />
-      
-      {/* Text overlay */}
-      <div style={tw('relative z-10 flex items-center justify-center w-full h-full')}>
-        <h1 style={tw('text-7xl font-bold text-white drop-shadow-lg')}>
-          {title}
-        </h1>
-      </div>
-    </div>
-  );
-}
-```
-
-**Props:**
-```json
-{
-  "title": "Amazing Video",
-  "background": "./footage/background.mp4"
-}
-```
-
-### How Video Sync Works
+// Fade animations
+<div style={tw('enter-fade-in/0/500')}>Fade in</div>
+<div style={tw('enter-fade-in-up/0/600')}>Fade in with slide</div>
 
-1. **First pass**: Template calls `video()` to register needed videos
-2. **Pre-processing**: loopwind extracts all frames at template's FPS
-3. **Rendering**: Each frame uses the corresponding video frame
-4. **Caching**: Frames are cached in memory for fast access
+// Slide animations
+<div style={tw('enter-slide-left/0/500')}>Slide from left</div>
+<div style={tw('exit-slide-up/2500/500')}>Slide out up</div>
 
-### Animated Overlay Example
+// Bounce and scale
+<div style={tw('enter-bounce-in/0/500')}>Bouncy entrance</div>
+<div style={tw('enter-scale-in/0/400')}>Scale up</div>
 
-```tsx
-export default function VideoWithText({ tw, video, frame, progress, title, clip }) {
-  // Fade in title
-  const titleOpacity = progress < 0.2 ? progress / 0.2 : 1;
-  
-  return (
-    <div style={tw('relative w-full h-full')}>
-      {/* Synced video background */}
-      <img 
-        src={video(clip)} 
-        style={tw('absolute inset-0 w-full h-full object-cover')}
-      />
-      
-      {/* Dark overlay */}
-      <div style={tw('absolute inset-0 bg-black/40')} />
-      
-      {/* Animated title */}
-      <div style={tw('relative z-10 flex items-center justify-center w-full h-full')}>
-        <h1 
-          style={{
-            ...tw('text-8xl font-bold text-white text-center'),
-            opacity: titleOpacity
-          }}
-        >
-          {title}
-        </h1>
-      </div>
-      
-      {/* Frame counter */}
-      <div style={tw('absolute bottom-4 right-4 text-white text-sm bg-black/50 px-3 py-1 rounded')}>
-        {frame} / {Math.floor(3 * 30)}
-      </div>
-    </div>
-  );
-}
+// Loop animations (continuous)
+<div style={tw('loop-float/1000')}>Continuous floating</div>
+<div style={tw('loop-pulse/800')}>Pulsing effect</div>
 ```
 
-## Combining Videos and Images
+### Utility-Based Animations
 
-Use both `video()` and `image()` helpers together to create rich, branded video content.
-
-### Video Background with Logo
+Animate any transform or opacity property directly:
 
 ```tsx
-export default function BrandedVideo({ tw, video, image, progress, background, logo, title }) {
-  // Logo slides in from top
-  const logoY = progress < 0.3 ? -100 + (progress / 0.3) * 100 : 0;
-  // Title fades in after logo
-  const titleOpacity = progress > 0.3 ? Math.min((progress - 0.3) / 0.3, 1) : 0;
-  
-  return (
-    <div style={tw('relative w-full h-full')}>
-      {/* Video background */}
-      <img 
-        src={video(background)} 
-        style={tw('absolute inset-0 w-full h-full object-cover')}
-      />
-      
-      {/* Gradient overlay */}
-      <div style={tw('absolute inset-0 bg-gradient-to-t from-black/80 to-transparent')} />
-      
-      {/* Animated logo */}
-      <div 
-        style={{
-          ...tw('absolute top-12 left-12'),
-          transform: `translateY(${logoY}px)`
-        }}
-      >
-        <img 
-          src={image(logo)} 
-          style={tw('h-16 w-auto')}
-        />
-      </div>
-      
-      {/* Animated title */}
-      <div style={tw('absolute bottom-20 left-12 right-12')}>
-        <h1 
-          style={{
-            ...tw('text-7xl font-bold text-white'),
-            opacity: titleOpacity
-          }}
-        >
-          {title}
-        </h1>
-      </div>
-    </div>
-  );
-}
-```
+// Translate, rotate, scale
+<div style={tw('enter-translate-x-5/0/500')}>Slide 20px from left</div>
+<div style={tw('enter-rotate-90/0/800')}>Rotate 90 degrees</div>
+<div style={tw('enter-scale-100/0/500')}>Scale from 0 to 100%</div>
 
-**Props:**
-```json
-{
-  "title": "Introducing Our New Product",
-  "background": "./footage/product-demo.mp4",
-  "logo": "./images/company-logo.png"
-}
+// Combine multiple animations
+<div style={tw('enter-translate-y-10/0/500 enter-rotate-45/0/500')}>
+  Fly and spin
+</div>
 ```
 
-### Multi-Element Video Composition
-
-```tsx
-export default function ProductShowcase({ 
-  tw, 
-  video, 
-  image, 
-  progress, 
-  backgroundVideo,
-  productImage,
-  badge,
-  title,
-  price 
-}) {
-  // Product image zooms in
-  const scale = 0.8 + (Math.min(progress / 0.5, 1) * 0.2); // 0.8 to 1.0
-  
-  // Badge rotates in
-  const badgeRotation = progress < 0.4 ? (progress / 0.4) * 360 : 360;
-  const badgeOpacity = Math.min(progress / 0.4, 1);
-  
-  // Price slides up
-  const priceY = progress > 0.6 ? (1 - Math.min((progress - 0.6) / 0.4, 1)) * 50 : 50;
-  
-  return (
-    <div style={tw('relative w-full h-full bg-white')}>
-      {/* Video background (blurred) */}
-      <div style={tw('absolute inset-0 overflow-hidden')}>
-        <img 
-          src={video(backgroundVideo)} 
-          style={{
-            ...tw('w-full h-full object-cover'),
-            filter: 'blur(20px)',
-            transform: 'scale(1.1)' // Prevent blur edge artifacts
-          }}
-        />
-        <div style={tw('absolute inset-0 bg-white/50')} />
-      </div>
-      
-      {/* Main product image */}
-      <div style={tw('relative z-10 flex items-center justify-center w-full h-full p-20')}>
-        <div style={{ transform: `scale(${scale})` }}>
-          <img 
-            src={image(productImage)} 
-            style={tw('w-96 h-96 object-contain drop-shadow-2xl')}
-          />
-        </div>
-      </div>
-      
-      {/* Animated badge */}
-      <div 
-        style={{
-          ...tw('absolute top-20 right-20'),
-          opacity: badgeOpacity,
-          transform: `rotate(${badgeRotation}deg)`
-        }}
-      >
-        <img 
-          src={image(badge)} 
-          style={tw('w-32 h-32')}
-        />
-      </div>
-      
-      {/* Title */}
-      <div style={tw('absolute top-20 left-20')}>
-        <h2 style={tw('text-5xl font-bold text-gray-900')}>
-          {title}
-        </h2>
-      </div>
-      
-      {/* Animated price */}
-      <div 
-        style={{
-          ...tw('absolute bottom-20 left-20'),
-          transform: `translateY(${priceY}px)`
-        }}
-      >
-        <div style={tw('text-6xl font-black text-blue-600')}>
-          ${price}
-        </div>
-      </div>
-    </div>
-  );
-}
-```
+**See the full [Animation documentation](/animation)** for all animation classes, easing functions, staggered animations, and advanced patterns.
 
-**Props:**
-```json
-{
-  "title": "Premium Headphones",
-  "price": "299",
-  "backgroundVideo": "./footage/studio-background.mp4",
-  "productImage": "./images/headphones.png",
-  "badge": "./images/new-badge.png"
-}
-```
+### Programmatic Animations
 
-### Video with Multiple Image Overlays
+For complex custom animations, use the `progress` prop directly:
 
 ```tsx
-export default function TutorialVideo({ 
-  tw, 
-  video, 
-  image, 
-  progress, 
-  frame,
-  screencast,
-  avatar,
-  logo,
-  instructor,
-  lesson
-}) {
-  // Avatar pulses
-  const avatarScale = 1 + Math.sin(frame * 0.2) * 0.05;
-  
-  // Logo stays visible
-  const logoOpacity = 1;
+export default function CustomAnimation({ progress, title, tw }) {
+  const opacity = progress < 0.3 ? progress / 0.3 : 1;
+  const scale = 0.8 + (progress * 0.2);
   
   return (
-    <div style={tw('relative w-full h-full bg-gray-900')}>
-      {/* Main screencast video */}
-      <img 
-        src={video(screencast)} 
-        style={tw('absolute inset-0 w-full h-full object-contain')}
-      />
-      
-      {/* Company logo (top left) */}
-      <div style={{
-        ...tw('absolute top-8 left-8'),
-        opacity: logoOpacity
-      }}>
-        <img 
-          src={image(logo)} 
-          style={tw('h-12 w-auto')}
-        />
-      </div>
-      
-      {/* Instructor avatar (bottom right) */}
-      <div style={tw('absolute bottom-8 right-8')}>
-        <div 
-          style={{
-            ...tw('relative'),
-            transform: `scale(${avatarScale})`
-          }}
-        >
-          <img 
-            src={image(avatar)} 
-            style={tw('w-24 h-24 rounded-full border-4 border-blue-500')}
-          />
-          {/* Red recording dot */}
-          <div style={tw('absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full animate-pulse')} />
-        </div>
-      </div>
-      
-      {/* Lesson info overlay */}
-      <div style={tw('absolute bottom-8 left-8 bg-black/80 backdrop-blur px-6 py-4 rounded-lg')}>
-        <p style={tw('text-sm text-gray-400')}>Instructor</p>
-        <p style={tw('text-xl font-bold text-white mb-2')}>{instructor}</p>
-        <p style={tw('text-sm text-blue-400')}>{lesson}</p>
-      </div>
-    </div>
+    <h1 style={{
+      ...tw('text-8xl font-bold text-white'),
+      opacity,
+      transform: `scale(${scale})`
+    }}>
+      {title}
+    </h1>
   );
 }
 ```
 
-**Props:**
-```json
-{
-  "instructor": "Sarah Johnson",
-  "lesson": "Lesson 3: Advanced Techniques",
-  "screencast": "./footage/screen-recording.mp4",
-  "avatar": "./images/instructor.jpg",
-  "logo": "./images/course-logo.png"
-}
-```
-
-### Supported Formats
-
-**Video formats** (via `video()` helper):
-- ✅ MP4 (`.mp4`)
-- ✅ MOV (`.mov`)
-- ✅ WebM (`.webm`)
-- ✅ AVI (`.avi`)
-
-**Image formats** (via `image()` helper):
-- ✅ JPEG (`.jpg`, `.jpeg`)
-- ✅ PNG (`.png`) - with transparency
-- ✅ GIF (`.gif`)
-- ✅ WebP (`.webp`)
-- ✅ SVG (`.svg`)
-
-### Best Practices
-
-1. **Pre-optimize assets**: Resize images and videos to match your output resolution
-2. **Use PNG for logos**: Transparency works perfectly with video backgrounds
-3. **Match frame rates**: If possible, use videos with the same FPS as your template
-4. **Consider file sizes**: Large videos take longer to process
-5. **Test opacity**: Ensure overlays are visible against video backgrounds
+Most use cases are better served by animation classes, but `progress` and `frame` props give you complete control when needed.
 
 ## FPS and Duration
 
@@ -1509,24 +976,16 @@ For long videos, consider rendering in segments.
 ### Loading Spinner
 
 ```tsx
-export default function LoadingVideo({ tw, progress, title }) {
-  // Show spinner for first 60%, then fade to title
-  const spinnerOpacity = progress < 0.6 ? 1 : (1 - (progress - 0.6) / 0.4);
-  const titleOpacity = progress > 0.6 ? (progress - 0.6) / 0.4 : 0;
-  
+export default function LoadingVideo({ tw, title }) {
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900')}>
-      {/* Tailwind's animate-spin */}
-      <div style={{ opacity: spinnerOpacity }}>
-        <div style={tw('w-32 h-32 border-8 border-blue-500 border-t-transparent rounded-full animate-spin')} />
+      {/* Spinner fades out at 60% (1800ms for 3s video) */}
+      <div style={tw('exit-fade-out/1800/400')}>
+        <div style={tw('w-32 h-32 border-8 border-blue-500 border-t-transparent rounded-full loop-spin/1000')} />
       </div>
       
-      <h1 
-        style={{
-          ...tw('text-6xl font-bold text-white mt-12'),
-          opacity: titleOpacity
-        }}
-      >
+      {/* Title fades in after spinner */}
+      <h1 style={tw('text-6xl font-bold text-white mt-12 ease-out enter-fade-in-up/1800/400')}>
         {title}
       </h1>
     </div>
@@ -1534,27 +993,24 @@ export default function LoadingVideo({ tw, progress, title }) {
 }
 ```
 
-### Progress Bar with Pulse
+### Progress Bar
 
 ```tsx
-export default function ProgressVideo({ tw, progress, title, subtitle }) {
+export default function ProgressVideo({ tw, title, subtitle }) {
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900 p-12')}>
-      <h2 style={tw('text-5xl font-bold text-white mb-12 animate-pulse')}>
+      {/* Title bounces in */}
+      <h2 style={tw('text-5xl font-bold text-white mb-12 ease-out enter-bounce-in/0/500')}>
         {title}
       </h2>
       
-      {/* Progress bar */}
-      <div style={tw('w-full max-w-2xl h-4 bg-gray-700 rounded-full overflow-hidden')}>
-        <div 
-          style={{
-            ...tw('h-full bg-gradient-to-r from-blue-500 to-green-500'),
-            width: `${progress * 100}%`
-          }}
-        />
+      {/* Progress bar container fades in */}
+      <div style={tw('w-full max-w-2xl h-4 bg-gray-700 rounded-full overflow-hidden ease-out enter-fade-in/300/400')}>
+        <div style={tw('h-full bg-gradient-to-r from-blue-500 to-green-500 w-full')} />
       </div>
       
-      <p style={tw('text-2xl text-gray-400 mt-8')}>
+      {/* Subtitle fades in last */}
+      <p style={tw('text-2xl text-gray-400 mt-8 ease-out enter-fade-in/600/400')}>
         {subtitle}
       </p>
     </div>
@@ -1562,7 +1018,7 @@ export default function ProgressVideo({ tw, progress, title, subtitle }) {
 }
 ```
 
-### Countdown Timer with Pulse
+### Countdown Timer
 
 ```tsx
 export default function CountdownVideo({ tw, frame, message }) {
@@ -1571,11 +1027,13 @@ export default function CountdownVideo({ tw, frame, message }) {
   
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-black')}>
-      {/* Add pulse animation when counting down */}
-      <div style={tw('text-[200px] font-black text-white animate-pulse')}>
+      {/* Number scales in and pulses continuously */}
+      <div style={tw('text-[200px] font-black text-white ease-out enter-scale-in/0/400 loop-pulse/1000')}>
         {secondsRemaining}
       </div>
-      <p style={tw('text-3xl text-gray-400 mt-8')}>
+      
+      {/* Message fades in */}
+      <p style={tw('text-3xl text-gray-400 mt-8 ease-out enter-fade-in/400/500')}>
         {message}
       </p>
     </div>
@@ -1624,20 +1082,51 @@ loopwind render video-intro '{"title":"Welcome"}' --out intro.gif
 - Larger file sizes than MP4
 - Some color banding with gradients
 
-**When to use GIF:**
-- Short loops (< 5 seconds)
-- Simple animations with solid colors
-- Platforms that don't support video (email, GitHub)
+**When to use GIF:**
+- Short loops (< 5 seconds)
+- Simple animations with solid colors
+- Platforms that don't support video (email, GitHub)
+
+**When to use MP4:**
+- Longer videos
+- Complex gradients or photos
+- Best quality and smallest size
+
+## Video-Specific Props
+
+Every video template receives these additional props:
+
+### `frame`
+Current frame number (0 to totalFrames - 1)
+
+```tsx
+export default function MyVideo({ frame }) {
+  // Frame 0, 1, 2, 3, ... 89 (for 3s @ 30fps)
+  return <div>Frame: {frame}</div>;
+}
+```
+
+### `progress`
+Animation progress from 0 to 1
 
-**When to use MP4:**
-- Longer videos
-- Complex gradients or photos
-- Best quality and smallest size
+```tsx
+export default function MyVideo({ progress }) {
+  // 0.0 at start, 0.5 at middle, 1.0 at end
+  const x = progress * 100; // Move from 0 to 100
+  
+  return (
+    <div style={{ transform: `translateX(${x}px)` }}>
+      Moving element
+    </div>
+  );
+}
+```
 
 ## Next Steps
 
-- [Learn about Image Rendering](/images)
-- [QR Codes and Template Composition](/helpers)
+- [Animation - Complete animation guide](/animation)
+- [Image Rendering](/images)
+- [Helpers - QR Codes and Template Composition](/helpers)
 - [Styling with Tailwind & shadcn/ui](/styling)
 - [Custom Fonts in Videos](/fonts)
 
@@ -1651,9 +1140,9 @@ FILE: animation.mdx
 
 # Animation
 
-loopwind provides **Tailwind-style animation classes** that work with `progress` and `frame` to create smooth video animations without writing custom code.
+loopwind provides **Tailwind-style animation classes** that work with time to create smooth video animations without writing custom code.
 
-> **Note:** Animation classes only work with **video templates** and **GIFs**. For static images, animations will have no effect since there's no `progress` or `frame` context.
+> **Note:** Animation classes only work with **video templates** and **GIFs**. For static images, animations will have no effect since there's no time context.
 
 ## Quick Start
 
@@ -1661,71 +1150,248 @@ loopwind provides **Tailwind-style animation classes** that work with `progress`
 export default function MyVideo({ tw, title, subtitle }) {
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-black')}>
-      {/* Bounce in from below during first 40% */}
-      <h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in-up/0/0.4')}>
+      {/* Bounce in from below: starts at 0, lasts 400ms */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out enter-bounce-in-up/0/400')}>
         {title}
       </h1>
 
-      {/* Fade in with upward motion from 30% to 70% */}
-      <p style={tw('text-2xl text-white/80 mt-4 ease-out animate-fade-in-up/0.3/0.7')}>
+      {/* Fade in with upward motion: starts at 300ms, lasts 400ms */}
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/300/400')}>
         {subtitle}
       </p>
+
+      {/* Continuous floating animation: repeats every 1s (1000ms) */}
+      <div style={tw('mt-8 text-4xl loop-float/1000')}>
+        ⬇️
+      </div>
     </div>
   );
 }
 ```
 
-## Transition Animations
+## Animation Format
+
+loopwind uses three types of animations with **millisecond timing**:
+
+| Type | Format | Description |
+|------|--------|-------------|
+| Enter | `enter-{type}/{start}/{duration}` | Animations that play when entering |
+| Exit | `exit-{type}/{start}/{duration}` | Animations that play when exiting |
+| Loop | `loop-{type}/{duration}` | Continuous looping animations |
+
+All timing values are in **milliseconds** (1000ms = 1 second).
+
+## Utility-Based Animations
+
+In addition to predefined animations, loopwind supports **Tailwind utility-based animations** that let you animate any transform or opacity property directly:
+
+```tsx
+// Slide in 20px from the left
+<div style={tw('enter-translate-x-5/0/1000')}>Content</div>
+
+// Rotate 90 degrees on entrance
+<div style={tw('enter-rotate-90/0/500')}>Spinning</div>
+
+// Fade to 50% opacity in a loop
+<div style={tw('loop-opacity-50/1000')}>Pulsing</div>
+
+// Scale down with negative value
+<div style={tw('enter--scale-50/0/800')}>Shrinking</div>
+```
+
+### Supported Utilities
+
+| Utility | Format | Description | Example |
+|---------|--------|-------------|---------|
+| **translate-x** | `enter-translate-x-{value}` | Translate horizontally | `enter-translate-x-5` = 20px<br/>`enter-translate-x-full` = 100%<br/>`enter-translate-x-[20px]` = 20px |
+| **translate-y** | `enter-translate-y-{value}` | Translate vertically | `loop-translate-y-10` = 40px<br/>`enter-translate-y-1/2` = 50%<br/>`enter-translate-y-[5rem]` = 80px |
+| **opacity** | `enter-opacity-{n}` | Set opacity (0-100) | `enter-opacity-50` = 50% |
+| **scale** | `enter-scale-{n}` | Scale element (0-200) | `enter-scale-100` = 1.0x |
+| **rotate** | `enter-rotate-{n}` | Rotate in degrees | `enter-rotate-45` = 45° |
+| **skew-x** | `enter-skew-x-{n}` | Skew on X axis in degrees | `enter-skew-x-12` = 12° |
+| **skew-y** | `enter-skew-y-{n}` | Skew on Y axis in degrees | `exit-skew-y-6` = 6° |
+
+**Translate value formats:**
+- **Numeric**: `5` = 20px (Tailwind spacing scale: 1 unit = 4px)
+- **Keywords**: `full` = 100%
+- **Fractions**: `1/2` = 50%, `1/3` = 33.333%, `2/3` = 66.666%, etc.
+- **Arbitrary values**: `[20px]`, `[5rem]`, `[10%]` (rem converts to px: 1rem = 16px)
+
+All utilities work with:
+- **All prefixes**: `enter-`, `exit-`, `loop-`, `animate-`
+- **Negative values**: Prefix with `-` (e.g., `-translate-x-5`, `-rotate-45`)
+- **Timing syntax**: Add `/start/duration` (e.g., `enter-translate-x-5/0/800`)
+
+### Translate Animations
+
+```tsx
+// Numeric (Tailwind spacing): 20px (5 * 4px)
+<div style={tw('enter-translate-x-5/0/500')}>Content</div>
+
+// Keyword: Full width (100%)
+<div style={tw('enter-translate-y-full/0/800')}>Dropping full height</div>
+
+// Fraction: Half width (50%)
+<div style={tw('enter-translate-x-1/2/0/600')}>Slide in halfway</div>
+
+// Arbitrary values: Exact px or rem
+<div style={tw('enter-translate-y-[20px]/0/500')}>Slide 20px</div>
+<div style={tw('enter-translate-x-[5rem]/0/800')}>Slide 5rem (80px)</div>
+
+// Loop with fractions
+<div style={tw('loop-translate-y-1/4/1000')}>Oscillate 25%</div>
+
+// Negative values
+<div style={tw('exit--translate-y-8/2000/500')}>Rising</div>
+```
+
+### Opacity Animations
+
+```tsx
+// Fade to 100% opacity
+<div style={tw('enter-opacity-100/0/500')}>Fading In</div>
+
+// Fade to 50% opacity
+<div style={tw('enter-opacity-50/0/800')}>Half Opacity</div>
+
+// Pulse between 50% and 100%
+<div style={tw('loop-opacity-50/1000')}>Pulsing</div>
+
+// Fade out to 0%
+<div style={tw('exit-opacity-0/2500/500')}>Vanishing</div>
+```
+
+### Scale Animations
+
+```tsx
+// Scale from 0 to 100% (1.0x)
+<div style={tw('enter-scale-100/0/500')}>Growing</div>
+
+// Scale to 150% (1.5x)
+<div style={tw('enter-scale-150/0/800')}>Enlarging</div>
+
+// Pulse scale in a loop
+<div style={tw('loop-scale-110/1000')}>Breathing</div>
+
+// Scale down to 50%
+<div style={tw('exit-scale-50/2000/500')}>Shrinking</div>
+```
+
+### Rotate Animations
+
+```tsx
+// Rotate 90 degrees
+<div style={tw('enter-rotate-90/0/500')}>Quarter Turn</div>
+
+// Rotate 180 degrees
+<div style={tw('enter-rotate-180/0/1000')}>Half Turn</div>
+
+// Continuous rotation in loop (360 degrees per cycle)
+<div style={tw('loop-rotate-360/2000')}>Spinning</div>
+
+// Rotate backwards with negative value
+<div style={tw('enter--rotate-45/0/500')}>Counter Rotation</div>
+```
+
+### Skew Animations
+
+```tsx
+// Skew on X axis
+<div style={tw('enter-skew-x-12/0/500')}>Slanted</div>
+
+// Skew on Y axis
+<div style={tw('enter-skew-y-6/0/800')}>Tilted</div>
+
+// Oscillating skew in loop
+<div style={tw('loop-skew-x-6/1000')}>Wobbling</div>
+
+// Negative skew
+<div style={tw('exit--skew-x-12/2000/500')}>Reverse Slant</div>
+```
+
+### Combining Utilities
+
+You can combine multiple utility animations on the same element:
+
+```tsx
+// Translate and rotate together
+<div style={tw('enter-translate-y-10/0/500 enter-rotate-45/0/500')}>
+  Flying In
+</div>
+
+// Fade and scale
+<div style={tw('enter-opacity-100/0/800 enter-scale-100/0/800')}>
+  Appearing
+</div>
+
+// Enter with translate, exit with rotation
+<div style={tw('enter-translate-x-5/0/500 exit-rotate-180/2500/500')}>
+  Slide and Spin
+</div>
+```
+
+### Bracket Notation
+
+For more CSS-like syntax, you can use brackets with units:
+
+```tsx
+// Using bracket notation with seconds
+<h1 style={tw('enter-slide-up/[0.6s]/[1.5s]')}>Hello</h1>
+
+// Using bracket notation with milliseconds
+<h1 style={tw('enter-fade-in/[300ms]/[800ms]')}>World</h1>
+
+// Mix and match - plain numbers are milliseconds
+<h1 style={tw('enter-bounce-in/0/[1.2s]')}>Mixed</h1>
+```
+
+## Enter Animations
+
+Format: `enter-{type}/{startMs}/{durationMs}`
 
-Format: `animate-{type}/{start}/{end}`
+- `startMs` - when the animation begins (milliseconds from start)
+- `durationMs` - how long the animation lasts
 
-- `{type}` - The animation type (fade-in, bounce-in-up, etc.)
-- `{start}` - Progress value to start (0-1)
-- `{end}` - Progress value to end (0-1)
+When values are omitted (`enter-fade-in`), it uses the full video duration.
 
 ### Fade Animations
 
 Simple opacity transitions with optional direction.
 
 ```tsx
-// Fade in from 0% to 50% of the video
-<h1 style={tw('animate-fade-in/0/0.5')}>Hello</h1>
+// Fade in from 0ms to 500ms
+<h1 style={tw('enter-fade-in/0/500')}>Hello</h1>
 
-// Fade out from 50% to 100%
-<h1 style={tw('animate-fade-out/0.5/1')}>Goodbye</h1>
+// Fade in with upward motion
+<h1 style={tw('enter-fade-in-up/0/600')}>Hello</h1>
 ```
 
 | Class | Description |
 |-------|-------------|
-| `animate-fade-in/0/1` | Fade in (opacity 0 → 1) |
-| `animate-fade-out/0/1` | Fade out (opacity 1 → 0) |
-| `animate-fade-in-up/0/1` | Fade in + slide up (30px) |
-| `animate-fade-in-down/0/1` | Fade in + slide down (30px) |
-| `animate-fade-in-left/0/1` | Fade in + slide from left (30px) |
-| `animate-fade-in-right/0/1` | Fade in + slide from right (30px) |
-| `animate-fade-out-up/0/1` | Fade out + slide up |
-| `animate-fade-out-down/0/1` | Fade out + slide down |
-| `animate-fade-out-left/0/1` | Fade out + slide left |
-| `animate-fade-out-right/0/1` | Fade out + slide right |
+| `enter-fade-in/0/500` | Fade in (opacity 0 → 1) |
+| `enter-fade-in-up/0/500` | Fade in + slide up (30px) |
+| `enter-fade-in-down/0/500` | Fade in + slide down (30px) |
+| `enter-fade-in-left/0/500` | Fade in + slide from left (30px) |
+| `enter-fade-in-right/0/500` | Fade in + slide from right (30px) |
 
 ### Slide Animations
 
 Larger movement (100px) with fade.
 
 ```tsx
-// Slide in from left
-<div style={tw('animate-slide-left/0/0.5')}>Content</div>
+// Slide in from left: starts at 0, lasts 500ms
+<div style={tw('enter-slide-left/0/500')}>Content</div>
 
-// Slide up from bottom
-<div style={tw('animate-slide-up/0.2/0.8')}>Content</div>
+// Slide up from bottom: starts at 200ms, lasts 600ms
+<div style={tw('enter-slide-up/200/600')}>Content</div>
 ```
 
 | Class | Description |
 |-------|-------------|
-| `animate-slide-left/0/1` | Slide in from left (100px) |
-| `animate-slide-right/0/1` | Slide in from right (100px) |
-| `animate-slide-up/0/1` | Slide in from bottom (100px) |
-| `animate-slide-down/0/1` | Slide in from top (100px) |
+| `enter-slide-left/0/500` | Slide in from left (100px) |
+| `enter-slide-right/0/500` | Slide in from right (100px) |
+| `enter-slide-up/0/500` | Slide in from bottom (100px) |
+| `enter-slide-down/0/500` | Slide in from top (100px) |
 
 ### Bounce Animations
 
@@ -1733,19 +1399,19 @@ Playful entrance with overshoot effect.
 
 ```tsx
 // Bounce in with scale overshoot
-<h1 style={tw('animate-bounce-in/0/0.5')}>Bouncy!</h1>
+<h1 style={tw('enter-bounce-in/0/500')}>Bouncy!</h1>
 
 // Bounce in from below
-<div style={tw('animate-bounce-in-up/0/0.6')}>Pop!</div>
+<div style={tw('enter-bounce-in-up/0/600')}>Pop!</div>
 ```
 
 | Class | Description |
 |-------|-------------|
-| `animate-bounce-in/0/1` | Bounce in with scale overshoot |
-| `animate-bounce-in-up/0/1` | Bounce in from below |
-| `animate-bounce-in-down/0/1` | Bounce in from above |
-| `animate-bounce-in-left/0/1` | Bounce in from left |
-| `animate-bounce-in-right/0/1` | Bounce in from right |
+| `enter-bounce-in/0/500` | Bounce in with scale overshoot |
+| `enter-bounce-in-up/0/500` | Bounce in from below |
+| `enter-bounce-in-down/0/500` | Bounce in from above |
+| `enter-bounce-in-left/0/500` | Bounce in from left |
+| `enter-bounce-in-right/0/500` | Bounce in from right |
 
 ### Scale & Zoom Animations
 
@@ -1753,18 +1419,16 @@ Size-based transitions.
 
 ```tsx
 // Scale in from 50%
-<div style={tw('animate-scale-in/0/0.5')}>Growing</div>
+<div style={tw('enter-scale-in/0/500')}>Growing</div>
 
 // Zoom in from 0%
-<div style={tw('animate-zoom-in/0/1')}>Zooming</div>
+<div style={tw('enter-zoom-in/0/1000')}>Zooming</div>
 ```
 
 | Class | Description |
 |-------|-------------|
-| `animate-scale-in/0/1` | Scale up from 50% to 100% |
-| `animate-scale-out/0/1` | Scale up to 150% + fade out |
-| `animate-zoom-in/0/1` | Zoom in from 0% to 100% |
-| `animate-zoom-out/0/1` | Zoom out from 100% to 200% + fade |
+| `enter-scale-in/0/500` | Scale up from 50% to 100% |
+| `enter-zoom-in/0/500` | Zoom in from 0% to 100% |
 
 ### Rotate & Flip Animations
 
@@ -1772,47 +1436,89 @@ Rotation-based transitions.
 
 ```tsx
 // Rotate in 180 degrees
-<div style={tw('animate-rotate-in/0/0.5')}>Spinning</div>
+<div style={tw('enter-rotate-in/0/500')}>Spinning</div>
 
 // 3D flip on X axis
-<div style={tw('animate-flip-in-x/0/0.5')}>Flipping</div>
+<div style={tw('enter-flip-in-x/0/500')}>Flipping</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `enter-rotate-in/0/500` | Rotate in from -180° |
+| `enter-flip-in-x/0/500` | 3D flip on horizontal axis |
+| `enter-flip-in-y/0/500` | 3D flip on vertical axis |
+
+## Exit Animations
+
+Format: `exit-{type}/{startMs}/{durationMs}`
+
+- `startMs` - when the exit animation begins
+- `durationMs` - how long the exit animation lasts
+
+Exit animations use the same timing system but animate elements out.
+
+```tsx
+// Fade out starting at 2500ms, lasting 500ms (ends at 3000ms)
+<h1 style={tw('exit-fade-out/2500/500')}>Goodbye</h1>
+
+// Combined enter and exit on same element
+<h1 style={tw('enter-fade-in/0/500 exit-fade-out/2500/500')}>
+  Hello and Goodbye
+</h1>
 ```
 
 | Class | Description |
 |-------|-------------|
-| `animate-rotate-in/0/1` | Rotate in from -180° |
-| `animate-rotate-out/0/1` | Rotate out to 180° |
-| `animate-flip-in-x/0/1` | 3D flip on horizontal axis |
-| `animate-flip-in-y/0/1` | 3D flip on vertical axis |
+| `exit-fade-out/2500/500` | Fade out (opacity 1 → 0) |
+| `exit-fade-out-up/2500/500` | Fade out + slide up |
+| `exit-fade-out-down/2500/500` | Fade out + slide down |
+| `exit-fade-out-left/2500/500` | Fade out + slide left |
+| `exit-fade-out-right/2500/500` | Fade out + slide right |
+| `exit-slide-up/2500/500` | Slide out upward (100px) |
+| `exit-slide-down/2500/500` | Slide out downward (100px) |
+| `exit-slide-left/2500/500` | Slide out to left (100px) |
+| `exit-slide-right/2500/500` | Slide out to right (100px) |
+| `exit-scale-out/2500/500` | Scale out to 150% |
+| `exit-zoom-out/2500/500` | Zoom out to 200% |
+| `exit-rotate-out/2500/500` | Rotate out to 180° |
+| `exit-bounce-out/2500/500` | Bounce out with scale |
+| `exit-bounce-out-up/2500/500` | Bounce out upward |
+| `exit-bounce-out-down/2500/500` | Bounce out downward |
+| `exit-bounce-out-left/2500/500` | Bounce out to left |
+| `exit-bounce-out-right/2500/500` | Bounce out to right |
 
 ## Loop Animations
 
-Format: `animate-{type}/{frameLength}`
+Format: `loop-{type}/{durationMs}`
 
-Loop animations repeat every `{frameLength}` frames. At 30fps:
-- `/30` = 1 second loop
-- `/15` = 0.5 second loop
-- `/60` = 2 second loop
+Loop animations repeat every `{durationMs}` milliseconds:
+- `/1000` = 1 second loop
+- `/500` = 0.5 second loop
+- `/2000` = 2 second loop
+
+When duration is omitted (`loop-bounce`), it defaults to 1000ms (1 second).
 
 ```tsx
-// Pulse opacity every 15 frames (0.5s at 30fps)
-<div style={tw('animate-pulse/15')}>Pulsing</div>
+// Pulse opacity every 500ms
+<div style={tw('loop-fade/500')}>Pulsing</div>
 
-// Bounce every 20 frames
-<div style={tw('animate-bounce/20')}>Bouncing</div>
+// Bounce every 800ms
+<div style={tw('loop-bounce/800')}>Bouncing</div>
 
-// Full rotation every 60 frames (2s)
-<div style={tw('animate-spin/60')}>Spinning</div>
+// Full rotation every 2000ms
+<div style={tw('loop-spin/2000')}>Spinning</div>
 ```
 
 | Class | Description |
 |-------|-------------|
-| `animate-pulse/{n}` | Opacity pulse (0.5 → 1 → 0.5) |
-| `animate-bounce/{n}` | Bounce up and down |
-| `animate-spin/{n}` | Full 360° rotation |
-| `animate-ping/{n}` | Scale up + fade out (radar effect) |
-| `animate-wiggle/{n}` | Side to side wiggle |
-| `animate-float/{n}` | Gentle up and down floating |
+| `loop-fade/{ms}` | Opacity pulse (0.5 → 1 → 0.5) |
+| `loop-bounce/{ms}` | Bounce up and down |
+| `loop-spin/{ms}` | Full 360° rotation |
+| `loop-ping/{ms}` | Scale up + fade out (radar effect) |
+| `loop-wiggle/{ms}` | Side to side wiggle |
+| `loop-float/{ms}` | Gentle up and down floating |
+| `loop-pulse/{ms}` | Scale pulse (1.0 → 1.05 → 1.0) |
+| `loop-shake/{ms}` | Shake side to side |
 
 ## Easing Functions
 
@@ -1820,16 +1526,16 @@ Add an easing class **before** the animation class to control the timing curve.
 
 ```tsx
 // Ease in (accelerate)
-<h1 style={tw('ease-in animate-fade-in/0/1')}>Accelerating</h1>
+<h1 style={tw('ease-in enter-fade-in/0/1000')}>Accelerating</h1>
 
 // Ease out (decelerate) - default
-<h1 style={tw('ease-out animate-fade-in/0/1')}>Decelerating</h1>
+<h1 style={tw('ease-out enter-fade-in/0/1000')}>Decelerating</h1>
 
 // Ease in-out (smooth)
-<h1 style={tw('ease-in-out animate-fade-in/0/1')}>Smooth</h1>
+<h1 style={tw('ease-in-out enter-fade-in/0/1000')}>Smooth</h1>
 
 // Strong cubic easing
-<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>
 ```
 
 | Class | Description | Best For |
@@ -1845,26 +1551,45 @@ Add an easing class **before** the animation class to control the timing curve.
 | `ease-out-quart` | Very strong fast start | Punchy entrances |
 | `ease-in-out-quart` | Very strong both ends | Maximum drama |
 
+## Combining Enter and Exit
+
+You can use both enter and exit animations on the same element:
+
+```tsx
+export default function EnterExit({ tw, title }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
+      {/* Fade in during first 500ms, fade out during last 500ms (assuming 3s video) */}
+      <h1 style={tw('text-8xl font-bold text-white enter-fade-in/0/500 exit-fade-out/2500/500')}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+The opacities from multiple animations are **multiplied together**, so you get smooth transitions that combine properly.
+
 ## Staggered Animations
 
-Create sequenced animations by offsetting the start/end times:
+Create sequenced animations by offsetting start times:
 
 ```tsx
 export default function StaggeredList({ tw, items }) {
   return (
     <div style={tw('flex flex-col gap-4')}>
-      {/* First item: 0% to 30% */}
-      <div style={tw('ease-out animate-fade-in-left/0/0.3')}>
+      {/* First item: starts at 0ms, lasts 300ms */}
+      <div style={tw('ease-out enter-fade-in-left/0/300')}>
         {items[0]}
       </div>
 
-      {/* Second item: 10% to 40% */}
-      <div style={tw('ease-out animate-fade-in-left/0.1/0.4')}>
+      {/* Second item: starts at 100ms, lasts 300ms */}
+      <div style={tw('ease-out enter-fade-in-left/100/300')}>
         {items[1]}
       </div>
 
-      {/* Third item: 20% to 50% */}
-      <div style={tw('ease-out animate-fade-in-left/0.2/0.5')}>
+      {/* Third item: starts at 200ms, lasts 300ms */}
+      <div style={tw('ease-out enter-fade-in-left/200/300')}>
         {items[2]}
       </div>
     </div>
@@ -1881,13 +1606,13 @@ export default function DynamicStagger({ tw, items }) {
   return (
     <div style={tw('flex flex-col gap-4')}>
       {items.map((item, i) => {
-        const start = i * 0.1;           // Each item starts 10% later
-        const end = start + 0.3;          // Each animation lasts 30%
+        const start = i * 100;      // Each item starts 100ms later
+        const duration = 300;       // Each animation lasts 300ms
 
         return (
           <div
             key={i}
-            style={tw(`ease-out animate-fade-in-up/${start}/${end}`)}
+            style={tw(`ease-out enter-fade-in-up/${start}/${duration}`)}
           >
             {item}
           </div>
@@ -1898,40 +1623,6 @@ export default function DynamicStagger({ tw, items }) {
 }
 ```
 
-## Combining Animations
-
-You can combine multiple animation classes. They will be applied together:
-
-```tsx
-// Note: Multiple transforms will be combined
-<h1 style={tw('animate-fade-in/0/0.5 animate-scale-in/0/0.5')}>
-  Fade + Scale
-</h1>
-```
-
-For more complex combinations, use manual animation with `progress`:
-
-```tsx
-export default function ComplexAnimation({ tw, progress, title }) {
-  // Custom compound animation
-  const opacity = Math.min(1, progress * 3);
-  const scale = 0.8 + progress * 0.2;
-  const rotation = (1 - progress) * -10;
-
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full')}>
-      <h1 style={{
-        ...tw('text-8xl font-bold'),
-        opacity,
-        transform: `scale(${scale}) rotate(${rotation}deg)`
-      }}>
-        {title}
-      </h1>
-    </div>
-  );
-}
-```
-
 ## Common Patterns
 
 ### Intro Sequence
@@ -1943,16 +1634,16 @@ export default function IntroVideo({ tw, title, subtitle, logo }) {
       {/* Logo appears first */}
       <img
         src={logo}
-        style={tw('h-20 mb-8 ease-out animate-scale-in/0/0.3')}
+        style={tw('h-20 mb-8 ease-out enter-scale-in/0/300')}
       />
 
       {/* Title bounces in */}
-      <h1 style={tw('text-7xl font-bold text-white ease-out animate-bounce-in-up/0.2/0.5')}>
+      <h1 style={tw('text-7xl font-bold text-white ease-out enter-bounce-in-up/200/500')}>
         {title}
       </h1>
 
       {/* Subtitle fades in last */}
-      <p style={tw('text-2xl text-white/80 mt-4 ease-out animate-fade-in-up/0.4/0.7')}>
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/400/700')}>
         {subtitle}
       </p>
     </div>
@@ -1969,7 +1660,7 @@ export default function TextReveal({ tw, words }) {
       {words.split(' ').map((word, i) => (
         <span
           key={i}
-          style={tw(`text-4xl font-bold ease-out animate-fade-in-up/${i * 0.1}/${i * 0.1 + 0.2}`)}
+          style={tw(`text-4xl font-bold ease-out enter-fade-in-up/${i * 100}/200`)}
         >
           {word}
         </span>
@@ -1986,8 +1677,8 @@ export default function AnimatedBackground({ tw, children }) {
   return (
     <div style={tw('relative w-full h-full')}>
       {/* Floating background circles */}
-      <div style={tw('absolute top-10 left-10 w-20 h-20 rounded-full bg-white/10 animate-float/60')} />
-      <div style={tw('absolute bottom-20 right-20 w-32 h-32 rounded-full bg-white/10 animate-pulse/45')} />
+      <div style={tw('absolute top-10 left-10 w-20 h-20 rounded-full bg-white/10 loop-float/2000')} />
+      <div style={tw('absolute bottom-20 right-20 w-32 h-32 rounded-full bg-white/10 loop-fade/1500')} />
 
       {/* Main content */}
       <div style={tw('relative z-10')}>
@@ -1998,14 +1689,14 @@ export default function AnimatedBackground({ tw, children }) {
 }
 ```
 
-### Exit Animation
+### Full Enter/Exit Animation
 
 ```tsx
-export default function ExitAnimation({ tw, title }) {
+export default function FullAnimation({ tw, title }) {
   return (
     <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
-      {/* Visible from 0-70%, then exits */}
-      <h1 style={tw('text-8xl font-bold text-white ease-in animate-fade-out-up/0.7/1')}>
+      {/* Enter: starts at 0, lasts 400ms. Exit: starts at 2600ms, lasts 400ms */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out enter-bounce-in-up/0/400 exit-fade-out-up/2600/400')}>
         {title}
       </h1>
     </div>
@@ -2013,7 +1704,7 @@ export default function ExitAnimation({ tw, title }) {
 }
 ```
 
-## Manual Animation with `progress` and `frame`
+## Programmatic Animations
 
 For complete control beyond animation classes, use `progress` and `frame` directly.
 
@@ -2026,22 +1717,23 @@ For complete control beyond animation classes, use `progress` and `frame` direct
 
 These are **only available in video templates**. Use them when animation classes aren't flexible enough.
 
-### Using `progress`
+### Using `frame`
 
 ```tsx
-export default function ProgressAnimation({ tw, progress, title }) {
-  // Custom fade based on progress
-  const opacity = progress < 0.3 ? progress / 0.3 : 1;
-  
-  // Custom scale based on progress  
-  const scale = 0.8 + progress * 0.2; // 0.8 to 1.0
+export default function FrameAnimation({ tw, frame, title }) {
+  // Color cycling using frame number
+  const hue = (frame * 5) % 360; // Cycle through colors
+
+  // Pulsing based on frame
+  const fps = 30;
+  const pulse = Math.sin(frame / fps * Math.PI * 2) * 0.2 + 0.8; // 0.6 to 1.0
 
   return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
       <h1 style={{
-        ...tw('text-8xl font-bold text-white'),
-        opacity,
-        transform: `scale(${scale})`
+        ...tw('text-8xl font-bold'),
+        color: `hsl(${hue}, 70%, 60%)`,
+        transform: `scale(${pulse})`
       }}>
         {title}
       </h1>
@@ -2050,23 +1742,22 @@ export default function ProgressAnimation({ tw, progress, title }) {
 }
 ```
 
-### Using `frame`
+### Using `progress`
 
 ```tsx
-export default function FrameAnimation({ tw, frame, title }) {
-  // Color cycling using frame number
-  const hue = (frame * 5) % 360; // Cycle through colors
-  
-  // Pulsing based on frame
-  const fps = 30;
-  const pulse = Math.sin(frame / fps * Math.PI * 2) * 0.2 + 0.8; // 0.6 to 1.0
+export default function ProgressAnimation({ tw, progress, title }) {
+  // Custom fade based on progress
+  const opacity = progress < 0.3 ? progress / 0.3 : 1;
+
+  // Custom scale based on progress
+  const scale = 0.8 + progress * 0.2; // 0.8 to 1.0
 
   return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
       <h1 style={{
-        ...tw('text-8xl font-bold'),
-        color: `hsl(${hue}, 70%, 60%)`,
-        transform: `scale(${pulse})`
+        ...tw('text-8xl font-bold text-white'),
+        opacity,
+        transform: `scale(${scale})`
       }}>
         {title}
       </h1>
@@ -2081,7 +1772,7 @@ export default function FrameAnimation({ tw, frame, title }) {
 export default function CustomEasing({ tw, progress, title }) {
   // Smoothstep easing
   const eased = progress * progress * (3 - 2 * progress);
-  
+
   // Elastic easing
   const elastic = Math.pow(2, -10 * progress) * Math.sin((progress - 0.075) * (2 * Math.PI) / 0.3) + 1;
 
@@ -2099,7 +1790,7 @@ export default function CustomEasing({ tw, progress, title }) {
 }
 ```
 
-### When to Use Manual Animation
+### When to Use Programmatic Animations
 
 Use `progress`/`frame` instead of animation classes when you need:
 - **Custom easing functions** (elastic, spring, bounce with specific curves)
@@ -2141,7 +1832,7 @@ Beyond the basics, loopwind provides:
 - `qr()` - Generate QR codes on the fly
 - `config` - Access user configuration
 
-For image and video embedding, see the [Images](/images) and [Video](/video) pages.
+For image embedding, see the [Images](/images) page.
 
 ## Template Composition
 
@@ -2261,7 +1952,7 @@ You can customize QR code appearance:
 
 ## User Configuration
 
-Access user settings from `loopwind.json` using the `config` prop:
+Access user settings from `_loopwind/loopwind.json` using the `config` prop:
 
 ```tsx
 export default function BrandedTemplate({ tw, config, title }) {
@@ -2281,8 +1972,8 @@ export default function BrandedTemplate({ tw, config, title }) {
 }
 ```
 
-**User's loopwind.json:**
-```json
+**User's `_loopwind/loopwind.json`:**
+```json title="_loopwind/loopwind.json"
 {
   "colors": {
     "brand": "#ff6b6b"
@@ -2309,8 +2000,7 @@ export default function MyTemplate({
   
   // Media helpers (see dedicated pages)
   image,     // Image embedder → see /images
-  video,     // Video frame getter → see /video
-  
+
   // Video-specific (only in video templates)
   frame,     // Current frame number → see /video
   progress,  // Animation progress 0-1 → see /video
@@ -2325,7 +2015,7 @@ export default function MyTemplate({
 ## Next Steps
 
 - [Image Rendering and Embedding](/images)
-- [Video Rendering and Animation](/video)
+- [Video Animation](/video)
 - [Styling with Tailwind & shadcn/ui](/styling)
 - [Custom Fonts](/fonts)
 
@@ -2415,7 +2105,7 @@ loopwind uses **shadcn/ui's design system** by default, providing semantic color
 
 ### Default Color Palette
 
-All templates automatically have access to these semantic colors:
+All templates automatically have access to these semantic colors defined in `_loopwind/loopwind.json`:
 
 ```typescript
 colors: {
@@ -2650,9 +2340,9 @@ export default function GradientCard({ title, tw }) {
 
 ## Custom Theme Colors
 
-Override default colors in your `loopwind.json`:
+You can override the default shadcn colors or add your own custom colors in `_loopwind/loopwind.json`:
 
-```json
+```json title="_loopwind/loopwind.json"
 {
   "theme": {
     "colors": {
@@ -2665,11 +2355,12 @@ Override default colors in your `loopwind.json`:
 }
 ```
 
-Then use in templates:
+Then use these custom colors in your templates:
 
 ```tsx
 tw('text-brand')    // Uses your custom brand color
 tw('bg-primary')    // Uses your custom primary color
+tw('bg-accent')     // Uses your custom accent color
 ```
 
 ## Auto-Detection from tailwind.config.js
@@ -2679,8 +2370,9 @@ loopwind automatically detects and loads your project's Tailwind configuration:
 ```
 your-project/
 ├── tailwind.config.js  ← Automatically detected
-├── loopwind.json
-└── _loopwind/templates/
+└── _loopwind/
+    ├── loopwind.json
+    └── templates/
 ```
 
 This includes:
@@ -2775,13 +2467,13 @@ The recommended way to use fonts is through `loopwind.json` - configure fonts on
 
 ## Using Fonts from loopwind.json (Recommended)
 
-Configure fonts in your `loopwind.json` and use Tailwind classes in templates.
+Configure fonts in your `_loopwind/loopwind.json` and use Tailwind classes in templates.
 
 ### Simple Setup
 
-Define font families without loading custom fonts (uses system fonts):
+Define font families in `_loopwind/loopwind.json` without loading custom fonts (uses system fonts):
 
-```json
+```json title="_loopwind/loopwind.json"
 {
   "fonts": {
     "sans": ["Inter", "system-ui", "-apple-system", "sans-serif"],
@@ -2810,13 +2502,13 @@ export default function({ title, tw }) {
 }
 ```
 
-**Result:** Uses system fonts, falls back to Noto Sans for rendering.
+**Result:** Uses system fonts, falls back to Inter for rendering.
 
 ### Complete Setup (With Font Files)
 
-Load custom font files for brand-specific typography:
+Load custom font files for brand-specific typography in `_loopwind/loopwind.json`:
 
-```json
+```json title="_loopwind/loopwind.json"
 {
   "fonts": {
     "sans": {
@@ -2839,13 +2531,13 @@ Load custom font files for brand-specific typography:
 **Project structure:**
 ```
 your-project/
-├── loopwind.json
-├── fonts/
-│   ├── Inter-Regular.woff
-│   ├── Inter-Bold.woff
-│   └── JetBrainsMono-Regular.woff
-└── _loopwind/
-    └── templates/
+├── _loopwind/
+│   ├── loopwind.json
+│   └── templates/
+└── fonts/
+    ├── Inter-Regular.woff
+    ├── Inter-Bold.woff
+    └── JetBrainsMono-Regular.woff
 ```
 
 **Template usage (same as before):**
@@ -2862,62 +2554,23 @@ your-project/
 - `font-mono` - Uses `fonts.mono` from loopwind.json
 
 **Supported formats:**
-- ✅ **WOFF** (`.woff`) - Recommended
-- ✅ **WOFF2** (`.woff2`) - Best compression
+- ✅ **WOFF** (`.woff`) - Recommended for best compatibility
 - ✅ **TTF** (`.ttf`) - Also supported
 - ✅ **OTF** (`.otf`) - Also supported
-
-## Template-Specific Fonts (Advanced)
-
-For templates that need unique fonts not shared across the project:
-
-**Template structure:**
-```
-_loopwind/templates/my-template/
-├── template.tsx
-└── fonts/
-    └── SpecialFont.woff
-```
-
-**template.tsx:**
-```tsx
-export const meta = {
-  name: "my-template",
-  type: "image",
-  size: { width: 1200, height: 630 },
-  props: { title: "string" },
-  fonts: [
-    {
-      name: "Special Font",
-      path: "fonts/SpecialFont.woff",
-      weight: 400,
-      style: "normal"
-    }
-  ]
-};
-
-export default function Template({ title, tw }) {
-  return (
-    <h1 style={{ fontFamily: 'Special Font', fontWeight: 400 }}>
-      {title}
-    </h1>
-  );
-}
-```
+- ❌ **WOFF2** (`.woff2`) - Not supported by renderer
 
 ## Font Loading Priority
 
 loopwind loads fonts in this order:
 
 1. **loopwind.json fonts** (if configured with `files`)
-2. **Template meta fonts** (if specified in `export const meta`)
-3. **Default Noto Sans** (from CDN)
+2. **Bundled Inter fonts** (included with CLI)
 
-This means loopwind.json fonts override template fonts, ensuring consistency.
+This ensures fonts work out of the box with no configuration.
 
 ## Default Fonts
 
-If no fonts are configured, loopwind automatically fetches **Noto Sans** from jsDelivr CDN.
+If no fonts are configured, loopwind uses **Inter** (Regular 400, Bold 700) which is bundled with the CLI. This means fonts work offline with no configuration required.
 
 ## Best Practices
 
@@ -2926,12 +2579,11 @@ If no fonts are configured, loopwind automatically fetches **Noto Sans** from js
 3. ✅ **Include fallbacks** - Always add system fonts: `["Inter", "system-ui", "sans-serif"]`
 4. ✅ **Match names** - First font in `family` array is used as the loaded font name
 5. ✅ **Relative paths** - Font paths are relative to `loopwind.json` location
-6. ⚠️ **Template fonts for special cases** - Only use template meta fonts for template-specific typography
 
 ## Examples
 
 ### Minimal Setup (System Fonts)
-```json
+```json title="_loopwind/loopwind.json"
 {
   "fonts": {
     "sans": ["Inter", "-apple-system", "sans-serif"]
@@ -2941,7 +2593,7 @@ If no fonts are configured, loopwind automatically fetches **Noto Sans** from js
 Uses system Inter if available, falls back to Noto Sans for rendering.
 
 ### Brand Fonts Setup
-```json
+```json title="_loopwind/loopwind.json"
 {
   "fonts": {
     "sans": {
@@ -2957,7 +2609,7 @@ Uses system Inter if available, falls back to Noto Sans for rendering.
 Loads and uses Montserrat for all templates.
 
 ### Multi-Font Setup
-```json
+```json title="_loopwind/loopwind.json"
 {
   "fonts": {
     "sans": {
@@ -2984,6 +2636,50 @@ Loads and uses Montserrat for all templates.
 ```
 Loads different fonts for each style class.
 
+### External Font URLs
+Load fonts directly from CDNs without downloading files:
+
+```json title="_loopwind/loopwind.json"
+{
+  "fonts": {
+    "sans": {
+      "family": ["Inter", "sans-serif"],
+      "files": [
+        {
+          "path": "https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff",
+          "weight": 400
+        },
+        {
+          "path": "https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff",
+          "weight": 700
+        }
+      ]
+    }
+  }
+}
+```
+
+You can also mix local and external fonts:
+
+```json title="_loopwind/loopwind.json"
+{
+  "fonts": {
+    "sans": {
+      "family": ["Inter", "sans-serif"],
+      "files": [
+        { "path": "./fonts/Inter-Regular.woff", "weight": 400 },
+        {
+          "path": "https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff",
+          "weight": 700
+        }
+      ]
+    }
+  }
+}
+```
+
+**Note:** Use WOFF format (`.woff`) for best compatibility. WOFF2 is not supported by the underlying renderer.
+
 ## Performance
 
 - ✅ **Font caching** - Fonts load once and are cached for all renders