loopwind 0.10.3 → 0.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/REGISTRY_SETUP.md +5 -15
  2. package/TEMPLATE_SOURCES.md +15 -31
  3. package/package.json +5 -4
  4. package/test-templates/demo-intro-props.json +4 -0
  5. package/website/README.md +42 -16
  6. package/website/dist/.gitkeep +3 -0
  7. package/website/dist/_astro/agents.I1-fN38o.css +1 -0
  8. package/website/dist/agents/index.html +51 -0
  9. package/website/dist/animation/index.html +605 -0
  10. package/website/dist/fonts/index.html +42 -41
  11. package/website/dist/helpers/index.html +6 -8
  12. package/website/dist/images/index.html +33 -39
  13. package/website/dist/index.html +70 -115
  14. package/website/dist/llm.txt +954 -322
  15. package/website/dist/robots.txt +5 -0
  16. package/website/dist/sdk/index.html +435 -0
  17. package/website/dist/styling/index.html +6 -8
  18. package/website/dist/templates/index.html +19 -21
  19. package/website/dist/video/index.html +193 -79
  20. package/website/package-lock.json +7558 -2595
  21. package/website/public/.gitkeep +3 -0
  22. package/website/dist/_astro/fonts.DHdiHGBO.css +0 -1
package/REGISTRY_SETUP.md CHANGED
@@ -29,12 +29,8 @@ loopwind.dev/
29
29
  "description": "Hero banner with gradient background",
30
30
  "files": [
31
31
  {
32
- "path": "banner-hero.tsx",
33
- "content": "import React from 'react';\n\nexport const meta = {...};\n\nexport default function BannerHero({...}) {...}"
34
- },
35
- {
36
- "path": "meta.json",
37
- "content": "{\"name\":\"banner-hero\",\"size\":{\"width\":1600,\"height\":900},...}"
32
+ "path": "template.tsx",
33
+ "content": "export const meta = {...};\n\nexport default function BannerHero({...}) {...}"
38
34
  }
39
35
  ]
40
36
  }
@@ -89,12 +85,8 @@ function getTemplate(name) {
89
85
  description: 'Hero banner',
90
86
  files: [
91
87
  {
92
- path: 'banner-hero.tsx',
88
+ path: 'template.tsx',
93
89
  content: require('./templates/banner-hero.tsx.txt')
94
- },
95
- {
96
- path: 'meta.json',
97
- content: require('./templates/banner-hero-meta.json')
98
90
  }
99
91
  ]
100
92
  }
@@ -121,11 +113,9 @@ Until you set up a real registry, use GitHub:
121
113
  ```
122
114
  github.com/yourusername/loopwind-templates/
123
115
  ├── banner-hero/
124
- │ ├── template.json
125
- │ ├── banner-hero.tsx
126
- │ └── meta.json
116
+ │ └── template.tsx # Contains export const meta + component
127
117
  ├── product-card/
128
- │ └── ...
118
+ │ └── template.tsx
129
119
  └── README.md
130
120
  ```
131
121
 
package/TEMPLATE_SOURCES.md CHANGED
@@ -54,12 +54,8 @@ loopwind add https://cdn.example.com/templates/awesome-banner.json
54
54
  "description": "My custom template",
55
55
  "files": [
56
56
  {
57
- "path": "my-template.tsx",
58
- "content": "import React from 'react';\n\nexport default function..."
59
- },
60
- {
61
- "path": "meta.json",
62
- "content": "{\"name\":\"my-template\"...}"
57
+ "path": "template.tsx",
58
+ "content": "export const meta = {...};\n\nexport default function..."
63
59
  }
64
60
  ]
65
61
  }
@@ -90,9 +86,7 @@ loopwind add github:myorg/design-templates/social-media/og-image
90
86
 
91
87
  ```
92
88
  username/repo/
93
- ├── template.json # Required
94
- ├── banner-hero.tsx
95
- └── meta.json
89
+ └── template.tsx # Contains export const meta + component
96
90
  ```
97
91
 
98
92
  Or with path:
@@ -101,12 +95,10 @@ Or with path:
101
95
  username/repo/
102
96
  └── templates/
103
97
  └── banner-hero/
104
- ├── template.json # Required
105
- ├── banner-hero.tsx
106
- └── meta.json
98
+ └── template.tsx # Contains export const meta + component
107
99
  ```
108
100
 
109
- **template.json format:**
101
+ **template.json format (for registry):**
110
102
 
111
103
  ```json
