loopwind 0.9.1 → 0.9.3
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.
- package/FONTS.md +13 -13
- package/HELPERS_DEMO.md +2 -2
- package/PROJECT_STRUCTURE.md +38 -38
- package/PUBLISHING.md +13 -13
- package/README.md +71 -71
- package/REGISTRY_SETUP.md +18 -18
- package/SHADCN_INTEGRATION.md +7 -7
- package/TAILWIND.md +4 -4
- package/TEMPLATE_SOURCES.md +30 -30
- package/dist/lib/renderer.js +15 -15
- package/dist/lib/renderer.js.map +1 -1
- package/dist/lib/tailwind-detector.js +1 -1
- package/dist/lib/tailwind-detector.js.map +1 -1
- package/dist/lib/tailwind.d.ts +1 -1
- package/dist/lib/tailwind.d.ts.map +1 -1
- package/dist/lib/tailwind.js +19 -19
- package/dist/lib/tailwind.js.map +1 -1
- package/dist/lib/template-validator.js +1 -1
- package/dist/lib/template-validator.js.map +1 -1
- package/examples/nextjs-api/README.md +6 -6
- package/examples/nextjs-api/pages/api/intro-video.ts +1 -1
- package/examples/nextjs-api/pages/api/og-image.ts +2 -2
- package/package.json +2 -3
- package/test-templates/TESTS.md +1 -1
- package/test-templates/test-sdk.mjs +2 -2
- package/website/README.md +2 -2
- package/website/astro.config.mjs +1 -1
- package/website/package-lock.json +186 -2480
- package/website/package.json +1 -1
- package/website/public/robots.txt +1 -1
- package/_dsgn/templates/banner-hero/banner-hero.tsx +0 -57
- package/_dsgn/templates/banner-hero/meta.json +0 -14
- package/_dsgn/templates/composite-card/meta.json +0 -16
- package/_dsgn/templates/composite-card/template.tsx +0 -44
- package/_dsgn/templates/image/meta.json +0 -13
- package/_dsgn/templates/image/template.tsx +0 -28
- package/_dsgn/templates/kitchen-sink/meta.json +0 -13
- package/_dsgn/templates/kitchen-sink/template.tsx +0 -72
- package/_dsgn/templates/qr-card/meta.json +0 -14
- package/_dsgn/templates/qr-card/template.tsx +0 -39
- package/_dsgn/templates/test-parent/child/meta.json +0 -11
- package/_dsgn/templates/test-parent/child/template.tsx +0 -27
- package/_dsgn/templates/test-parent/meta.json +0 -12
- package/_dsgn/templates/test-parent/template.tsx +0 -30
- package/_dsgn/templates/test-sibling/meta.json +0 -11
- package/_dsgn/templates/test-sibling/template.tsx +0 -20
- package/_dsgn/templates/video/.tmp/template-1763421345296.mjs +0 -43
- package/_dsgn/templates/video/.tmp/template-1763421362228.mjs +0 -43
- package/_dsgn/templates/video/.tmp/template-1763421377706.mjs +0 -43
- package/_dsgn/templates/video/meta.json +0 -17
- package/_dsgn/templates/video/template.tsx +0 -48
- package/test-templates/_dsgn/templates/absolute-spin/meta.json +0 -7
- package/test-templates/_dsgn/templates/absolute-spin/template.tsx +0 -16
- package/test-templates/_dsgn/templates/animated-intro/.tmp/template-1763468771640.mjs +0 -7
- package/test-templates/_dsgn/templates/animated-intro/meta.json +0 -10
- package/test-templates/_dsgn/templates/animated-intro/template.tsx +0 -23
- package/test-templates/_dsgn/templates/centered-spin/.tmp/template-1763468525386.mjs +0 -7
- package/test-templates/_dsgn/templates/centered-spin/meta.json +0 -7
- package/test-templates/_dsgn/templates/centered-spin/template.tsx +0 -11
- package/test-templates/_dsgn/templates/composite/.tmp/template-1763468815645.mjs +0 -7
- package/test-templates/_dsgn/templates/composite/meta.json +0 -9
- package/test-templates/_dsgn/templates/composite/template.tsx +0 -23
- package/test-templates/_dsgn/templates/easing-test/.tmp/template-1763468824501.mjs +0 -7
- package/test-templates/_dsgn/templates/easing-test/meta.json +0 -7
- package/test-templates/_dsgn/templates/easing-test/template.tsx +0 -47
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466364336.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466584319.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466667797.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466746504.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466930225.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467004552.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467060334.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467124493.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467174690.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467359134.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467451928.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467758275.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467985201.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468020563.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468090428.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468211036.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468394057.mjs +0 -10
- package/test-templates/_dsgn/templates/minimal-spin/meta.json +0 -7
- package/test-templates/_dsgn/templates/minimal-spin/template.tsx +0 -13
- package/test-templates/_dsgn/templates/no-origin-spin/meta.json +0 -7
- package/test-templates/_dsgn/templates/no-origin-spin/template.tsx +0 -10
- package/test-templates/_dsgn/templates/opacity-test/meta.json +0 -7
- package/test-templates/_dsgn/templates/opacity-test/template.tsx +0 -9
- package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468758954.mjs +0 -17
- package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468815672.mjs +0 -17
- package/test-templates/_dsgn/templates/qr-code/meta.json +0 -9
- package/test-templates/_dsgn/templates/qr-code/template.tsx +0 -20
- package/test-templates/_dsgn/templates/rotation-abs-test/meta.json +0 -7
- package/test-templates/_dsgn/templates/rotation-abs-test/template.tsx +0 -15
- package/test-templates/_dsgn/templates/rotation-corner/meta.json +0 -7
- package/test-templates/_dsgn/templates/rotation-corner/template.tsx +0 -12
- package/test-templates/_dsgn/templates/rotation-test/meta.json +0 -7
- package/test-templates/_dsgn/templates/rotation-test/template.tsx +0 -12
- package/test-templates/_dsgn/templates/shake-test/meta.json +0 -7
- package/test-templates/_dsgn/templates/shake-test/template.tsx +0 -12
- package/test-templates/_dsgn/templates/static-image/.tmp/template-1763468746271.mjs +0 -7
- package/test-templates/_dsgn/templates/static-image/meta.json +0 -9
- package/test-templates/_dsgn/templates/static-image/template.tsx +0 -19
- package/test-templates/_dsgn/templates/translate-test/meta.json +0 -7
- package/test-templates/_dsgn/templates/translate-test/template.tsx +0 -9
- package/test-templates/_dsgn/templates/video-loops/.tmp/template-1763468793192.mjs +0 -15
- package/test-templates/_dsgn/templates/video-loops/meta.json +0 -9
- package/test-templates/_dsgn/templates/video-loops/template.tsx +0 -39
- package/test-templates/_dsgn/templates/wrapped-spin/meta.json +0 -7
- package/test-templates/_dsgn/templates/wrapped-spin/template.tsx +0 -17
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default function ShakeTest({ tw }) {
|
|
4
|
-
return (
|
|
5
|
-
<div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900')}>
|
|
6
|
-
{/* Single element with bounce-in-up */}
|
|
7
|
-
<h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in-up/0/1')}>
|
|
8
|
-
SHAKE TEST
|
|
9
|
-
</h1>
|
|
10
|
-
</div>
|
|
11
|
-
);
|
|
12
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
|
|
2
|
-
function StaticImage({ tw, title, subtitle }) {
|
|
3
|
-
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"));
|
|
4
|
-
}
|
|
5
|
-
export {
|
|
6
|
-
StaticImage as default
|
|
7
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default function StaticImage({ tw, title, subtitle }) {
|
|
4
|
-
return (
|
|
5
|
-
<div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between')}>
|
|
6
|
-
<div style={tw('flex items-center gap-4')}>
|
|
7
|
-
<div style={tw('w-12 h-12 rounded-full bg-white/20')} />
|
|
8
|
-
<span style={tw('text-white/80 text-2xl')}>dsgn</span>
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
<div style={tw('flex flex-col')}>
|
|
12
|
-
<h1 style={tw('text-6xl font-bold text-white mb-4')}>{title}</h1>
|
|
13
|
-
<p style={tw('text-2xl text-white/80')}>{subtitle}</p>
|
|
14
|
-
</div>
|
|
15
|
-
|
|
16
|
-
<p style={tw('text-white/60')}>Static Image Template Test</p>
|
|
17
|
-
</div>
|
|
18
|
-
);
|
|
19
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "file:///Users/tommyvedvik/Dev/dsgn/node_modules/react/index.js";
|
|
2
|
-
function VideoLoops({ tw, title }) {
|
|
3
|
-
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: {
|
|
4
|
-
...tw("absolute w-20 h-20 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 animate-spin/90"),
|
|
5
|
-
top: "440px",
|
|
6
|
-
left: "920px"
|
|
7
|
-
} }), /* @__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: {
|
|
8
|
-
...tw("absolute w-4 h-4 rounded-full bg-green-500 animate-ping/30"),
|
|
9
|
-
bottom: "40px",
|
|
10
|
-
left: "952px"
|
|
11
|
-
} }));
|
|
12
|
-
}
|
|
13
|
-
export {
|
|
14
|
-
VideoLoops as default
|
|
15
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default function VideoLoops({ tw, title }) {
|
|
4
|
-
return (
|
|
5
|
-
<div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900')}>
|
|
6
|
-
{/* Pulsing background circles */}
|
|
7
|
-
<div style={tw('absolute top-20 left-20 w-32 h-32 rounded-full bg-blue-500/20 animate-pulse/30')} />
|
|
8
|
-
<div style={tw('absolute bottom-20 right-20 w-48 h-48 rounded-full bg-purple-500/20 animate-pulse/45')} />
|
|
9
|
-
|
|
10
|
-
{/* Floating elements */}
|
|
11
|
-
<div style={tw('absolute top-40 right-40 w-8 h-8 rounded bg-blue-400 animate-float/60')} />
|
|
12
|
-
<div style={tw('absolute bottom-40 left-40 w-6 h-6 rounded bg-purple-400 animate-float/50')} />
|
|
13
|
-
|
|
14
|
-
{/* Spinning icon - use fixed pixel position to avoid flex jitter */}
|
|
15
|
-
<div style={{
|
|
16
|
-
...tw('absolute w-20 h-20 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 animate-spin/90'),
|
|
17
|
-
top: '440px',
|
|
18
|
-
left: '920px'
|
|
19
|
-
}} />
|
|
20
|
-
|
|
21
|
-
{/* Bouncing title */}
|
|
22
|
-
<h1 style={tw('text-7xl font-bold text-white animate-bounce/40')}>
|
|
23
|
-
{title}
|
|
24
|
-
</h1>
|
|
25
|
-
|
|
26
|
-
{/* Wiggling subtitle */}
|
|
27
|
-
<p style={tw('text-2xl text-white/60 mt-4 animate-wiggle/20')}>
|
|
28
|
-
Loop Animation Test
|
|
29
|
-
</p>
|
|
30
|
-
|
|
31
|
-
{/* Ping effect - use fixed pixel position for scale animation */}
|
|
32
|
-
<div style={{
|
|
33
|
-
...tw('absolute w-4 h-4 rounded-full bg-green-500 animate-ping/30'),
|
|
34
|
-
bottom: '40px',
|
|
35
|
-
left: '952px'
|
|
36
|
-
}} />
|
|
37
|
-
</div>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
// Wrap rotating element in fixed-size container
|
|
4
|
-
export default function WrappedSpin({ tw }) {
|
|
5
|
-
return (
|
|
6
|
-
<div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
|
|
7
|
-
{/* Fixed-size wrapper gets centered by flex */}
|
|
8
|
-
<div style={tw('flex w-32 h-32')}>
|
|
9
|
-
{/* Inner element rotates within stable container */}
|
|
10
|
-
<div style={{
|
|
11
|
-
...tw('w-32 h-32 rounded-lg bg-blue-500 animate-spin/90'),
|
|
12
|
-
transformOrigin: '64px 64px'
|
|
13
|
-
}} />
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
);
|
|
17
|
-
}
|