loopwind 0.9.1

package/test-templates/_dsgn/templates/rotation-abs-test/template.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function RotationAbsTest({ tw }) {
+  return (
+    <div style={tw('flex relative w-full h-full bg-gray-900')}>
+      <div style={{
+        ...tw('w-32 h-32 rounded-lg bg-blue-500 absolute animate-spin/90'),
+        top: '50%',
+        left: '50%',
+        marginTop: '-64px',
+        marginLeft: '-64px'
+      }} />
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/rotation-corner/meta.json

@@ -0,0 +1,7 @@
+{
+  "name": "rotation-corner",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 3 },
+  "props": {}
+}

package/test-templates/_dsgn/templates/rotation-corner/template.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function RotationCorner({ tw }) {
+  return (
+    <div style={tw('flex w-full h-full bg-gray-900')}>
+      <div style={{
+        ...tw('w-32 h-32 rounded-lg bg-blue-500 animate-spin/90'),
+        transformOrigin: '64px 64px'
+      }} />
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/rotation-test/meta.json

@@ -0,0 +1,7 @@
+{
+  "name": "rotation-test",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 3 },
+  "props": {}
+}

package/test-templates/_dsgn/templates/rotation-test/template.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function RotationTest({ tw }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      <div style={{
+        ...tw('w-32 h-32 rounded-lg bg-blue-500 animate-spin/90'),
+        transformOrigin: '64px 64px'
+      }} />
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/shake-test/meta.json

@@ -0,0 +1,7 @@
+{
+  "name": "shake-test",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 2 },
+  "props": {}
+}

package/test-templates/_dsgn/templates/shake-test/template.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function ShakeTest({ tw }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900')}>
+      {/* Single element with bounce-in-up */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in-up/0/1')}>
+        SHAKE TEST
+      </h1>
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/static-image/.tmp/template-1763468746271.mjs

@@ -0,0 +1,7 @@
+import React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
+function StaticImage({ tw, title, subtitle }) {
+  return /* @__PURE__ */ React.createElement("div", { style: tw("flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between") }, /* @__PURE__ */ React.createElement("div", { style: tw("flex items-center gap-4") }, /* @__PURE__ */ React.createElement("div", { style: tw("w-12 h-12 rounded-full bg-white/20") }), /* @__PURE__ */ React.createElement("span", { style: tw("text-white/80 text-2xl") }, "dsgn")), /* @__PURE__ */ React.createElement("div", { style: tw("flex flex-col") }, /* @__PURE__ */ React.createElement("h1", { style: tw("text-6xl font-bold text-white mb-4") }, title), /* @__PURE__ */ React.createElement("p", { style: tw("text-2xl text-white/80") }, subtitle)), /* @__PURE__ */ React.createElement("p", { style: tw("text-white/60") }, "Static Image Template Test"));
+}
+export {
+  StaticImage as default
+};

package/test-templates/_dsgn/templates/static-image/meta.json

@@ -0,0 +1,9 @@
+{
+  "name": "static-image",
+  "type": "image",
+  "size": { "width": 1200, "height": 630 },
+  "props": {
+    "title": "string",
+    "subtitle": "string"
+  }
+}

package/test-templates/_dsgn/templates/static-image/template.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function StaticImage({ tw, title, subtitle }) {
+  return (
+    <div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between')}>
+      <div style={tw('flex items-center gap-4')}>
+        <div style={tw('w-12 h-12 rounded-full bg-white/20')} />
+        <span style={tw('text-white/80 text-2xl')}>dsgn</span>
+      </div>
+
+      <div style={tw('flex flex-col')}>
+        <h1 style={tw('text-6xl font-bold text-white mb-4')}>{title}</h1>
+        <p style={tw('text-2xl text-white/80')}>{subtitle}</p>
+      </div>
+
+      <p style={tw('text-white/60')}>Static Image Template Test</p>
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/translate-test/meta.json

@@ -0,0 +1,7 @@
+{
+  "name": "translate-test",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 2 },
+  "props": {}
+}

package/test-templates/_dsgn/templates/translate-test/template.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function TranslateTest({ tw }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      <div style={tw('w-32 h-32 rounded-lg bg-blue-500 animate-float/60')} />
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/video-loops/.tmp/template-1763468793192.mjs

@@ -0,0 +1,15 @@
+import React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
+function VideoLoops({ tw, title }) {
+  return /* @__PURE__ */ React.createElement("div", { style: tw("flex flex-col items-center justify-center w-full h-full bg-gray-900") }, /* @__PURE__ */ React.createElement("div", { style: tw("absolute top-20 left-20 w-32 h-32 rounded-full bg-blue-500/20 animate-pulse/30") }), /* @__PURE__ */ React.createElement("div", { style: tw("absolute bottom-20 right-20 w-48 h-48 rounded-full bg-purple-500/20 animate-pulse/45") }), /* @__PURE__ */ React.createElement("div", { style: tw("absolute top-40 right-40 w-8 h-8 rounded bg-blue-400 animate-float/60") }), /* @__PURE__ */ React.createElement("div", { style: tw("absolute bottom-40 left-40 w-6 h-6 rounded bg-purple-400 animate-float/50") }), /* @__PURE__ */ React.createElement("div", { style: {
+    ...tw("absolute w-20 h-20 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 animate-spin/90"),
+    top: "440px",
+    left: "920px"
+  } }), /* @__PURE__ */ React.createElement("h1", { style: tw("text-7xl font-bold text-white animate-bounce/40") }, title), /* @__PURE__ */ React.createElement("p", { style: tw("text-2xl text-white/60 mt-4 animate-wiggle/20") }, "Loop Animation Test"), /* @__PURE__ */ React.createElement("div", { style: {
+    ...tw("absolute w-4 h-4 rounded-full bg-green-500 animate-ping/30"),
+    bottom: "40px",
+    left: "952px"
+  } }));
+}
+export {
+  VideoLoops as default
+};

package/test-templates/_dsgn/templates/video-loops/meta.json

@@ -0,0 +1,9 @@
+{
+  "name": "video-loops",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 4 },
+  "props": {
+    "title": "string"
+  }
+}

package/test-templates/_dsgn/templates/video-loops/template.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export default function VideoLoops({ tw, title }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900')}>
+      {/* Pulsing background circles */}
+      <div style={tw('absolute top-20 left-20 w-32 h-32 rounded-full bg-blue-500/20 animate-pulse/30')} />
+      <div style={tw('absolute bottom-20 right-20 w-48 h-48 rounded-full bg-purple-500/20 animate-pulse/45')} />
+
+      {/* Floating elements */}
+      <div style={tw('absolute top-40 right-40 w-8 h-8 rounded bg-blue-400 animate-float/60')} />
+      <div style={tw('absolute bottom-40 left-40 w-6 h-6 rounded bg-purple-400 animate-float/50')} />
+
+      {/* Spinning icon - use fixed pixel position to avoid flex jitter */}
+      <div style={{
+        ...tw('absolute w-20 h-20 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 animate-spin/90'),
+        top: '440px',
+        left: '920px'
+      }} />
+
+      {/* Bouncing title */}
+      <h1 style={tw('text-7xl font-bold text-white animate-bounce/40')}>
+        {title}
+      </h1>
+
+      {/* Wiggling subtitle */}
+      <p style={tw('text-2xl text-white/60 mt-4 animate-wiggle/20')}>
+        Loop Animation Test
+      </p>
+
+      {/* Ping effect - use fixed pixel position for scale animation */}
+      <div style={{
+        ...tw('absolute w-4 h-4 rounded-full bg-green-500 animate-ping/30'),
+        bottom: '40px',
+        left: '952px'
+      }} />
+    </div>
+  );
+}

package/test-templates/_dsgn/templates/wrapped-spin/meta.json

@@ -0,0 +1,7 @@
+{
+  "name": "wrapped-spin",
+  "type": "video",
+  "size": { "width": 1920, "height": 1080 },
+  "video": { "fps": 30, "duration": 3 },
+  "props": {}
+}

package/test-templates/_dsgn/templates/wrapped-spin/template.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// Wrap rotating element in fixed-size container
+export default function WrappedSpin({ tw }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      {/* Fixed-size wrapper gets centered by flex */}
+      <div style={tw('flex w-32 h-32')}>
+        {/* Inner element rotates within stable container */}
+        <div style={{
+          ...tw('w-32 h-32 rounded-lg bg-blue-500 animate-spin/90'),
+          transformOrigin: '64px 64px'
+        }} />
+      </div>
+    </div>
+  );
+}

package/test-templates/compare-svgs.mjs

@@ -0,0 +1,30 @@
+import { renderToSVG } from '../dist/lib/renderer.js';
+import fs from 'fs/promises';
+
+async function compare() {
+  console.log('=== MINIMAL-SPIN (works) ===\n');
+
+  for (let frame = 0; frame < 3; frame++) {
+    const progress = frame / 89;
+    const svg = await renderToSVG('minimal-spin', { frame, progress });
+    await fs.writeFile(`output/compare-minimal-${frame}.svg`, svg);
+
+    // Extract the transform from the blue square
+    const match = svg.match(/fill="#3b82f6"[^>]*transform="([^"]+)"/);
+    console.log(`Frame ${frame}: ${match ? match[1] : 'no transform'}`);
+  }
+
+  console.log('\n=== CENTERED-SPIN (jitters) ===\n');
+
+  for (let frame = 0; frame < 3; frame++) {
+    const progress = frame / 89;
+    const svg = await renderToSVG('centered-spin', { frame, progress });
+    await fs.writeFile(`output/compare-centered-${frame}.svg`, svg);
+
+    // Extract the transform from the blue square
+    const match = svg.match(/fill="#3b82f6"[^>]*transform="([^"]+)"/);
+    console.log(`Frame ${frame}: ${match ? match[1] : 'no transform'}`);
+  }
+}
+
+compare().catch(console.error);

package/test-templates/convert-frames.mjs

@@ -0,0 +1,15 @@
+import sharp from 'sharp';
+import fs from 'fs/promises';
+
+async function convert() {
+  // Convert centered-spin SVG frames to PNG
+  for (let i = 0; i < 10; i++) {
+    const svg = await fs.readFile(`output/centered-frame-${i}.svg`);
+    await sharp(svg)
+      .png()
+      .toFile(`output/centered-frame-${i}.png`);
+    console.log(`Converted frame ${i}`);
+  }
+}
+
+convert().catch(console.error);

package/test-templates/debug-rotation.mjs

@@ -0,0 +1,25 @@
+import { renderToSVG } from '../dist/lib/renderer.js';
+import fs from 'fs/promises';
+
+async function debug() {
+  // Generate frames and diff
+  console.log('Generating centered-spin frames:\n');
+
+  for (let frame = 0; frame < 5; frame++) {
+    const progress = frame / 89;
+    const svg = await renderToSVG('centered-spin', { frame, progress });
+    await fs.writeFile(`output/centered-frame-${frame}.svg`, svg);
+    console.log(`Frame ${frame} saved`);
+  }
+
+  // Show the full SVG for frame 0 and 1
+  console.log('\n--- Frame 0 ---');
+  const svg0 = await fs.readFile('output/centered-frame-0.svg', 'utf-8');
+  console.log(svg0);
+
+  console.log('\n--- Frame 1 ---');
+  const svg1 = await fs.readFile('output/centered-frame-1.svg', 'utf-8');
+  console.log(svg1);
+}
+
+debug().catch(console.error);

package/test-templates/run-tests.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Test script for loopwind templates
+# Outputs to test-templates/_loopwind/outputs/
+
+cd "$(dirname "$0")"
+
+echo "🧪 Running loopwind template tests..."
+echo ""
+
+# Static image test
+echo "📷 Testing static-image..."
+loopwind render static-image '{"title":"Hello World","subtitle":"Testing static image template"}' --out _loopwind/outputs/static-image.png
+
+# QR code test
+echo "📱 Testing qr-code..."
+loopwind render qr-code '{"url":"https://loopwind.dev","title":"Scan to visit"}' --out _loopwind/outputs/qr-code.png
+
+# Composite template test
+echo "🧩 Testing composite..."
+loopwind render composite '{"title":"Composite Test","qrUrl":"https://github.com/tomtev/loopwind"}' --out _loopwind/outputs/composite.png
+
+# Animated intro video test
+echo "🎬 Testing animated-intro..."
+loopwind render animated-intro '{"title":"Welcome","subtitle":"Animation classes test"}' --out _loopwind/outputs/animated-intro.mp4
+
+# Video loops test
+echo "🔄 Testing video-loops..."
+loopwind render video-loops '{"title":"Loop Test"}' --out _loopwind/outputs/video-loops.mp4
+
+# Easing test video
+echo "📈 Testing easing-test..."
+loopwind render easing-test '{}' --out _loopwind/outputs/easing-test.mp4
+
+echo ""
+echo "✅ All tests complete! Check _loopwind/outputs/ for results."
+echo ""
+echo "Output files:"
+ls -la _loopwind/outputs/

package/test-templates/test-sdk.mjs

@@ -0,0 +1,115 @@
+import { defineTemplate, renderImage, renderVideo } from '../dist/sdk/index.js';
+import fs from 'fs/promises';
+import React from 'react';
+
+// Test 1: Static image template
+const staticTemplate = defineTemplate({
+  name: 'sdk-static',
+  type: 'image',
+  size: { width: 1200, height: 630 },
+  render: ({ tw, title, subtitle }) => (
+    React.createElement('div', { style: tw('flex flex-col w-full h-full bg-gradient-to-br from-green-600 to-teal-700 p-12 justify-center items-center') },
+      React.createElement('h1', { style: tw('text-6xl font-bold text-white mb-4') }, title),
+      React.createElement('p', { style: tw('text-2xl text-white/80') }, subtitle),
+      React.createElement('p', { style: tw('text-white/60 mt-8') }, 'Rendered via SDK')
+    )
+  )
+});
+
+// Test 2: Animated video template
+const animatedTemplate = defineTemplate({
+  name: 'sdk-animated',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 2 },
+  render: ({ tw, title }) => (
+    React.createElement('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-gray-900') },
+      React.createElement('div', { style: tw('w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-orange-500 mb-8 ease-out animate-bounce-in/0/0.3') }),
+      React.createElement('h1', { style: tw('text-7xl font-bold text-white ease-out animate-fade-in-up/0.2/0.6') }, title),
+      React.createElement('p', { style: tw('text-2xl text-white/60 mt-4 ease-out animate-fade-in/0.5/0.9') }, 'SDK Video Test')
+    )
+  )
+});
+
+// Test 3: QR code template
+const qrTemplate = defineTemplate({
+  name: 'sdk-qr',
+  type: 'image',
+  size: { width: 800, height: 800 },
+  render: ({ tw, qr, url }) => (
+    React.createElement('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
+      React.createElement('h2', { style: tw('text-3xl font-bold text-gray-900 mb-6') }, 'SDK QR Test'),
+      React.createElement('img', {
+        src: qr(url, { width: 400, margin: 2 }),
+        style: tw('w-80 h-80')
+      }),
+      React.createElement('p', { style: tw('text-gray-600 mt-6') }, url)
+    )
+  )
+});
+
+async function runTests() {
+  console.log('Testing dsgn SDK...\n');
+
+  // Test 1: Static image
+  console.log('1. Rendering static image...');
+  try {
+    const imageBuffer = await renderImage(staticTemplate, {
+      title: 'Hello SDK',
+      subtitle: 'Programmatic rendering works!'
+    }, { format: 'png' });
+    await fs.writeFile('output/sdk-static.png', imageBuffer);
+    console.log(`   ✔ sdk-static.png (${(imageBuffer.length / 1024).toFixed(1)}KB)\n`);
+  } catch (err) {
+    console.log(`   ✖ Failed: ${err.message}\n`);
+  }
+
+  // Test 2: Animated video
+  console.log('2. Rendering animated video...');
+  try {
+    const videoBuffer = await renderVideo(animatedTemplate, {
+      title: 'SDK Animation'
+    }, { format: 'mp4' });
+    await fs.writeFile('output/sdk-animated.mp4', videoBuffer);
+    console.log(`   ✔ sdk-animated.mp4 (${(videoBuffer.length / 1024).toFixed(1)}KB)\n`);
+  } catch (err) {
+    console.log(`   ✖ Failed: ${err.message}\n`);
+  }
+
+  // Test 3: QR code
+  console.log('3. Rendering QR code...');
+  try {
+    const qrBuffer = await renderImage(qrTemplate, {
+      url: 'https://dsgncli.com'
+    }, { format: 'png' });
+    await fs.writeFile('output/sdk-qr.png', qrBuffer);
+    console.log(`   ✔ sdk-qr.png (${(qrBuffer.length / 1024).toFixed(1)}KB)\n`);
+  } catch (err) {
+    console.log(`   ✖ Failed: ${err.message}\n`);
+  }
+
+  // Test 4: Different formats
+  console.log('4. Testing different formats (JPEG, WebP)...');
+  try {
+    const jpegBuffer = await renderImage(staticTemplate, {
+      title: 'JPEG Test',
+      subtitle: 'Quality 85'
+    }, { format: 'jpeg', quality: 85 });
+    await fs.writeFile('output/sdk-static.jpg', jpegBuffer);
+
+    const webpBuffer = await renderImage(staticTemplate, {
+      title: 'WebP Test',
+      subtitle: 'Modern format'
+    }, { format: 'webp' });
+    await fs.writeFile('output/sdk-static.webp', webpBuffer);
+
+    console.log(`   ✔ sdk-static.jpg (${(jpegBuffer.length / 1024).toFixed(1)}KB)`);
+    console.log(`   ✔ sdk-static.webp (${(webpBuffer.length / 1024).toFixed(1)}KB)\n`);
+  } catch (err) {
+    console.log(`   ✖ Failed: ${err.message}\n`);
+  }
+
+  console.log('SDK tests complete!');
+}
+
+runTests().catch(console.error);

