loopwind

Quick Start

Loopwind is a CLI tool for generating images and videos with React and Tailwind CSS. It’s designed to be used with AI Agents and Cursor.

Installation

curl -fsSL https://loopwind.dev/install.sh | bash

This installs loopwind to ~/.loopwind/ and adds the loopwind command to your PATH. Requires Node.js 18+.

Initialize in Your Project

Navigate to any project folder and run:

loopwind init

This creates .loopwind/loopwind.json — a configuration file with your project’s theme colors.

Install AI Skill

Give your AI agent expertise in loopwind:

npx skills add https://github.com/tomtev/loopwind

This installs a skill that teaches Claude Code (or other AI agents) how to create templates, use animation classes, and render images/videos.

Use with Claude Code

With the loopwind skill installed, Claude has deep knowledge of template structure, animation classes, and Tailwind CSS patterns for Satori. Just ask:

Create an OG image for my blog post about TypeScript tips

Create an animated intro video for my YouTube channel

Claude will create optimized templates and render the final output automatically.

Use with OpenClaw

Install the loopwind skill via ClawHub:

npx clawhub@latest install loopwind

Once installed, you can ask OpenClaw to generate images and videos just like any other agent. The skill teaches it how to create templates, use the CLI, and render output. For example:

Generate a social card for my latest release

Make a short video announcement for our new feature

Install a Template

1. Official Templates

loopwind add image-template
loopwind add video-template

Templates are installed to: .loopwind/<template>/

Benefits:

  • Templates are local to your project
  • Version controlled with your project
  • Easy to share within your team

Render a Template

loopwind render template-name '{"title":"Hello World","subtitle":"Built with loopwind"}'

or use a local props file:

loopwind render template-name props.json

Commands

loopwind add <source>

Install a template from various sources:

# Official templates
loopwind add image-template
loopwind add video-template

These will be downloaded to .loopwind/<template>/

loopwind list

List all installed templates:

loopwind list

loopwind render <template> <props> [options]

Render an image or video:

# Image with inline props
loopwind render banner-hero '{"title":"Hello World"}'

# Video with inline props
loopwind render video-intro '{"title":"Welcome"}'

# Using a props file
loopwind render banner-hero props.json

# Custom output
loopwind render banner-hero '{"title":"Hello"}' --out custom-name.png

# Different format
loopwind render banner-hero '{"title":"Hello"}' --format jpeg

Options:

  • --out, -o - Output filename (default: <template>.<ext> in current directory)
  • --format - Output format: png, jpeg, svg (images only)
  • --quality - JPEG quality 1-100 (default: 92)

loopwind validate <template>

Validate a template:

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)

loopwind init

Initialize loopwind in a project:

loopwind init

Creates .loopwind/loopwind.json configuration file with your project’s design tokens.

Animation Classes (Video Only)

Use Tailwind-style animation classes - no manual calculations needed:

// Fade in: starts at 0ms, lasts 500ms
<h1 style={tw('enter-fade-in/0/500')}>Hello</h1>

// Loop: ping effect every 500ms
<div style={tw('loop-ping/500')} />

// Combined with easing
<h1 style={tw('ease-out enter-bounce-in-up/0/600')}>Title</h1>

See Animation for the complete reference.

Next Steps