Example use cases
Looping Logo Animation looping-logo.mp4
export const meta = {
name: 'looping-logo',
type: 'video',
size: { width: 1200, height: 630 },
video: { fps: 60, duration: 3 },
props: {
text: 'string?',
},
};
export default function LoopingLogo({ tw, text = 'loopwind' }) {
const letters = text.split('');
return (
<div style={tw('flex flex-col items-center justify-center w-full h-full bg-background')}>
{/* Logo icon - static */}
<div style={tw('flex mb-6')}>
<svg width="120" height="120" viewBox="0 0 100 100" fill="none">
<path
d="M50 15 C20 15, 10 45, 30 65 C45 80, 70 75, 75 55 C80 35, 60 25, 50 35 C40 45, 45 60, 55 60 C65 60, 70 50, 65 42"
stroke="#2dd4bf"
strokeWidth="8"
strokeLinecap="round"
fill="none"
/>
</svg>
</div>
{/* Wave text - staggered loop with delay */}
{/* 1000ms loop = 3 exact cycles in 3s video for seamless loop */}
{/* 125ms stagger per letter = full wave spans one cycle */}
<div style={tw('flex items-center')}>
{letters.map((letter, i) => (
<div
key={i}
style={tw(`flex text-8xl font-black text-foreground tracking-tight loop-float/1000/${i * 125}`)}
>
{letter}
</div>
))}
</div>
{/* Tagline */}
<div style={tw('flex text-2xl text-muted-foreground mt-6')}>
Generate images & videos with code
</div>
</div>
);
}
Install this template to your project:
loopwind add https://loopwind.dev/api/templates/looping-logo.json
Template will be installed to .loopwind/looping-logo/
Then render it:
loopwind render looping-logo '{"text":"loopwind"}'
Output will be saved to looping-logo.mp4
Product Introduction introducing-loopwind.mp4
export const meta = {
name: 'introducing-loopwind',
type: 'video',
size: { width: 1200, height: 676 },
video: { fps: 60, duration: 5 },
props: {
title: 'string[]?',
features: 'array?',
brandName: 'string?',
brandUrl: 'string?',
},
};
const defaultFeatures = [
{ icon: '{ }', title: 'React + Tailwind', subtitle: 'Write code, get visuals', color: '#2dd4bf' },
{ icon: '60', title: 'WASM-Powered', subtitle: 'Blazing fast rendering', color: '#a78bfa' },
{ icon: 'AI', title: 'Agent Ready', subtitle: 'Built for automation', color: '#f472b6' },
{ icon: '0', title: 'Zero Config', subtitle: 'Works out of the box', color: '#fbbf24' },
];
export default function IntroducingLoopwind({
tw,
title = ['Generate Images', '& Videos with Code'],
features = defaultFeatures,
brandName = 'loopwind',
brandUrl = 'loopwind.dev',
}) {
return (
<div style={tw('flex w-full h-full bg-background')}>
{/* Left side - Content */}
<div style={tw('flex flex-col flex-1 justify-center p-12 pl-20')}>
{/* Main title */}
<div style={tw('flex flex-col mb-12 ease-out enter-fade-in/0/800 enter-slide-left/0/600')}>
{title.map((line, i) => (
<span key={i} style={tw('text-6xl text-foreground font-black leading-tight text-balance')}>{line}</span>
))}
</div>
{/* Features - 2x2 using nested flex */}
<div style={tw('flex flex-col gap-4')}>
{/* Row 1 */}
<div style={tw('flex gap-4')}>
{features.slice(0, 2).map((feature, i) => (
<div
key={i}
style={tw(`flex items-center gap-4 bg-card rounded-2xl p-4 pr-8 ease-out enter-fade-in/${400 + i * 150}/600 enter-slide-up/${400 + i * 150}/500`)}
>
<div style={{ ...tw(`flex items-center justify-center w-14 h-14 rounded-xl ease-out enter-scale-in/${500 + i * 150}/400`), backgroundColor: feature.color }}>
<span style={tw('text-background font-black text-lg')}>{feature.icon}</span>
</div>
<div style={tw('flex flex-col')}>
<span style={tw('text-xl text-foreground font-bold')}>{feature.title}</span>
<span style={tw('text-sm text-muted-foreground')}>{feature.subtitle}</span>
</div>
</div>
))}
</div>
{/* Row 2 */}
<div style={tw('flex gap-4')}>
{features.slice(2, 4).map((feature, i) => (
<div
key={i + 2}
style={tw(`flex items-center gap-4 bg-card rounded-2xl p-4 pr-8 ease-out enter-fade-in/${700 + i * 150}/600 enter-slide-up/${700 + i * 150}/500`)}
>
<div style={{ ...tw(`flex items-center justify-center w-14 h-14 rounded-xl ease-out enter-scale-in/${800 + i * 150}/400`), backgroundColor: feature.color }}>
<span style={tw('text-background font-black text-lg')}>{feature.icon}</span>
</div>
<div style={tw('flex flex-col')}>
<span style={tw('text-xl text-foreground font-bold')}>{feature.title}</span>
<span style={tw('text-sm text-muted-foreground')}>{feature.subtitle}</span>
</div>
</div>
))}
</div>
</div>
</div>
{/* Right side - Logo sidebar */}
<div style={tw('flex flex-col items-center justify-center w-[40%] bg-card ease-out enter-fade-in/400/800')}>
<div style={tw('flex flex-col items-center justify-center')}>
<svg width="200" height="200" viewBox="0 0 100 100" fill="none">
<path
d="M50 15 C20 15, 10 45, 30 65 C45 80, 70 75, 75 55 C80 35, 60 25, 50 35 C40 45, 45 60, 55 60 C65 60, 70 50, 65 42"
stroke="#2dd4bf"
strokeWidth="8"
strokeLinecap="round"
fill="none"
style={tw('ease-out enter-stroke-dash-[250]/600/1500')}
/>
</svg>
<span style={tw('text-4xl font-black text-foreground tracking-tight mt-4 ease-out enter-fade-in/1800/600')}>{brandName}</span>
<span style={tw('text-lg text-muted-foreground mt-2 ease-out enter-fade-in/2000/600')}>{brandUrl}</span>
</div>
</div>
</div>
);
}
Install this template to your project:
loopwind add https://loopwind.dev/api/templates/introducing-loopwind.json
Template will be installed to .loopwind/introducing-loopwind/
Then render it:
loopwind render introducing-loopwind '{"title":["Generate Images","& Videos with Code"],"features":[{"icon":"{ }","title":"React + Tailwind","subtitle":"Write code, get visuals","color":"#2dd4bf"},{"icon":"60","title":"WASM-Powered","subtitle":"Blazing fast rendering","color":"#a78bfa"},{"icon":"AI","title":"Agent Ready","subtitle":"Built for automation","color":"#f472b6"},{"icon":"0","title":"Zero Config","subtitle":"Works out of the box","color":"#fbbf24"}],"brandName":"loopwind","brandUrl":"loopwind.dev"}'
Output will be saved to introducing-loopwind.mp4
Changelog Video changelog-video.mp4
export const meta = {
name: 'changelog-video',
type: 'video',
size: { width: 1200, height: 676 },
video: { fps: 60, duration: 4 },
props: {
version: 'string',
items: '{title: string, subtitle: string}[]',
},
};
export default function ChangelogVideo({ tw, version, items }) {
return (
<div style={tw('flex w-full h-full bg-background')}>
{/* Left side - Changelog */}
<div style={tw('flex flex-col flex-1 justify-center p-12 pl-20')}>
{/* Version badge */}
<div style={tw('flex mb-8 ease-out enter-fade-in/0/600 enter-slide-left/0/500')}>
<div style={tw('flex px-6 py-3 bg-primary rounded-full')}>
<span style={tw('text-2xl font-black text-primary-foreground')}>{version}</span>
</div>
</div>
{/* Changelog items */}
<div style={tw('flex flex-col gap-5')}>
{items.map((item, i) => (
<div
key={i}
style={tw(`flex items-center gap-5 ease-out enter-fade-in/${400 + i * 300}/800 enter-slide-left/${400 + i * 300}/700`)}
>
<div style={tw(`flex items-center justify-center w-12 h-12 bg-primary rounded-full ease-out enter-scale-in/${500 + i * 300}/500`)}>
<span style={tw('text-primary-foreground font-black text-xl')}>{i + 1}</span>
</div>
<div style={tw('flex flex-col')}>
<span style={tw('text-3xl text-foreground font-bold text-balance')}>{item.title}</span>
<span style={tw('text-lg text-muted-foreground')}>{item.subtitle}</span>
</div>
</div>
))}
</div>
</div>
{/* Right side - Logo sidebar */}
<div style={tw('flex flex-col items-center justify-center w-[40%] bg-card ease-out enter-fade-in/600/800')}>
<div style={tw('flex flex-col items-center justify-center ease-out enter-scale-in/800/600')}>
<svg width="200" height="200" viewBox="0 0 100 100" fill="none">
<path
d="M50 15 C20 15, 10 45, 30 65 C45 80, 70 75, 75 55 C80 35, 60 25, 50 35 C40 45, 45 60, 55 60 C65 60, 70 50, 65 42"
stroke="#2dd4bf"
strokeWidth="8"
strokeLinecap="round"
fill="none"
/>
</svg>
<span style={tw('text-4xl font-black text-foreground tracking-tight mt-4')}>loopwind</span>
</div>
</div>
</div>
);
}
Install this template to your project:
loopwind add https://loopwind.dev/api/templates/changelog-video.json
Template will be installed to .loopwind/changelog-video/
Then render it:
loopwind render changelog-video '{"version":"v0.24.0","items":[{"title":"AI skill support","subtitle":"AI-powered template creation"},{"title":"60fps video rendering","subtitle":"Smooth, professional animations"},{"title":"Warm teal theme","subtitle":"Beautiful color palette"}]}'
Output will be saved to changelog-video.mp4
Open Graph Image og-image.png
export const meta = {
name: 'og-image',
type: 'image',
size: { width: 1200, height: 630 },
props: {
title: 'string',
description: 'string',
cover: 'string?',
},
};
export default function OGImage({ tw, image, title, description, cover }) {
const coverSrc = cover
? image('cover')
: 'http://localhost:4321/og-cover.png';
return (
<div style={tw('flex w-full h-full bg-background')}>
{/* Left side - Content */}
<div style={tw('flex flex-col justify-between flex-1 p-12')}>
{/* Logo */}
<div style={tw('flex items-center gap-3')}>
<svg width="40" height="40" viewBox="0 0 100 100" fill="none">
<path
d="M50 15 C20 15, 10 45, 30 65 C45 80, 70 75, 75 55 C80 35, 60 25, 50 35 C40 45, 45 60, 55 60 C65 60, 70 50, 65 42"
stroke="#2dd4bf"
strokeWidth="8"
strokeLinecap="round"
fill="none"
/>
</svg>
<span style={tw('text-2xl font-black text-foreground tracking-tight')}>loopwind</span>
</div>
{/* Content */}
<div style={tw('flex flex-col')}>
<h1 style={tw('text-5xl font-bold text-foreground leading-tight mb-4 text-balance')}>
{title}
</h1>
<p style={tw('text-xl text-muted-foreground leading-relaxed')}>
{description}
</p>
</div>
{/* Domain */}
<span style={tw('text-lg text-muted-foreground')}>loopwind.dev</span>
</div>
{/* Right side - Cover image */}
<div style={tw('flex w-[45%]')}>
<img
src={coverSrc}
style={tw('w-full h-full object-cover')}
/>
</div>
</div>
);
}
Install this template to your project:
loopwind add https://loopwind.dev/api/templates/og-image.json
Template will be installed to .loopwind/og-image/
Then render it:
loopwind render og-image '{"title":"Generate Images & Videos","description":"With React + Tailwind templates. Perfect for marketing automation and dynamic content."}'
Output will be saved to og-image.png
Animated Open Graph Video og-video.mp4
export const meta = {
name: 'og-video',
type: 'video',
size: { width: 1200, height: 630 },
video: { fps: 60, duration: 3 },
props: {
title: 'string',
description: 'string',
cover: 'string?',
},
};
export default function OGVideo({ tw, image, title, description, cover }) {
const coverSrc = cover
? image('cover')
: 'http://localhost:4321/og-cover.png';
return (
<div style={tw('flex w-full h-full bg-background')}>
{/* Left side - Content */}
<div style={tw('flex flex-col justify-between flex-1 p-12')}>
{/* Logo */}
<div style={tw('flex items-center gap-3 ease-out enter-fade-in/0/600 enter-slide-left/0/500')}>
<svg width="40" height="40" viewBox="0 0 100 100" fill="none">
<path
d="M50 15 C20 15, 10 45, 30 65 C45 80, 70 75, 75 55 C80 35, 60 25, 50 35 C40 45, 45 60, 55 60 C65 60, 70 50, 65 42"
stroke="#2dd4bf"
strokeWidth="8"
strokeLinecap="round"
fill="none"
/>
</svg>
<span style={tw('text-2xl font-black text-foreground tracking-tight')}>loopwind</span>
</div>
{/* Content */}
<div style={tw('flex flex-col')}>
{/* Badge */}
<div style={tw('flex items-center gap-2 mb-4 ease-out enter-fade-in/200/600 enter-slide-left/200/500')}>
<div style={tw('relative flex items-center')}>
<div style={tw('absolute w-2 h-2 bg-primary rounded-full loop-ping/1000')} />
<div style={tw('w-2 h-2 bg-primary rounded-full')} />
</div>
<span style={tw('text-sm font-medium text-primary')}>Version 1.0 is out</span>
</div>
<h1 style={tw('text-5xl font-bold text-foreground leading-tight mb-4 text-balance ease-out enter-fade-in/300/800 enter-slide-left/300/600')}>
{title}
</h1>
<p style={tw('text-xl text-muted-foreground leading-relaxed ease-out enter-fade-in/600/800 enter-slide-left/600/600')}>
{description}
</p>
</div>
{/* Domain */}
<span style={tw('text-lg text-muted-foreground ease-out enter-fade-in/900/600')}>loopwind.dev</span>
</div>
{/* Right side - Cover image */}
<div style={tw('flex w-[45%] ease-out enter-fade-in/200/1000')}>
<img
src={coverSrc}
style={tw('w-full h-full object-cover')}
/>
</div>
</div>
);
}
Install this template to your project:
loopwind add https://loopwind.dev/api/templates/og-video.json
Template will be installed to .loopwind/og-video/
Then render it:
loopwind render og-video '{"title":"Generate Images & Videos","description":"With React + Tailwind templates. Perfect for marketing automation and dynamic content."}'
Output will be saved to og-video.mp4
Staggered Logo Animation staggered-logo.mp4
export const meta = {
name: 'staggered-logo',
type: 'video',
size: { width: 1200, height: 630 },
video: { fps: 60, duration: 3 },
props: {
text: 'string?',
},
};
export default function StaggeredLogo({ tw, text = 'loopwind' }) {
const letters = text.split('');
return (
<div style={tw('flex flex-col items-center justify-center w-full h-full bg-background')}>
{/* Logo icon */}
<div style={tw('flex mb-6 ease-spring enter-scale-in/0/600')}>
<svg width="120" height="120" viewBox="0 0 100 100" fill="none">
<path
d="M50 15 C20 15, 10 45, 30 65 C45 80, 70 75, 75 55 C80 35, 60 25, 50 35 C40 45, 45 60, 55 60 C65 60, 70 50, 65 42"
stroke="#2dd4bf"
strokeWidth="8"
strokeLinecap="round"
fill="none"
style={tw('ease-out enter-stroke-dash-[250]/200/1000')}
/>
</svg>
</div>
{/* Staggered letters */}
<div style={tw('flex items-center')}>
{letters.map((letter, i) => (
<div
key={i}
style={tw(`flex text-8xl font-black text-foreground tracking-tight ease-spring/1/100/15 enter-fade-in/${200 + i * 80}/500 enter-slide-up/${200 + i * 80}/500`)}
>
{letter}
</div>
))}
</div>
{/* Tagline */}
<div style={tw('flex text-2xl text-muted-foreground mt-6 ease-spring enter-fade-in/1000/600')}>
Generate images & videos with code
</div>
</div>
);
}
Install this template to your project:
loopwind add https://loopwind.dev/api/templates/staggered-logo.json
Template will be installed to .loopwind/staggered-logo/
Then render it:
loopwind render staggered-logo '{"text":"loopwind"}'
Output will be saved to staggered-logo.mp4
Why loopwind?
Beautiful by Default
Built on shadcn/ui design system with semantic colors (text-primary, bg-card) and Tailwind CSS utilities. Your templates look professional and on brand out of the box.
Blazing Fast Rendering
- WASM-powered video: MP4 encoding that’s 12x faster than traditional approaches
- No dependencies: No FFmpeg required by default. Just JavaScript.
Built for AI Agents
Works with Claude Code, Codex, and any CLI-based coding agent. Install the loopwind skill with npx skills add https://loopwind.dev/skill.md to give your agent expertise in creating templates, using animation classes, and rendering images/videos.
Framework Agnostic
Works everywhere: Node.js, Bun, Deno, Python, PHP, Go. If it can run a CLI command, it can use loopwind.
Key Features
- 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
- AI skill -
npx skills add https://loopwind.dev/skill.mdfor Claude Code, Codex, and other agents - 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
Use Cases
Marketing Automation
- Generate personalized email headers
- Create dynamic social media posts
- Automate Open Graph images
Content Creation
- Produce video intros and outros
- Generate thumbnail variations
- Create branded graphics at scale
Developer Tools
- Build dynamic README badges
- Generate documentation images
- Create automated reports
E-commerce
- Product card generation
- Sale announcement videos
- Dynamic pricing graphics
Get Started
curl -fsSL https://loopwind.dev/install.sh | bash
loopwind init
loopwind add video
loopwind render video '{"title":"Hello World","description":"My first video"}'
View Full Documentation · Browse Templates
Learn More
- Getting Started Guide - Installation and first steps
- Templates - Create image and video templates
- Embedding Images - Using the image() helper
- Animation - Animation classes for videos
- Styling - Tailwind & shadcn/ui integration
- AI Skill - Integration guide for AI agents