--- name: loopwind description: Generate images and videos from React + Tailwind CSS templates using the loopwind CLI. metadata: version: "0.25.11" --- # loopwind A CLI tool for generating images and videos from JSX templates using Tailwind CSS and Satori. Templates live in a `.loopwind/` directory alongside your codebase. ## 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 ```bash 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: ```bash 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: ```bash npx skills add https://loopwind.dev/skill.md ``` 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. ### Install a Template #### 1. Official Templates ```bash loopwind add image-template loopwind add video-template ``` Templates are installed to: `.loopwind/

Hello

Title

{title}

{title}

Fade in at start

Bounce in after 300ms

Smooth slide

{title}

{title}

{title}

{title}

{title}

{title}

Hello

World

Mixed

Hello

Hello

Bouncy!

Goodbye

Hello and Goodbye

Accelerating

Decelerating

Smooth

Dramatic

Smooth entrance, sharp exit

Bouncy spring!

Custom spring (mass=1, stiffness=100, damping=10)

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{title}

{/* Uses Inter Bold from loopwind.json */} {title}

loopwind

Install this skill

Comments