112
104
  {
@@ -115,12 +107,8 @@ username/repo/
115
107
  "description": "Hero banner template",
116
108
  "files": [
117
109
  {
118
- "path": "banner-hero.tsx",
119
- "content": "..."
120
- },
121
- {
122
- "path": "meta.json",
123
- "content": "..."
110
+ "path": "template.tsx",
111
+ "content": "export const meta = {...};\n\nexport default function..."
124
112
  }
125
113
  ]
126
114
  }
@@ -140,15 +128,15 @@ loopwind add /Users/you/templates/social-card
140
128
  ```
141
129
 
142
130
  **Requirements:**
143
- - Directory must contain `template.json` or `meta.json`
131
+ - Directory must contain `template.tsx` with `export const meta`
132
+ - Or a single file `template-name.tsx` with `export const meta`
144
133
  - All template files should be in the directory
145
134
 
146
135
  **Example local structure:**
147
136
 
148
137
  ```
149
138
  my-templates/banner-hero/
150
- ├── meta.json # Required (or template.json)
151
- ├── banner-hero.tsx
139
+ ├── template.tsx # Contains export const meta + component
152
140
  └── assets/
153
141
  └── logo.png
154
142
  ```
@@ -193,8 +181,8 @@ loopwind add github:mycompany/design-templates/marketing/hero-banner
193
181
  mkdir -p my-template
194
182
  cd my-template
195
183
 
196
- # Create files...
197
- # (banner.tsx, meta.json, etc.)
184
+ # Create template.tsx with export const meta
185
+ # ...
198
186
 
199
187
  # Install from local
200
188
  cd ../my-project
@@ -235,13 +223,9 @@ my-templates/
235
223
  ├── README.md
236
224
  └── templates/
237
225
  ├── banner-hero/
238
- │ ├── template.json
239
- │ ├── banner-hero.tsx
240
- │ └── meta.json
226
+ │ └── template.tsx # Contains export const meta + component
241
227
  └── product-card/
242
- ├── template.json
243
- ├── product-card.tsx
244
- └── meta.json
228
+ └── template.tsx # Contains export const meta + component
245
229
  ```
246
230
 
247
231
  2. Share installation command:
@@ -319,7 +303,7 @@ loopwind add ../../design-templates/banner
319
303
 
320
304
  **Local:**
321
305
  - Check path is correct
322
- - Ensure `meta.json` or `template.json` exists
306
+ - Ensure `template.tsx` exists with `export const meta`
323
307
  - Verify file permissions
324
308
 
325
309
  ### "Template already installed"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "loopwind",
3
- "version": "0.10.3",
3
+ "version": "0.10.4",
4
4
  "description": "A CLI tool for AI code agents and developers for generating images and videos.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -21,7 +21,8 @@
21
21
  "build": "tsc && npm run copy-templates",
22
22
  "copy-templates": "cp -r src/default-templates dist/",
23
23
  "dev": "tsc --watch",
24
- "prepublishOnly": "npm run build"
24
+ "prepublishOnly": "npm run build",
25
+ "postinstall": "patch-package"
25
26
  },
26
27
  "keywords": [
27
28
  "design",
@@ -66,7 +67,8 @@
66
67
  "satori": "^0.18.3",
67
68
  "sharp": "^0.34.5",
68
69
  "tailwind-merge": "^3.4.0",
69
- "tailwindcss": "^3.4.1"
70
+ "tailwindcss": "^3.4.1",
71
+ "patch-package": "^8.0.1"
70
72
  },
71
73
  "devDependencies": {
72
74
  "@types/chalk-animation": "^1.6.3",
@@ -75,7 +77,6 @@
75
77
  "@types/node": "^20.11.0",
76
78
  "@types/qrcode": "^1.5.6",
77
79
  "@types/react": "^18.2.48",
78
- "patch-package": "^8.0.1",
79
80
  "typescript": "^5.3.3"
80
81
  },
81
82
  "engines": {
package/test-templates/demo-intro-props.json ADDED
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Welcome!",
3
+ "subtitle": "Built with loopwind"
4
+ }
package/website/README.md CHANGED
@@ -33,6 +33,26 @@ Preview the build:
33
33
  npm run preview