package/website/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1763410784506
+	}
+}

package/website/.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/website/README.md

@@ -0,0 +1,112 @@
+# dsgn Documentation Website
+
+This is the documentation website for dsgn, built with [Astro](https://astro.build/) and styled with [Tailwind CSS 4](https://tailwindcss.com/) using shadcn/ui design tokens.
+
+## Development
+
+Install dependencies:
+
+```bash
+cd website
+npm install
+```
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+Open http://localhost:4321
+
+## Build
+
+Build for production:
+
+```bash
+npm run build
+```
+
+Preview the build:
+
+```bash
+npm run preview
+```
+
+## Deployment
+
+### Netlify
+
+This site is configured to deploy on Netlify. The `netlify.toml` file in the root directory handles the configuration.
+
+**Netlify Settings:**
+- Base directory: `website`
+- Build command: `npm run build`
+- Publish directory: `dist`
+
+Just connect your GitHub repo to Netlify and it will automatically deploy!
+
+### Other Platforms
+
+You can also deploy to:
+- **Vercel**: Connect repo, set build settings
+- **Cloudflare Pages**: Same as above
+- **GitHub Pages**: May need additional configuration
+
+## Adding Documentation
+
+Documentation pages are in `src/pages/` as `.mdx` files. They use the `DocsLayout` for consistent styling and navigation.
+
+To add a new page:
+
+1. Create `src/pages/your-page.mdx`
+2. Add frontmatter:
+```yaml
+---
+layout: ../layouts/DocsLayout.astro
+title: Your Page Title
+description: Page description
+---
+```
+3. Add to navigation in `src/layouts/DocsLayout.astro`
+
+## Styling
+
+The site uses **Tailwind CSS 4** with shadcn/ui-inspired design tokens defined in `src/styles/global.css`:
+
+- Dark theme optimized for readability
+- Semantic color names (`background`, `foreground`, `muted`, `accent`, etc.)
+- Consistent spacing and typography
+- Custom brand gradient for the logo
+
+All styles use Tailwind utility classes and the `@theme` directive for design tokens.
+
+## Structure
+
+```
+website/
+├── src/
+│   ├── components/
+│   │   └── Hero.astro            # Hero component (optional)
+│   ├── layouts/
+│   │   ├── BaseLayout.astro      # Base HTML
+│   │   └── DocsLayout.astro      # Docs with sidebar (+ hero)
+│   ├── pages/
+│   │   ├── index.mdx           # Getting Started
+│   │   ├── templates.mdx       # Installing Templates
+│   │   ├── images.mdx          # Image Rendering
+│   │   ├── video.mdx           # Video Rendering
+│   │   ├── helpers.mdx         # QR & Composition
+│   │   ├── styling.mdx         # Tailwind & shadcn/ui
+│   │   ├── fonts.mdx           # Font Handling
+│   │   ├── agents.mdx          # AI Agents & Cursor
+│   │   └── llm.txt.ts          # Combined docs endpoint
+│   └── styles/
+│       └── global.css          # Tailwind 4 + design tokens
+├── public/
+│   └── favicon.svg
+├── astro.config.mjs             # Includes @tailwindcss/vite
+├── package.json
+└── tsconfig.json
+```
+

package/website/astro.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://dsgn.dev',
+  integrations: [mdx()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  markdown: {
+    shikiConfig: {
+      theme: 'github-dark',
+    },
+  },
+});
+