34
34
  ```
35
35
 
36
+ ## Generating Demo Videos
37
+
38
+ The site includes live video examples. To generate the demo video:
39
+
40
+ ```bash
41
+ # In the main loopwind directory
42
+ loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out website/public/demo-intro.mp4
43
+ ```
44
+
45
+ Or create a template file and render it:
46
+
47
+ ```bash
48
+ cd website
49
+ loopwind init
50
+ loopwind add video-intro # or create a custom template
51
+ loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out public/demo-intro.mp4
52
+ ```
53
+
54
+ The `CodeVideoDemo` component expects videos in `/public/demo-intro.mp4`.
55
+
36
56
  ## Deployment
37
57
 
38
58
  ### Netlify
@@ -87,26 +107,32 @@ All styles use Tailwind utility classes and the `@theme` directive for design to
87
107
  website/
88
108
  ├── src/
89
109
  │ ├── components/
90
- │ │ └── Hero.astro # Hero component (optional)
110
+ │ │ ├── Hero.astro # Home page hero
111
+ │ │ └── CodeVideoDemo.astro # Code + video side-by-side
91
112
  │ ├── layouts/
92
- │ │ ├── BaseLayout.astro # Base HTML
93
- │ │ └── DocsLayout.astro # Docs with sidebar (+ hero)
113
+ │ │ ├── BaseLayout.astro # Base HTML with meta tags
114
+ │ │ └── DocsLayout.astro # Docs with sidebar
94
115
  │ ├── pages/
95
- │ │ ├── index.mdx # Getting Started
96
- │ │ ├── templates.mdx # Installing Templates
97
- │ │ ├── images.mdx # Image Rendering
98
- │ │ ├── video.mdx # Video Rendering
99
- │ │ ├── helpers.mdx # QR & Composition
100
- │ │ ├── styling.mdx # Tailwind & shadcn/ui
101
- │ │ ├── fonts.mdx # Font Handling
102
- │ │ ├── agents.mdx # AI Agents & Cursor
103
- │ │ └── llm.txt.ts # Combined docs endpoint
116
+ │ │ ├── index.mdx # Getting Started
117
+ │ │ ├── templates.mdx # Installing Templates
118
+ │ │ ├── images.mdx # Image Rendering
119
+ │ │ ├── video.mdx # Video Rendering
120
+ │ │ ├── animation.mdx # Animation Classes
121
+ │ │ ├── helpers.mdx # QR & Composition
122
+ │ │ ├── styling.mdx # Tailwind & shadcn/ui
123
+ │ │ ├── fonts.mdx # Font Handling
124
+ │ │ ├── agents.mdx # AI Agents & Cursor
125
+ │ │ ├── sdk.mdx # Programmatic SDK
126
+ │ │ └── llm.txt.ts # Combined docs endpoint
104
127
  │ └── styles/
105
- │ └── global.css # Tailwind 4 + design tokens
128
+ │ └── global.css # Tailwind 4 + design tokens
106
129
  ├── public/
107
- │ └── favicon.svg
108
- ├── astro.config.mjs # Includes @tailwindcss/vite
130
+ │ ├── favicon.svg
131
+ │ ├── demo-intro.mp4 # Generated demo video
132
+ │ └── robots.txt
133
+ ├── scripts/
134
+ │ └── generate-demo-video.mjs # Script to generate demo
135
+ ├── astro.config.mjs # Includes @tailwindcss/vite
109
136
  ├── package.json
110
137
  └── tsconfig.json
111
138
  ```
112
-
package/website/dist/.gitkeep ADDED
@@ -0,0 +1,3 @@
1
+ # Place demo videos here
2
+ # Generate with: loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out public/demo-intro.mp4
3
+
package/website/dist/_astro/agents.I1-fN38o.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-green-500:oklch(72.3% .219 149.579);--color-cyan-500:oklch(71.5% .143 215.221);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-thin:100;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--drop-shadow-lg:0 4px 4px #00000026;--drop-shadow-2xl:0 25px 25px #00000026;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-3xl:64px;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:#0a0a0a;--color-foreground:#fafafa;--color-card:#141414;--color-card-foreground:#fafafa;--color-primary:#fafafa;--color-primary-foreground:#18181b;--color-muted:#27272a;--color-muted-foreground:#a1a1aa;--color-accent:#27272a;--color-accent-foreground:#fafafa;--color-destructive:#ef4444;--color-border:#27272a;--color-input:#27272a;--color-brand-from:#6366f1;--color-brand-to:#8b5cf6}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.-top-1{top:calc(var(--spacing)*-1)}.top-0{top:calc(var(--spacing)*0)}.top-4{top:calc(var(--spacing)*4)}.top-8{top:calc(var(--spacing)*8)}.top-10{top:calc(var(--spacing)*10)}.top-12{top:calc(var(--spacing)*12)}.top-20{top:calc(var(--spacing)*20)}.-right-1{right:calc(var(--spacing)*-1)}.right-0{right:calc(var(--spacing)*0)}.right-4{right:calc(var(--spacing)*4)}.right-8{right:calc(var(--spacing)*8)}.right-10{right:calc(var(--spacing)*10)}.right-12{right:calc(var(--spacing)*12)}.right-20{right:calc(var(--spacing)*20)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-4{bottom:calc(var(--spacing)*4)}.bottom-8{bottom:calc(var(--spacing)*8)}.bottom-10{bottom:calc(var(--spacing)*10)}.bottom-20{bottom:calc(var(--spacing)*20)}.left-0{left:calc(var(--spacing)*0)}.left-4{left:calc(var(--spacing)*4)}.left-8{left:calc(var(--spacing)*8)}.left-10{left:calc(var(--spacing)*10)}.left-12{left:calc(var(--spacing)*12)}.left-20{left:calc(var(--spacing)*20)}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.m-6{margin:calc(var(--spacing)*6)}.my-8{margin-block:calc(var(--spacing)*8)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-12{margin-top:calc(var(--spacing)*12)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.ml-64{margin-left:calc(var(--spacing)*64)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1\/3{height:33.3333%}.h-2\/3{height:66.6667%}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-32{height:calc(var(--spacing)*32)}.h-64{height:calc(var(--spacing)*64)}.h-96{height:calc(var(--spacing)*96)}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-6{width:calc(var(--spacing)*6)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-20{width:calc(var(--spacing)*20)}.w-24{width:calc(var(--spacing)*24)}.w-32{width:calc(var(--spacing)*32)}.w-64{width:calc(var(--spacing)*64)}.w-96{width:calc(var(--spacing)*96)}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-8{border-style:var(--tw-border-style);border-width:8px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-blue-500{border-color:var(--color-blue-500)}.border-border{border-color:var(--color-border)}.border-border\/30{border-color:#27272a4d}@supports (color:color-mix(in lab,red,red)){.border-border\/30{border-color:color-mix(in oklab,var(--color-border)30%,transparent)}}.border-input{border-color:var(--color-input)}.border-white{border-color:var(--color-white)}.border-t-transparent{border-top-color:#0000}.bg-accent{background-color:var(--color-accent)}.bg-accent\/5{background-color:#27272a0d}@supports (color:color-mix(in lab,red,red)){.bg-accent\/5{background-color:color-mix(in oklab,var(--color-accent)5%,transparent)}}.bg-background{background-color:var(--color-background)}.bg-black{background-color:var(--color-black)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-card{background-color:var(--color-card)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-500{background-color:var(--color-green-500)}.bg-muted{background-color:var(--color-muted)}.bg-primary{background-color:var(--color-primary)}.bg-primary\/5{background-color:#fafafa0d}@supports (color:color-mix(in lab,red,red)){.bg-primary\/5{background-color:color-mix(in oklab,var(--color-primary)5%,transparent)}}.bg-primary\/50{background-color:#fafafa80}@supports (color:color-mix(in lab,red,red)){.bg-primary\/50{background-color:color-mix(in oklab,var(--color-primary)50%,transparent)}}.bg-primary\/90{background-color:#fafafae6}@supports (color:color-mix(in lab,red,red)){.bg-primary\/90{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-white\/50{background-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.bg-white\/50{background-color:color-mix(in oklab,var(--color-white)50%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[var\(--color-brand-from\)\]{--tw-gradient-from:var(--color-brand-from);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-background{--tw-gradient-from:var(--color-background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-black{--tw-gradient-from:var(--color-black);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-black\/80{--tw-gradient-from:#000c}@supports (color:color-mix(in lab,red,red)){.from-black\/80{--tw-gradient-from:color-mix(in oklab,var(--color-black)80%,transparent)}}.from-black\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-cyan-500{--tw-gradient-from:var(--color-cyan-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-purple-600{--tw-gradient-from:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-muted\/30{--tw-gradient-via:#27272a4d}@supports (color:color-mix(in lab,red,red)){.via-muted\/30{--tw-gradient-via:color-mix(in oklab,var(--color-muted)30%,transparent)}}.via-muted\/30{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-purple-500{--tw-gradient-via:var(--color-purple-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[var\(--color-brand-to\)\]{--tw-gradient-to:var(--color-brand-to);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-background{--tw-gradient-to:var(--color-background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-500{--tw-gradient-to:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-600{--tw-gradient-to:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-gray-900{--tw-gradient-to:var(--color-gray-900);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-green-500{--tw-gradient-to:var(--color-green-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-500{--tw-gradient-to:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-600{--tw-gradient-to:var(--color-pink-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-700{--tw-gradient-to:var(--color-purple-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.p-12{padding:calc(var(--spacing)*12)}.p-16{padding:calc(var(--spacing)*16)}.p-20{padding:calc(var(--spacing)*20)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.pt-0{padding-top:calc(var(--spacing)*0)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[200px\]{font-size:200px}.leading-loose{--tw-leading:var(--leading-loose);line-height:var(--leading-loose)}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.font-thin{--tw-font-weight:var(--font-weight-thin);font-weight:var(--font-weight-thin)}.text-balance{text-wrap:balance}.text-accent-foreground{color:var(--color-accent-foreground)}.text-black{color:var(--color-black)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-card-foreground{color:var(--color-card-foreground)}.text-destructive{color:var(--color-destructive)}.text-foreground{color:var(--color-foreground)}.text-gray-400{color:var(--color-gray-400)}.text-gray-600{color:var(--color-gray-600)}.text-gray-900{color:var(--color-gray-900)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-muted-foreground\/75{color:#a1a1aabf}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/75{color:color-mix(in oklab,var(--color-muted-foreground)75%,transparent)}}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white)80%,transparent)}}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-foreground{accent-color:var(--color-foreground)}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-lg{--tw-blur:blur(var(--blur-lg));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-md{--tw-blur:blur(var(--blur-md));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-none{--tw-blur: ;filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-sm{--tw-blur:blur(var(--blur-sm));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-xl{--tw-blur:blur(var(--blur-xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-0{--tw-brightness:brightness(0%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-50{--tw-brightness:brightness(50%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-100{--tw-brightness:brightness(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-150{--tw-brightness:brightness(150%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-200{--tw-brightness:brightness(200%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-0{--tw-contrast:contrast(0%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-50{--tw-contrast:contrast(50%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-100{--tw-contrast:contrast(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-150{--tw-contrast:contrast(150%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-200{--tw-contrast:contrast(200%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-lg{--tw-drop-shadow-size:drop-shadow(0 4px 4px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-lg));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.hover\:bg-accent\/50:hover{background-color:#27272a80}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}.hover\:bg-muted\/80:hover{background-color:#27272acc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/80:hover{background-color:color-mix(in oklab,var(--color-muted)80%,transparent)}}.hover\:bg-primary\/90:hover{background-color:#fafafae6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-foreground:hover{color:var(--color-foreground)}}@media (min-width:48rem){.md\:order-1{order:1}.md\:order-2{order:2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:px-12{padding-inline:calc(var(--spacing)*12)}.md\:py-16{padding-block:calc(var(--spacing)*16)}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}}*{border-color:var(--color-border)}body{background-color:var(--color-background);color:var(--color-foreground);font-feature-settings:"rlig" 1,"calt" 1}pre{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-muted);padding:calc(var(--spacing)*6);overflow-x:auto}code{background-color:var(--color-muted);padding-inline:calc(var(--spacing)*1.5);padding-block:calc(var(--spacing)*.5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-foreground);border-radius:.25rem}pre code{padding:calc(var(--spacing)*0);background-color:#0000}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background-color:var(--color-background)}::-webkit-scrollbar-thumb{background-color:var(--color-muted);border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background-color:#a1a1aa4d}@supports (color:color-mix(in lab,red,red)){::-webkit-scrollbar-thumb:hover{background-color:color-mix(in oklab,var(--color-muted-foreground)30%,transparent)}}.prose :is(h1){margin-bottom:calc(var(--spacing)*6);font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-foreground)}.prose :is(h2){margin-top:calc(var(--spacing)*10);margin-bottom:calc(var(--spacing)*4);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-bottom:calc(var(--spacing)*2);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(h3){margin-top:calc(var(--spacing)*8);margin-bottom:calc(var(--spacing)*3);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(h4){margin-top:calc(var(--spacing)*6);margin-bottom:calc(var(--spacing)*2);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(p){margin-bottom:calc(var(--spacing)*4);--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7);color:var(--color-muted-foreground)}.prose :is(a){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-primary);text-decoration-line:underline;text-decoration-color:#fafafa4d}@supports (color:color-mix(in lab,red,red)){.prose :is(a){-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}.prose :is(a){transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.prose :is(a):hover{color:#fafafacc}@supports (color:color-mix(in lab,red,red)){.prose :is(a):hover{color:color-mix(in oklab,var(--color-primary)80%,transparent)}}.prose :is(a):hover{text-decoration-color:#fafafa99}@supports (color:color-mix(in lab,red,red)){.prose :is(a):hover{-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent)}}}.prose :is(ul,ol){margin-bottom:calc(var(--spacing)*4)}:where(.prose :is(ul,ol)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.prose :is(ul,ol){padding-left:calc(var(--spacing)*6);color:var(--color-muted-foreground)}.prose :is(li){--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.prose :is(strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(blockquote){margin-block:calc(var(--spacing)*6);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--color-primary);padding-left:calc(var(--spacing)*4);color:var(--color-muted-foreground);font-style:italic}.prose :is(table){margin-block:calc(var(--spacing)*6);border-collapse:collapse;width:100%}.prose :is(th){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-muted);padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);text-align:left;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(td){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);color:var(--color-muted-foreground)}.prose :is(hr){margin-block:calc(var(--spacing)*8);border-color:var(--color-border)}@media (max-width:768px){.prose{padding-inline:calc(var(--spacing)*4)}}.home-prose :is(h2){margin-top:calc(var(--spacing)*16);margin-bottom:calc(var(--spacing)*6);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-foreground)}.home-prose :is(h3){margin-top:calc(var(--spacing)*12);margin-bottom:calc(var(--spacing)*4);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.home-prose :is(h4){margin-top:calc(var(--spacing)*8);margin-bottom:calc(var(--spacing)*3);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.home-prose :is(p){margin-bottom:calc(var(--spacing)*4);--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7);color:var(--color-muted-foreground)}.home-prose :is(ul,ol){margin-bottom:calc(var(--spacing)*6)}:where(.home-prose :is(ul,ol)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.home-prose :is(ul,ol){padding-left:calc(var(--spacing)*6);color:var(--color-muted-foreground)}.home-prose :is(li){--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.home-prose :is(a){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-primary);text-decoration-line:underline;text-decoration-color:#fafafa4d}@supports (color:color-mix(in lab,red,red)){.home-prose :is(a){-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}.home-prose :is(a){transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.home-prose :is(a):hover{color:#fafafacc}@supports (color:color-mix(in lab,red,red)){.home-prose :is(a):hover{color:color-mix(in oklab,var(--color-primary)80%,transparent)}}.home-prose :is(a):hover{text-decoration-color:#fafafa99}@supports (color:color-mix(in lab,red,red)){.home-prose :is(a):hover{-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent)}}}.home-prose :is(strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.home-prose :is(code){background-color:var(--color-muted);padding-inline:calc(var(--spacing)*1.5);padding-block:calc(var(--spacing)*.5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-foreground);border-radius:.25rem}.home-prose :is(pre){margin-block:calc(var(--spacing)*6);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-muted);padding:calc(var(--spacing)*6);overflow-x:auto}.home-prose :is(pre code){padding:calc(var(--spacing)*0);background-color:#0000}.home-prose :is(blockquote){margin-block:calc(var(--spacing)*6);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--color-primary);padding-left:calc(var(--spacing)*4);color:var(--color-muted-foreground);font-style:italic}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.hero[data-astro-cid-bbe6dxrz]{position:relative}@media (max-width: 768px){aside[data-astro-cid-mw7aashj]{display:none}main[data-astro-cid-mw7aashj]{margin-left:0;padding:1.5rem}}
package/website/dist/agents/index.html ADDED
@@ -0,0 +1,51 @@
1
+ <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/agents/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/agents/"><meta property="og:title"><meta property="og:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/og-image.png"><meta property="og:site_name" content="loopwind"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/agents/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/og-image.png"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="language" content="English"><link rel="stylesheet" href="/_astro/agents.I1-fN38o.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl flex items-center gap-2 bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj> <span class="text-5xl" data-astro-cid-mw7aashj>↫</span> <span data-astro-cid-mw7aashj>loopwind</span> </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="ai-agents">AI Agents</h1>
2
+ <p>loopwind is designed to work with AI coding assistants. Simply add the <code>_loopwind</code> folder to context.</p>
3
+ <h2 id="using-with-ai-code-agents">Using with AI Code Agents</h2>
4
+ <p>In Cursor or Claude Code (Cline), type <code>@_loopwind</code> to add the folder to context, then ask:</p>
5
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Generate an Open Graph image for my blog post about React hooks</span></span>
6
+ <span class="line"><span></span></span></code></pre>
7
+ <p>The AI will read the templates and generate the appropriate command.</p>
8
+ <h2 id="the-agentsmd-file">The AGENTS.md File</h2>
9
+ <p>When you run <code>loopwind init</code>, a <code>_loopwind/AGENTS.md</code> file is created with:</p>
10
+ <ul>
11
+ <li>Essential commands</li>
12
+ <li>Template helpers reference</li>
13
+ <li>Common workflows</li>
14
+ </ul>
15
+ <p>This gives AI agents everything they need to use loopwind effectively.</p>
16
+ <h2 id="example-workflows">Example Workflows</h2>
17
+ <h3 id="simple-image-generation">Simple Image Generation</h3>
18
+ <p><strong>Prompt:</strong></p>
19
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Create a social media card using the og-image template:</span></span>
20
+ <span class="line"><span>- Title: &quot;10 React Tips&quot; </span></span>
21
+ <span class="line"><span>- Description: &quot;Learn advanced patterns&quot;</span></span>
22
+ <span class="line"><span></span></span></code></pre>
23
+ <p><strong>AI generates:</strong></p>
24
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> og-image</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;10 React Tips&quot;,&quot;description&quot;:&quot;Learn advanced patterns&quot;}&#39;</span></span>
25
+ <span class="line"></span></code></pre>
26
+ <p><strong>Output:</strong> <code>_loopwind/outputs/og-image.png</code></p>
27
+ <h3 id="changelog-image">Changelog Image</h3>
28
+ <p><strong>Prompt:</strong></p>
29
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>Create a changelog image for 3 recent changes:</span></span>
30
+ <span class="line"><span>- Added video rendering support</span></span>
31
+ <span class="line"><span>- Improved template validation</span></span>
32
+ <span class="line"><span>- Fixed font loading issues</span></span>
33
+ <span class="line"><span></span></span></code></pre>
34
+ <p><strong>AI generates:</strong></p>
35
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> changelog-card</span><span style="color:#9ECBFF"> &#39;{</span></span>
36
+ <span class="line"><span style="color:#9ECBFF"> &quot;title&quot;:&quot;Version 1.2.0&quot;,</span></span>
37
+ <span class="line"><span style="color:#9ECBFF"> &quot;changes&quot;:[</span></span>
38
+ <span class="line"><span style="color:#9ECBFF"> &quot;Added video rendering support&quot;,</span></span>
39
+ <span class="line"><span style="color:#9ECBFF"> &quot;Improved template validation&quot;,</span></span>
40
+ <span class="line"><span style="color:#9ECBFF"> &quot;Fixed font loading issues&quot;</span></span>
41
+ <span class="line"><span style="color:#9ECBFF"> ]</span></span>
42
+ <span class="line"><span style="color:#9ECBFF">}&#39;</span></span>
43
+ <span class="line"></span></code></pre>
44
+ <p><strong>Output:</strong> <code>_loopwind/outputs/changelog-card.png</code></p>
45
+ <h2 id="next-steps">Next Steps</h2>
46
+ <ul>
47
+ <li><a href="/templates">Learn about Templates</a></li>
48
+ <li><a href="/images">Image Rendering</a></li>
49
+ <li><a href="/video">Video Rendering</a></li>
50
+ <li><a href="/helpers">Built-in Helpers</a></li>
51
+ </ul> </article> </div> </main> </div> </body></html>